====== Introduction ====== Cette page va regrouper les méthodes de design employées. Les sites internet peuvent se décomposer en quelques grands groupes de propriétaires: * design unique * standard pour particuliers * standard pour groupes (associations, familles, amis, etc...) * standard pour professionnels (TPE, PME, Grands Comptes, etc...) * e-commerce Le but d'un site internet est de publier de l'information et de communiquer avec les internautes (visiteurs, amis, prospects ou clients) Pour avoir une liste complète: http://fr.wikipedia.org/wiki/Liste_des_m%C3%A9tiers ====== Résolutions d'Ecran ====== Un site internet doit fournir **une bonne expérience au visiteur**. Visuellement, on doit s'adapter à de nombreux supports de diffusion: 320x240 640x480 (VGA) 800x600 1024x600 1024x768 1280x720 (HD) 1280x800 1280x1024 1600x1050 1600x1200 1920x1080 (Full HD) Le standard actuel est 1024x768. Les portables actuels proposent du 1280x800. La HD s'installe petit à petit sur les téléviseurs. Et de manière assez surprenante, les micro-books connaissent un franc succès, avec souvent une résolution en 1024x600. ====== Le nombre de pages ====== Le minimum de pages pour un site: * Accueil * Contact (Formulaire) * Actualités * Présentation Générale * Présentation Détaillée * Présentation Experte * Galerie Photo * Galerie Audio/Video * Téléchargements * FAQ: Foire Aux Questions * Plan du site * Archives * Newsletter * Commentaires / Livre d'or * Liens * Mentions Légales * Crédits On aura aussi souvent une **version en anglais** pour chaque page. Ce qui va doubler le nombre de pages! * Home * Contact Us (Formulaire) * News * General Introduction * Detailed Presentation * Expert Presentation * Photo Gallery * Audio/Video Gallery * Download * FAQ: Frequently-Asked-Questions * Sitemap * Archives * Newsletter * Comments / GuestBook * Links * Legal Notice * Credits ====== Le concept du 16x10 ====== La vision humaine préfère le format 16x9, c'est le format des films au cinéma. Et c'est celui du HD et Full HD. * 16x9 * 160x90 * 320x180 * 480x270 * 800x450 * 1280x720 (HD) * 1600x900 * 1920x1080 (Full HD) Les écrans d'ordinateur et les industriels ont tendance à préférer le 16x10! (plus pratique et moins cher à construire) * 16x10 * 160x100 * 320x200 * 640x400 * 960x600 * 1600x1000 ====== Layout ====== Le tableau suivant est de dimension 960x600 Cela revient à un carré de 6x6 rectangles en 16x10 Si on se souvient des standards d'écrans présentés auparavant, on obtient une sorte de "carré magique" (qui est plutôt rectangulaire). Ce format va bien convenir au 1024x768 qui est le standard actuel. En effet, le navigateur internet et la barre de tâche Windows grignotent facilement plus 100 pixels en hauteur. L'écran 800x600 ne verra pas la dernière colonne, mais la partie visible sera homogène. Souvent, pour les écrans en 1024x768 ou 1280x1024, les utilisateurs affichent une colonne à gauche pour les favoris internet ou autre widget.
# # # # # #
# # # # # #
# # # # # #
# # # # # #
# # # # # #
# # # # # #
====== Ergonomie ====== Nous venons de voir que le format 960x600 constitue un bon compromis pour afficher le contenu d'un site internet standard. Nous allons maintenant avancer sur des notions d'ergonomie pour décider où afficher notre contenu. Dans la culture occidentale, on lit de gauche à droite et de haut en bas. Sur internet, comme la majorité des sites sont en anglais, ce sens de lecture est respecté. (Avec la Chine et le Japon qui deviennent de plus en importants sur internet, il va falloir inverser !) Le sens de lecture crée une hiérarchie dans les espaces d'affichage de la page. Pour exemple, il y a un enjeu économique important à figurer dans les premiers résultats de recherche des moteurs comme Google ou Yahoo. Les visiteurs essaient les 3 premiers résultats, rarement plus. Le résultats en 2ème page restent pratiquement inconnus à la plupart des gens. Pour bien communiquer sur votre site internet, vous devez tenir compte de cette hiérarchie dans les espaces d'affichage. On remplit avec des couleurs "chaudes" ou "froides" le design en 960x600 pour mieux montrer les zones importantes. Les sites internet standards respectent cette disposition "naturelle"
# # # # # #
# # # # # #
# # # # # #
# # # # # #
# # # # # #
# # # # # #
[[design:exemples|Vous trouverez plus d'exemples sur cette page]] ====== Design ====== Nous venons de faire un tour des différentes contraintes d'ergonomie pour que le visiteur puisse profiter d'une bonne expérience sur votre site. Maintenant, passons à la liberté du design qui fera de votre site un site unique, pour bien le différencier des autres. C'est ce qui fera que le visiteur parlera de vous et pas d'un autre. Et pour encore améliorer l'expérience du visiteur: il doit passer le plus de temps possible sur votre site... et revenir régulièrement! Pour le moment, le format 960x600 est simplement un carré de 6x6... vide! Quand le visiteur vient pour la première fois sur votre site, il va suivre le cheminement "standard": de gauche à droite et de haut en bas. Le Design va justement ajouter des éléments graphiques et audiovisuels pour créer une identité à votre site et le différencier d'un site "standard". ===== Variations ===== On peut déplacer le "hotspot" ("zone chaude"!) pour focaliser la première attention. On va parler du mode "Découverte", "Repère" et "Adhérent" pour séparer les étapes de l'expérience du visiteur. ===== Exceptions ====== Pour rendre unique votre site, il faut aussi savoir surprendre et sortir des sentiers battus. Etonner le visiteur vous aidera aussi à le fidéliser! Les internautes sont curieux et ouverts à de nouvelles expériences. ====== Couleurs ====== Les écran d'ordinateur utilisent le principe du RGB: Red Green Blue. Chaque pixel de l'écran est composé de 3 parties: une rouge (Red), une vert (Green) et une bleue (Blue) dont la luminosité varie entre 0 et 255 (8 bits). En combinant toutes les possibilités, on arrive à plus de 16 millions de nuances de couleurs différentes (255 x 255 x 255 = 16 581 375). Pour les nécessités du design, c'est une palette largement suffisante! L'oeil humain moyen aurait du mal à vraiment discerner toutes ces subtilités. ===== RGB ===== Avec le RGB, on utilise souvent la notation hexadécimale, c'est le cas pour les pages web, avec le CSS. En hexadécimal: 0 = 0 1 = 1 etc... 9 = 9 A = 10 B = 11 C = 12 D = 13 E = 14 F = 15 Quelques couleurs simples en RGB hexadécimal: * Blanc : #FFFFFF
* Noir : #000000
* Rouge : #FF0000
* Vert : #00FF00
* Bleu : #0000FF
* gris clair : #BBBBBB
* gris foncé : #555555
===== HSV et HSL ===== Le RGB convient très bien aux machines, puisque c'est comme ça qu'elles fonctionnent. Par contre, pour un humain, c'est loin d'être naturel. http://en.wikipedia.org/wiki/HSL_color_space Il est plus naturel d'utiliser la notation en HSV (et il existe aussi HSL, pour le moment peu répandu... il fera parler de lui quand les navigateurs utiliseront tous le CSS3). HSV veut dire Hue Saturation Value (Teinte Saturation Valeur) HSL veut dire Hue Saturation Luminosity (Teinte Saturation Luminosité) On ne détaillera pas ici le HSL car encore peu répandu pour le monde internet. HSV est utilisé et disponible pour plus d'outils. De plus, pour un être humain, il est plus naturel que le RGB. On va donc commencer à travailler avec le HSV. ===== HSV ===== Les couleurs en HSV peuvent tenir dans un cylindre: {{design:200px-hsv_cylinder.png|}} Les couleurs se répartissent autour du disque dans le cylindre. Les couleurs sont représentées par la value Hue qui va de 0 à 360 degrés. C'est donc très simple pour changer la palette de couleurs! Il suffit de changer la valeur de H. La Saturation va permetttre de nuancer la couleur avec le blanc. Saturation varie de 0 à 1 (ou plus simplement de 0 à 100%). La Valeur va permetttre de nuancer la couleur avec le noir. Value varie de 0 à 1 (ou plus simplement de 0 à 100%). ====== Calques et Lisibilité ====== Un bon contraste doit être respecté pour que le texte soit lisible. Si le texte est d'une couleur, il faut que la ou les couleurs en dessous de ce texte soit assez contrasté pour qu'il soit acceptable pour le visiteur. En ne prenant pas -pour le moment- d'éléments graphiques complexes comme les images, on peut limiter la palette des couleurs d'un site à 10 couleurs différentes. Souvent le noir, le blanc et une nuance de gris feront partie de la palette, il reste donc 7 couleurs à sélectionner. Ces couleurs de base peuvent être nuancées, cela revient à avoir dans sa palette une lumière, une ombre et un neutre. - couleur 0 - couleur 1 - couleur 2 - couleur 3 - couleur 4 - couleur 5 - couleur 6 - couleur 7 - couleur 8 - couleur 9 ====== Elements HTML ====== Le différents éléments HTML qui peuvent avoir une palette sont assez nombreux. Pour les couleurs, il y a la couleur du texte, la couleur du cadre et la couleur du fond. Dans les textes, il y a - le corps de texte, - l'hyperlien, - les titres, - les informations annexes, - les actions possibles des visiteurs. Dans la structure de la page, il y a - la bannière d'entête, - le contenu principal, - les informations des barres latérales (et en dessus ou en dessous), - les informations en pied de page, - etc... ====== Photos ====== Les photos représentent des compositions complexes de couleurs. Pour pouvoir les marier harmonieusement avec des couleurs de fond plus simples, il faut pouvoir accéder à l'histogramme des couleurs de ces photos. Comme les photos sont maintenant autour des 10Mp, cela représente une charge non négligeable pour calculer l'histogramme des couleurs. Pour rappel, l'histogramme des couleurs consiste à prendre chaque pixel de l'image et puis de comptabiliser les couleurs RGB présentes dans la photo. 10 millions de pixels donne un comptage de 10 millions de couleurs RGB. Mais nous ne sommes pas intéressés par toutes les couleurs de la photo, simplement les principales couleurs pour pouvoir construire une palette associée. Pour accélérer le processus, il est plus simple de travailler sur une miniature de l'image. 100x100 = 10.000 pixels cela représente un équivalent assez satisfaisant pour déterminer les couleurs dominantes. Il est possible de mieux intégrer la photo dans le fond avec un travail sur plusieurs couleurs et une transparence radiale progressive de la photo.