Approche Théorique du Webdesign


Voilà un petit dossier pour vous parler de méthodologie et de théorie, en matière de webdesign.

Le webdesign est un métier, et il est très important de prendre l’approche qu’il faut avec ce mot là. Un métier s’apprend plutôt facilement de nos jours. On peut en conclure que l’apprentissage est une chose très rapide, mais c’est la correction de vos multiples défauts qui peut prendre le temps d’une vie.
Je veux dire par là qu’il est bien plus facile de juger un webdesign correctement que d’en faire un correctement !

Un point sur le Design

Design veut dire “concevoir, réaliser”. Et c’est ce que beaucoup de graphistes oublient. Ce n’est pas simplement “je met ce titre en rouge, et ce texte en Helvetica parce que ça rendra bien”. Ce qui intéresse un designer, c’est “Quelle est la couleur la plus adaptée pour ce titre, et quelle typographie pour ce texte ?” Derrière un design graphique, une recherche est à faire en amont, tant au niveau symbolique, qu’au niveau lisibilité, cohérence, et utilisabilité. Je pense que pour remplir ce type de “devoir” envers la cible le minimum est un message clair, concis et une création simple. Plus le visuel est chargé, plus il est difficile à lire, et le but premier est déjà raté.

Et aujourd’hui, les communautés graphiques, les écoles, les magazines, ont tendance à “donner” une technique plutôt poussée pour apprendre à maitriser des logiciels, mais très peu abordent le sujet de la simplicité du message et de sa mise en forme. De la même manière, les gens qui ont besoin d’une identité graphique ou d’un webdesign par exemple, en oublient de vérifier si le prestataire à qui ils parlent a une réelle technique et culture graphique, si c’est bien un designer, et non un “artiste” qui bidouille quelques lignes de code. Tout le monde tend à oublier la philosophie du design.

La perfection ne réside pas dans la beauté puisqu’elle est subjective, mais dans la justification, et la réalisation de ce qu’on lui demande.

Le design graphique, c’est de la psychologie, aussi.

Quelle type de réaction est sensé se produire chez un utilisateur si j’utilise cette typographie sur ce fond ? A quoi s’attend l’utilisateur sur cette page ? La prévisibilité est à prendre en compte de manière à combler les attentes de l’utilisateur.

La simplicité d’utilisation ne doit pas être délaissée au profit d’enjolivures visuelles inaptes au design. Nous ne faisons pas de décoration, ni d’illustration. (Loin de moi l’idée de dénigrer les illustrateurs, mais c’est un autre métier).

Et même sans parler de visuels complètement “cheap”, la typographie et la mise en page sont généralement bâclées, puisqu’irréfléchies.

Donc voici une petite (toute petite) liste, qui vous permettra de suivre une procédure “normale” de conception d’un webdesign. Je ne parlerai donc pas de pratique ici, mais uniquement de théorie. Je veux aussi vous dire qu’il est préférable de connaître toutes ces règles pour mieux les enfreindre, il est inutile de dire que mon coté “minimaliste” que je mets en avant n’est pas sensé vous empêcher de surprendre avec ce que vous voulez, tant que c’est de bon gout, et justifié !

Quelle type de personne mon site cible-t-il ?

Si vous parlez de hi-tech, ou si vous parlez de bateau, votre site n’aura pas la même portée. Par conséquent, il vous faut définir une cible, qui pourrait s’avérer utile de connaitre lors des prochains choix. Ce qui peut nous intéresser par exemple, c’est si votre cible serait potentiellement un utilisateur averti, équipée d’un écran avec une bonne résolution et d’un navigateur de qualité, ou si elle serait capable de qualifier votre contenu d’important, au point de peut-être pouvoir justifier quelques publicités par exemple.
De la même manière, vous pourrez vous engager aux cotés d’un web qui va de l’avant, en avertissant les utilisateurs d’IE que leurs navigateurs ne vaut pas grand chose, mais là n’est pas le débat. De la même manière, votre cible ( et par conséquent votre contenu ) est sensé influencer votre contenu.

Comme lors de la création d’un logotype par exemple, si vous voulez véhiculer une image “sérieuse”, autant adopter un style graphique simple, tandis qu’un site qui se veut proche de ses utilisateurs, complice, peut se permettre plus de fioritures !

Le contenu

Il est très important de faire un point sur le contenu avant de commencer quoi que ce soit. Je ne pense pas qu’il soit nécessaire de préciser grand chose de plus à ce sujet, mais il faut avoir en tête ce point là pour toutes les autres étapes.

L’arborescence

Voilà, le premier point qui est généralement négligé.
L’arborescence se traduit par l’organisation de vos pages. A partir de quelle page puis-je aller à telle autre ? Cette étape est généralement mentale, naturelle, pour un site de petite taille, mais prend de l’importance pour des sites dotés d’une arborescence un peu plus complexe.
S’il y a beaucoup de page, comment vais-je organiser mon/mes menu(s) ? Dois-je les diviser en catégories ? Quelle catégorie mérite d’apparaître dans les menus principaux ?

