Les bases du design graphique pour écrans

Bonjour, bonjour!

Pour ce premier post, je vais aborder les bases du design pour écran d’un point de vue de graphiste (rassurez vous donc, pas de langage incompréhensible à base de <> et de <?)

1. La première phase est la conceptualisation du projet. Il faut communiquer avec le client, lire et regarder les documents qu’il nous donne, car on ne créé pas la même interface pour une banque d’envergure internationale que pour le fleuriste du coin. Il ne faut pas hésiter à questionner le client, et à effectuer soit même si il le faut une recherche élargie et une analyse complète pour déterminer la stratégie marketing à mettre en place.

Capture d’écran (2)

L’agence wondersauce a su mettre en place une communication visuelle efficace en mettant en valeur les chaussures du catalogue de la marque greats


 2. Savoir à qui l’on s’adresse. Connaître le public, comprendre son rapport à la marque, dresser un profil sociologique et psychologique peut nous permettre de comprendre comment le public va interagir avec l’interface que nous allons mettre en place. Un site qui s’adresse aux enfants sera plus axé sur l’interactivité tandis qu’un site de e-commerce se devra d’être pratique et ergonomique.

Capture d’écran (3)

Par exemple, le site de coca cola propose des jeux, des vidéos, des films et de nombreux happenings qui permettent de créer un lien plus fort avec ses clients (déjà conquis par la marque).

3. L’organisation. Trouver les informations nécessaires, savoir à qui s’adresser pour les trouver, évaluer la quantité de travail, les modifications possibles, la nécessité ou non de mises à jour, mise en place d’une dead line…. C’est à cette étape qu’il faut savoir garder la tête froide, rester organisé, logique, et SURTOUT rester fidèles aux objectifs fixés lors des deux premières étapes, car votre client risque (et le mot est faible!) de vous demander de nombreuses modifications et de vous faire dériver loin de ce qui a été défini auparavant.


4.Hiérarchisation des informations. C’est un peu comme du print finalement, certaines informations doivent se trouver « en une » du site, être visibles au premier coup d’oeil et être identifiées par les visiteurs comme l’élément important du site. Cette zone est parfois difficile à définir puisqu’elle doit s’adapter aux différents types d’écrans (tablettes, smartphones, ordinateurs…)

Capture d’écran (4)

L’interface du site d’arte présente sur toute la surface de l’écran l’actualité de la chaîne, les informations secondaires se trouvant sous le scroll. Le mécanisme de défilement permet aux visiteurs de faire défiler la page tout en gardant le menu principal en haut de l’écran.

Capture d’écran (5)

 


 5.L’adaptabilité. Le site doit pouvoir s’adapter aux différents navigateurs, aux systèmes d’exploitation et à toutes les tailles d’écran. Gardez espoir, votre web développeur est votre meilleur allié (si si)


6.L’ébauche du graphisme. Dessiner va vous permettre de tester des compositions, de créer une hiérarchie de contenus sans vous focaliser sur les détails.

Capture d’écran (6)

Biosensor UI par Lance Cassidy


 7. L’équilibre. Trouver le juste équilibre entre le texte et les images reste la base de toute communication visuelle. Mais si ce principe est déjà acquis pour la plupart d’entre nous, il va falloir s’adapter aux principes de typographie pour les écrans. Les polices utilisées sont en général simplifiées et le corps moyen est supérieur à celui utilisé pour l’impression.


8. Du contraste! Le contraste vous permettra de hiérarchiser l’information, de créer un premier et un second plan, et de mettre en valeur le texte. Le travail autour du code couleur ne doit pas être négligé, je vous donne quelques sites que j’utilise pour peaufiner mes chartes:

colourlovers.com

paletton.com

hexcolortool.com

colorhexa.com


9. La cohérence. Une fois que la charte graphique a été mise en place, que les couleurs, les images et les typographies ont été choisies, il faut que l’identité visuelle mise en place se retrouve sur chaque interface (site, blog, boutique en ligne, etc..) pour que le visiteur ne soit pas perdu d’une page à l’autre, ni d’un support à l’autre. L’utilisation d’une grille commune et d’un logo présent sur chaque page est nécessaire à établir une image de marque solide.

Capture d’écran (7) Capture d’écran (8)

Capture d’écran (6)

Le site de grapheine présente un style homogène qui permet aux internautes de se repérer facilement dans la navigation.

 


10. Soyez créatifs! Tout a été mis en place, tout est cohérent et tout fonctionne, à vous de trouver des solutions ludiques, créatives et interactives afin de bien servir le contenu du site, les désirs des visiteurs et satisfaire votre client.

Please follow and like us: