Les meilleurs conseils pour créer un design Web2, polices, couleurs, effets ...
Pour créer un design à la mode, il vous faut un
design style Web 2.0.
Pour cela, pas de standards établis, seulement des règles simples que l'on retrouve sur tous ces nouveaux sites.
Par exemple,
les contours arrondis, les couleurs pastel, les polices sans serif ou les ombres sont typiques de ces designs.
Roman Mittermayr a écrit un
article en anglais qui résume parfaitement ces règles.
Avec son autorisation, voici donc la traduction en français de son article sur la
2.0Culture.
Grâce à ses
conseils et ses
exemples, vous pourrez créer vous-même votre design Web 2.0 !
Préface
Quand je parle de Web2.0/Ajax, je ne parle PAS de la technologie elle-même. Je n'ai pas pu trouver un autre terme pour ce type de
design très populaire qui apparait souvent dans les billets de TechCrunch ou d'autre site similaires. C'est du au fait que la plupart
des "applications web" utilisent la technologie Ajax. Je pense que je vais l'appeler la "2.0Culture" pour le moment.
Pour que l'on porte attention à votre tout nouveau site web 2.0Culture, vous devez lui associer un design "up-to-date".
Non, je ne parle pas d'utiliser les CSS au lieu des tableaux et autres.
Je parle de simplicité combinée avec des grandes polices d'écritures, des couleurs brillantes, et des noms de marque très, très étranges.
Malgré le fait que vous deviez apprendre des termes tels que tags, tag cloud et beaucoup d'autres mots,
vous pourrez toujours être un très bon designer nouvelle-vague sans être pour autant un pro de la technologie 2.0Culture.
Maintenant, on commence pendant que vous êtes chauds.
Avant tout, visitez ces sites pour avoir une vue d'ensemble. Essayez d'identifier le principales ressemblances entre tous ces concepts.
Ils semblent tous avoir été crée par le même développeur. Même s'il n'y a pas de ligne de conduite (à part celle-ci, wooho!) pour
ce type de design, il semble qu'il y ait un secret pour ce design si particulier. Regardez ces sites :
Comme vous l'avez remarqué, ces designs sont plutôt similaires. Mais attendez un peu, le 2.0Culture est beaucoup plus que ça.
Ce n'est qu'un echantillon et nous allons nous attarder plus longuement sur ce type de design dans cet article.
Il y a des millions d'autres sites que vous penserez être un "hmm, cela ressemble à un design 2.0Culture".
Si vous voulez en savoir plus sur la technologie qui est derrière, utilisez notre ami, Google.
Choses A-FAIRE :
- Formes Arrondies
- Ombres
- Sans Serif
- Pastel v2.0
- Footers
- Buttons
- Taille de Police: Disproportionnée
- HTML Descriptif (type XML)
Choses A-NE-PAS-FAIRE :
- Applets Java (le JavaScript est ok)
- GIFs animés (ceux qui clignotent)
- Sites 100% Flash
- Tableaux visibles
Bien, maintenant, on met les mains dans le cambouis et on commence avec:
Formes Arrondies
Ok, ce genre de cassage-des-règles-html semble être une chose obligatoire aujourd'hui.
Franchement, je préfère aussi les formes arrondies aux rectangles stricts.
Néanmoins, certains fournisseurs de 2.0Culture continue à utiliser des arrangement rectangulaires.
Ce n'est pas un problème, jetez un oeil Ã
whiteboard.com, leur éditeur à une interface rectangulaire.
Pas mal non plus. Pour tenter une approche psychologique de la différence, je dirai que :
- Les formes arrondies ont un look plus inventif, plus jeune, plus flexible et experimental
- Des rectangles laissent une impression de professionalisme, de grande entreprise à qui ont peu faire confiance
Voilà , c'est mon interprétation personnelle. Mais prenez un peu de temps et pensez-y. Consultez plusieurs design différents
et faîtes votre choix sur ce que vous sentez au fond de vous quand vous les regardez.
Je suppose qu'une inter-connection entre professionalisme et un peu de ces sites tout neufs serait un choix parfait pour ce projet.
Comment y parvenir? C'est simple, Combinez. On a 2 solutions:
- Utiliser un conteneur rectangulaire pour votre site et des boîtes de dialogue arrondies pour le contenu et la navigation
- Utiliser un conteneur arrondi et garder les div de contenu et la navigation très stricts
C'est à vous de voir ce que vous préférez pour votre projet. Malgré tout, je dois dire qu'utiliser la seconde approche semble
être la plus simple à mettre en place pour le designer web moyen. Vous pouvez faire un simple design Photoshop pour cela.
Cela vous prendra peut-être 15 minutes pour le faire. Pour être honnête, je pense que la tendance va plutôt vers un site web sans bordure,
contenant beaucoup de formes arrondies (c'est qui est la première solution en fait). Donc soyez prêt à passer la vitesse supérieure et
à creuser un peu plus dans quelques guides CSS.
Voici une liste de sites internet qui présentent plus en détails comment implanter un design aux courbes arrondies:
Alors prenez un café et ouvrez ces bouquins virtuels. Cela vous prendra peut-être 30 minutes à une heure si vous débutez.
Mais cela vaut le coup. Pensez à la compatibilité avec les navigateurs, c'est une partie difficile.
Ombres
N'en faîtes pas trop avec les ombres, mais pensez à les utiliser. Ce n'est pas obligatoire pour un web designer d'y penser mais
les utilisateurs ressentent la différence quand elles sont présentes. Il ne s'agit pas de faire un look 3D, mais plus de donner une nouvelle dimension
aux boîtes ayant un design plat. C'est utilisé la plupart du temps pour créer un joli fond pour le haut du site ou autour
des divs de contenu. Les exemples parlent d'eux-même:
Sans Serif (Arial)
J'ai du mettre à jour cette partie du guide à cause des nombreuses plaintes à propos de la police Arial, alors qu'Helvetica
et d'autres polices sans-serif vont parfaitement (voir même mieux!). C'est un style particuler qui n'est pas tout jeune.
Je me souviens d'une époque à laquelle il était complètement "nerdy" d'utiliser Arial pour tout ce que vous écriviez.
Simplement parce que les geeks essayaient de se séparer des utilisateurs de Word et choisissaient Arial car plus facile à lire
plutôt que Times New Roman. Et maintenant, wohoo, cela revient en force. Littéralement, Arial (et Helvetica, et les identiques...)
est devenu une règle simple pour un bon look web. Une taille de police entre 8 et 10 était une chose sympa à faire il y a peu.
Maintenant, on parle de tailles de 14 et plus. Sans rire. Bien qu'il ne soit pas très populaire de coller à la "navigation facile et au contenu lisible",
les choses ont beaucoup changé aujourd'hui. Plus sur ce sujet un peu après. Juste un rapide résumé de cette règle de l'Arial:
- Utilisez une police de base pour votre site. Et faîtes toutes les autres polices relatives à celle-ci (ex: font-size: 115%).
Cela permet à l'utilisateur de pouvoir zoomer/dézoomer avec leur molette tout en gardant un look correct.
- Définissez TOUJOURS vos paramètres de police dans une fichier CSS
- Comme d'habitude, UNE SEULE POLICE PAR PAGE WEB ira parfaitement, faîtes-moi confiance
- Ne jamais utiliser plus de 3 tailles de police différentes
Pastel v2.0
Cela fait un moment que c'est connu. Le seul ajout à cela est une combinaison de couleurs pastel avec 100% de vert, de bleu ou de rouge.
Laissez vos backgrounds de site et vos élements d'interface en gris, blanc ou d'autres couleurs pastel très claires.
Et maintenant, vous pourriez utiliser un header 100% Vert. Ou (remarquer le OU, et pas le ET) utiliser une barre de navigation rouge
avec des liens en blanc. Allez-y, mettez vos liens de téléchargement en bleu ciel. Ca va le faire. N'en faîtes pas de trop,
c'est la raison pour laquelle il faut vraiment faire attention au "OU". Je pense que vous trouverez un moyen de vous en sortir de toutes
façons. Vous pouvez vérifier ça sur
Skype.
Footers
C'est devenu un élément obligatoire. La plupart des utilisateurs ne le voient souvent même aps. Vous n'avez peut-être même jamais
cliqué sur un d'eux. Mais ils ont besoin d'être là pour rendre votre site professionnel. Sans eux, tout le monde penserai que
vous avez crée un site personnel. Croyez-le ou pas, essayez et voyez par vous-même. Oh et s'il vous plait, ne pensez même pas
à coller votre footer en bas de la page en permanence sans vous soucier du scrolling vertical. Il y a deux principaux types de footers,
vous devez décider vous-même lequel est le plus adapté à votre design en particulier. Voici deux liens avec ces deux principaux
types de footer:
La différence :
Friendster : Une approche plus centré, contenant les éléments tous bien alignés.
Del.icio.us: Une ligne horizontale grise, les liens alignés à gauche (ou à droite) juste en dessous
Boutons
Aujourd'hui, la tendance est aux "boutons image". Aussi bien arrondis et strictement rectangles. Et la plupart du temps aussi grand
qu'on le peut. L'utilisation numéro 1 est devenue un élément à posséder absolument: un bouton DOWNLOAD. Quand ils sont utilisé pour
la navigation à l'intérieur du site, les boutons semblent être plus petit. Et n'oubliez pas d'utiliser de l'Arial pour le libéllé.
La preuve :
Tutorial - Comment créer un bouton type Web 2.0 avec Illustrator
Taille de Police: Démesurée !
Des tailles de police énormes. Rappelez-vous de bien configurer toutes les options des tailles de police à l'intérieur de votre
fichier CSS et de définir une taille et une police de base, pour utiliser des tailles relatives ensuite. C'est la procédure normale.
Un petit résumé :
- Faîtes de gros titres, faîtes-les resortir
- Utilisez des sous-titres moyens, pour faire la transition entre le gros titre et le contenu normal
- Utilisez une taille de police normale pour le contenu
- Eviter les grands blocs de texte, c'est crucial
- Essayez de séparer votre contenu en plusieurs boîtes de tailles moyenne
Regardez un peu
Clipmarks ou
Banshee Project.
Pour ceux qui aiment les tailles fantaisistes:
HTML Descriptif (type XML)
Dernière règle mais pas des moindre. C'est un must! Faîtes un site petit et simple. Le style rétro redevient à la mode.
Pas parce que c'est joli, mais plus parce qu'il est descriptif. D'accord, pour comprendre cela, vous devriez avoir quelques bases de XML
pour avoir une idée. Comme Jeff Bezos l'a dit recemment: le Web 2.0 est en train de rendre le web plus lisible pour les ordinateurs.
C'est en fait la vraie raison. Le Web 2.0 est fait de lists, paragraphes, titres (h1, h2 ..., TRES important) et des liens non-javascript.
C'est simple, non ? Un autre avantage de cette approche est une meilleure intégration dans les moteurs de recherche.
Allez voir les forums sur le référencement et vos y trouverez la vérité. Google adore les sites web basiques.
Vous êtes un "Google Hero" si votre site internet commence avec un simple titre H1. Ne faîtes pas trop de tableaux.
Faîtes dans la simplicité si vous voulez avoir la 2.0Culture.
Regardez les sources de ces pages:
Consulter l'article original sur la 2.0Culture [anglais]
Certains articles de pixtiz peuvent aussi vous intéresser:
Si vous voulez réagir à cet article ou donner vos propres conseils, laissez un commentaire sur cet article.
