Atelier sur le Flat Design

Dans la famille des tutoriels illustrator, je voudrais un peu de Flat Design. La vidéo du jour vous propose un atelier de manipulation sur le logiciel Illustrator vous permettant d’appréhender le logiciel dans l’optique de créer en quelques calques et objets une en-tête de site Web.

Navré pour la coupure nette de cette vidéo, mais comme pour les précédentes, notre partenaire Tuto.com nous propose gratuitement ces extraits afin de vous faire une idée de la formation. Profitez-en, et si celle-ci vous convient vous savez ce qu’il vous reste à faire 😉

Je me permets de complèter par quelques notes si jamais vous avez des difficultés pour comprendre toutes les manipulations faites par l’auteur.

• La création de repères à la volée se fait en cliquant dans la règle, puis en maintenant cliqué et en ramenant le curseur sur l’espace de travail.
• Les calques sous Illustrator sont en fait des sortes de plans sur lesquels vous pouvez placer des objets, des groupes d’objets ou des objets fusionnés. (masqués, transparents, etc.)
• La fonction « Coller sur place » permet de coller les éléments exactement au même endroit duquel ils ont été copier. Illustrator à cette fâcheuse habitude de les coller de manière légèrement décalée autrement.

Également voici quelques conseils, en vrac et en complément :

• Évitez l’utilisation de mots tout en majuscules qui rendent un texte moins lisible.
• Le flat design simplifie énormément l’aspect graphique d’un site web et améliore en théorie la lisibilité de son contenu. Votre charte graphique doit donc miser sur un logo, une typographie et des couleurs uniques et cohérentes.
• Julien galère pas mal à un moment sur la forme de son logo. Pour avoir une droite vraiment droite, il vous suffit de ramener les poignées qui forment la courbe vers le point d’ancrage d’origine. (puis d’effectuer l’alignement des points si nécessaire)
• L’auteur utilise beaucoup de repères qu’il supprime ensuite. Vous pouvez également vous aider des repères dynamiques qui s’affichent intelligemment lorsque vous déplacez ou manipulez un objet, souvent pour : aligner les centres des objets, aligner la baseline du texte dans le cadre d’objets texte, aligner les bords d’objets, aligner avec le centre du document, faire correspondre les hauteurs ou largeurs des objets, etc.
• Dans cette vidéo, Julien ne prend pas vraiment le temps d’expliquer les principes du Flat Design, ce qui est dommage. Petit complément écrit à la suite.

Voir la vidéo (mp4)

Les points clés du Flat Design

En quelques mots, le Flat Design est issu d’une volonté de mettre en avant le contenu en éliminant toute forme de parasite autour de ces éléments. Il se résume souvent en des aplats de couleurs, du texte bien aéré, des blancs tournants et un choix de photographies ou d’images bien précis.

Concernant le texte et les blancs tournants, ce sont selon moi des points essentiels : l’interlignage et les marges vont créer un rythme de lecture qui doit permettre un accès rapide à l’information.
Les sections d’une même page vont donc souvent être séparées soit par un aplat de couleur et des marges internes prononcées, soit par des blancs très prononcés.
Les marges et espacements sont plutôt bien représentés sur le site web WP Media par exemple.