Suite de notre dossier sur le design graphique pour écrans. Au menu du jour les principes 5, 6, 7 et 8 : pli, adaptabilité, esquisse et la dualité images/police.

Et pour consulter les 4 premiers principes, c’est ici : www.generation-image.fr/les-douze-fondamentaux-du-design-graphique-pour-ecrans-13

Principe #5 : le pli

Dans les médias imprimés, on a coutume d’utiliser l’expression « au-dessus du pli », en référence à la partie d’un journal demeurant visible lorsque celui-ci est plié et sur laquelle se trouve le reportage, le titre ou la photo de « une ».

Les concepteurs du Web ont adapté ce terme à leurs propres besoins, car les navigateurs web possèdent une démarcation similaire au bas de l’écran. On utilise également l’expression « au-dessus du scroll (défilement) », mais le sens reste le même : les visiteurs d’un site considèrent les éléments situés dans cette zone immédiatement visible comme étant les plus importants. Cette question est souvent sujette à débats, surtout que l’on trouve aujourd’hui des écrans de toutes les tailles (smartphones, tablettes, portables, ordinateurs de bureau, téléviseurs de tailles diverses, etc.).

Les internautes visitant le site de cette brasserie rencontrent cette page composée au format portrait, ce qui les oblige à procéder à un défilement vertical vers le bas pour lire l’intégralité du graphique présentant les informations de brassage.

Principe #6 : adaptabilité

L’un des aspects les plus difficiles de la conception de sites web concerne la capacité d’adaptation. Non seulement, il existe différents navigateurs web, mais les systèmes d’exploitation eux-mêmes ainsi que les tailles d’écran varient. Bien entendu, rien de tout cela ne prend en compte les besoins et les goûts des usagers ; un défi d’adaptabilité maximale que les designers se doivent de relever.

 Le portfolio en ligne de Jairo Goldflus (conçu par Belmer Negrillo) utilise un format paysage dans le but de garder visible l’ensemble du contenu du site, quelle que soit la taille de l’écran utilisé. La composition assure également qu’aucun contenu ne soit masqué sous le pli.

Principe #7 : esquissez !

Quel que soit le type de projet, la majorité des designers formalisent d’abord leurs compositions à l’aide de petits croquis avant d’entrer dans le vif du sujet avec l’outil informatique.

Pour ce faire, l’esquisse rapide sur papier demeure la voie la plus efficace, car le dessin permet de placer, modifier et corriger rapidement les différents éléments d’une composition et donne au designer une vision synthétique de son projet, tandis qu’un logiciel l’incite souvent à se focaliser directement sur des détails, tels que les polices, les couleurs, les textures.

Une fois la structure déterminée, le travail de conception graphique pourra commencer – avec des logiciels comme Fireworks ou Illustrator – pour préciser le style, les fontes, la grille, etc.

Bien qu’il travaille dans le secteur de la communication numérique en créant des sites Internet pour des grands comptes, le designer Jason Santa Maria débute toujours un projet par quelques ébauches dans son carnet de croquis favori.

Principe #8 : une question d’images et de polices

S’il y a deux composantes qui interviennent dans la plupart des communications visuelles, ce sont bien la typographie et l’iconographie (autrement dit : les polices et les images). Il arrive fréquemment que l’une soit largement privilégiée par rapport à l’autre, mais, dans la plupart des cas, ces deux ingrédients cohabitent pour créer des compositions graphiques équilibrées. Les nouveaux venus dans la conception Web qui garderont ce principe à l’esprit sont en bonne voie pour devenir de bons designers numériques. Par contre, ceux qui sont habitués au design imprimé ont souvent du mal à appréhender le fonctionnement de la typographie sur le Web – en particulier lorsqu’il s’agit de sa taille.

En effet, ceux-ci sont généralement habitués à calibrer le corps de texte autour de 8 ou 9 points (allant parfois jusqu’à 12 points), les sous-titres et les titres s’affichant en 14 points ou plus. Sur le Web, par contre, les gros pavés de texte seront composés entre 14 et 16 points, tandis que les titres et les sous-titres monteront jusqu’à 26 points, voire plus. Bien que ces règles ne soient pas gravées dans la pierre, il est important de se rappeler que, pour le Web, le corps moyen des polices est supérieur à celui utilisé pour les supports imprimés.

Sur son site web A Working Library, Mandy Brown a choisi d’afficher l’ensemble des textes dans des corps de caractères assez grands afin d’en faciliter la lecture. Par ailleurs, de subtils détails – tels les lettrines et les indentations de paragraphes – introduisent sur ce support dématérialisé des conventions typographiques propres aux ouvrages papier, ce qui tend à rendre l’expérience du visiteur plus captivante.

Extrait de Design graphique pour écrans
Ordinateurs, tablettes, smartphones
Adaptateur : Jason Tselentis
Collection: Hors collection, Dunod
2013 – 256 pages
Voir la fiche détaillée du livre