L'expression et la communication visuelle
La création graphique pour le Web - principales contraintes et spécificités
Les maillons de la chaîne graphique Web
Les familles de caractères, l'anatomie du caractère, les attributs de caractère, les attributs de paragraphe
La composition du texte : niveaux de texte, alignements, largeur de justification, espacements verticaux, multicolonnage, corps, interlignage, interlettrage, inter mots...
La pertinence des choix typographiques au plan sémantique et graphique
L'affichage du texte à l'écran et sa lisibilité, les polices utilisateur, les polices embarquées, les réglages typographiques fins, le recours au texte-image (anti aliasing).
La synthèse additive, l'espace colorimétrique et les profils RVB, et - dans ce cadre:
le cercle chromatique, les couleurs primaires, secondaires, complémentaires, la balance des couleurs, la teinte, la saturation, la luminosité, la température de couleur, la gamme de tons
L'impact d'une couleur, les nuances d'une couleur, l'association de plusieurs couleurs
La couleur isolée et l'interaction de plusieurs couleurs
L'accord coloré, l'unité, la dominante couleur, les nuances, les différents types de contrastes
Les fonctions de l'image (expliquer, impliquer, illustrer, attirer, établir une complicité), les types d'images, le rapport texte/image (le texte comme complément ou relais), l'utilisation de l'image (accroche, illustration, document, arrière plan), la combinaison texte-image
Le cadrage, la composition, l'angle de vue, la profondeur de champ, l'exposition, la couleur, la texture…
L'histogramme et les informations, le réglage de la gamme de tons, la balance des couleurs, la création de tranches
Les images vectorielles: logos, pictos, illustrations, schémas, cartes, graphiques
Les éléments graphiques d'un site Web, illustrations, titrages, logos, pictos, panneaux, boutons, navigation
Le montage d'image, le montage-imbrication, le mixage, la fusion, l'utilisation de filtres, de textures, de motifs, de formes et d'images vectorisées, la combinaison pixel-vectoriel
L'idée de composition concerne tous les secteurs des arts visuels. Elle vaut aussi bien pour l'art que pour la communication, elle vaut pour la peinture, pour l'affiche et pour les sites Web. Elle peut être entendue comme l'agencement de surfaces et de couleurs dans un format, ou, pour le dire autrement, il s'agit de définir et de combiner les différents éléments formels qui s'inscrivent dans une surface donnée.
Quelque soit le support et les éléments constitutif de l'image, la composition peut être organisée en fonction de règles bien établies. L'emploi de lignes de force comme en photographie, l'appui sur des lignes directrices,sur la circulation de la lumière ou sur l'arabesque comme en peinture. Les règles que l'on pourrait rapporter sont nombreuses, mais ne sont jamais miraculeuses. Que ce soit en établissant un axe central ou par l'inscription dans une forme géométrique ou encore par l'emploi d'une grille... Dans tous les cas il s'agit de trouver le rapport pertinent, la cohérence entre toutes les parties de la production, que ce soit pour un dessin ou pour une page Web.
Pour en rester ou pour en revenir au Web, considérons une page Web : elle doit afficher des éléments de nature différentes. Il s'agit donc de travailler la typographie, les couleurs et d'associer un certain nombre de zones de nature distincte. Réussir l'assemblage ou la combinaison d'éléments relevant de la typographie, de la couleur, du dessin (logo, pictos, symboles, illustrations), de la photo, réunir des éléments textuels, des images fixes, des animations interactives, des vidéos, des éléments de navigation et des formulaires, n'est pas une sinécure. Il est bien question de design, d'un design global, clair, cohérent et porteur de sens.
Le gabarit constitue la possibilité de structurer un contenu spécifique, parfois riche et hétérogène. Il nous permet d'agencer, par l'utilisation de sections et de colonnes, les différents éléments d'une page Web dans un format ou une résolution déterminée. Il représente une étape indispensable au plan de la mise en forme.
Le mockup (ou zoning) :
Les différentes zones du site (logo, navigation, sidebar, header, footer...)
Les fonctionnalités attendues (menu déroulant, slideshow, animation...)
Le recensement des éléments (icônes, boutons, images, input...)
L'agencement du contenu (niveaux de titres, citations, accroche...)
Le gabarit peut s'appuyer sur une grille, on obtiendra ainsi un multicolonnage toujours cohérent. Plus la grille sera fine, plus les possibilités qu'elle offre seront nombreuses.
Bien que les 2 termes soient parfois utilisés indifféremment, la maquette peut-être distinguée du gabarit. Il s'agit cette fois de réaliser l'interface complète d'1 site dans Photoshop ou Illustrator, de créer les éléments graphiques et de proposer leur agencement avec les zones de contenu. Au delà de la recherche d'alignements et d'aplombs, de la recherche d'équilibre et de dynamisme, c'est du juste rapport des couleurs et des surfaces dont il s'agit. L'ensemble doit cette fois être poussé dans son détail et ne pas constituer un genre de schéma, si précis soit ce dernier.
Une fois la maquette validée par le client, elle peut être remise au développeur. Les éléments de maquette qui ne peuvent être réalisés grâce au code (boutons, images d'arrière-plan, symboles...) seront optimisés depuis la maquette, puis intégrés dans la page Web elle-même.
On doit se soucier de la "faisabilité" de cette maquette et anticiper les apports dynamiques et les possibilités d'affichage sur différentes plates-formes.
De la maquette on peut déduire la charte graphique, la charte typographique, le nuancier du site et le code couleur, si l'on utilise un code couleur.
Affichage dynamique, remplacement de contenu, événements, images qui s'adaptent a la taille du conteneur, caches-sections...
Animations par clic, animations automatiques, galeries & diaporamas, caroussels
Le design graphique (ou graphisme) est la capacité à créer, adapter et développer des identités visuelles. Le design d'animation est l'art d'étendre cette identité à la production de contenus animés, audiovisuels et interactifs. Les applications du design animé sont de plus en plus présentes dans notre quotidien. L'avenir du design d'animation résidera certainement dans la fusion des médias (télévision, Internet, téléphone mobile...) Extrêmement gourmand en contenus visuels d'habillages.
http://fr.wikipedia.org
Page tests