Le Zoning

Voilà donc la première étape que l’on pourrait qualifier de “graphique”. Par gain de temps, je conseillerais de faire cette étape sur papier. C’est l’étape où on délimite pour chaque page des zones correspondantes aux menus, aux contenus, au logo,… Si elles changent de contenu, elles sont susceptibles de changer de mise en forme. Pensez avant tout utilisabilité : un menu est d’autant plus utile s’il est bien placé tout comme le contenu. Beaucoup de webdesigners utilisent des “grilles” pour cette étape. Certains utilisent même le nombre d’or, pour construire des pages harmonieuses dans la construction, chacun sa technique, mais voilà une étape à ne pas négliger.
Passons ensuite à une étape un peu plus intéressante graphiquement.

Exemple de zoning basé sur le nombre d’or (en largeur uniquement)


Le Contraste

Voilà la base du design. Le contraste permet de mettre en valeur certaines choses, sans pour autant mettre des petites fleurs et des effets biseautés sur chaque élément graphique.
Il y a 6 formes de contrastes importantes : le contraste de forme, de rotation, de taille, de couleur, de position et de texture.
Il est important “d’imposer” un “code”, que vous partagerez implicitement avec les utilisateurs, pour qu’ils ne soient pas perdus à chaque nouveau clic.

La couleur et la forme

Il est primordial d’avoir une bonne connaissance en symbolique notamment pour tout ce qui concerne les formes et les couleurs. Un site qui présentera des formes arrondies et des couleurs pastels sera plutôt destiné à des femmes, tandis qu’un site en noir et blanc, avec des formes un peu plus brutales, se verra en train de passer un message de sérieux, à qui l’ont fait plus facilement confiance. C’est tant de choses qu’analysent, inconsciemment ou pas, chaque utilisateur à sa manière. Faites attention quand même, dans d’autres pays, les symboles peuvent changer radicalement !

Le code que vous établirez avec vos utilisateur, au niveau du contraste, des formes et des couleurs, s’appelle l’identité visuelle.

La typographie

La typographie possède des règles, qui résultent de constats qu’ont fait certains typographes. Avant d’utiliser une typographie, réfléchissez comme le créateur de cette fonte : dans quel but a-t-elle été crée ? Quel message transmet-elle ? Par exemple, Futura est une police géométrique, elle impose à l’utilisateur un peu plus de temps de lecture pour comprendre le sens des mots. Ce genre de police est complètement adaptée à un titre ou un logo. Les empattements donnent un coté traditionnel, tandis qu’une typographie linéale de type Verdana donnera un effet plus récent, plus numérique.

En cours, ma professeur m’a conseillé de n’utiliser que du Verdana, sur du support numérique. Cette typographie a été créée pour le web, et elle a fait ses preuves sur ce support, mais je ne suis pas pour un web ou il n’y aurait que du Verdana partout, par conséquent, faites vos choix, mais pour moi, c’est tout vu !

L’échelle typographique est quelque chose de très important. La plus utilisée est celle que vous voyez dans Photoshop, ou la plupart des éditeurs de textes. Elle a été créée au 16ème siècle. Mais vous êtes libre d’en créer une et de vous y tenir, elle vous permettra de hiérarchiser l’information et de faciliter la mise en page et la lecture.

Les marges et gouttière, l’interlignage, la justification, l’emphase, la ponctuation flottante… Ce sont pleins de paramètres à prendre en compte pour une mise en page qui en vaille la peine ! Que ce soit encore une fois en webdesign, ou dans la construction de n’importe quel document voué à être lu. Le nombre de caractères par ligne est aussi à prendre en compte. Par exemple, il est prouvé qu’une ligne idéale à la lecture sur un écran est composé de moins d’une centaine de caractères.

Tout ceci se gère en CSS, et il est important d’avoir de bonnes bases en tant que webdesigner.

Le Développement

Dans l’idéal, un développeur confirmé développera pour vous, mais vous devez au moins discuter avec lui, pour être sur que le design finira comme vous l’avez conçu. Notamment au niveau de la typographie, car un intégrateur ne fait pas forcément attention à tous les paramètres que vous utilisez dans votre maquette.
Sinon, c’est à vous que revient la lourde tâche de prendre encore plus de décisions.
Pour quel navigateur vais-je devoir perfectionner mon site web ?
Mon site est-t-il accessible, et valide W3C ? Quelle tolérance dois-je avoir vis à vis des résolutions d’écran ? Quel technologies/CMS puis-je me permettre d’utiliser ? Comment puis-je optimiser mon SEO (Search Engine Optimization) ? Quel hébergement est le plus approprié ? Vous vous devez ensuite de faire les tests en conséquence et travailler sur l’évolution possible du site. Mais ce sont d’autres compétences, et je n’en parlerai pas aujourd’hui.

Source : http://www.fr.livingtuts.com
Publicités

Laisser un commentaire

Choisissez une méthode de connexion pour poster votre commentaire:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

Retour en haut ↑

%d blogueurs aiment cette page :