La direction artistique pour le web : une bonne pratique ?

Faites-vous partie de ceux qui pensent que la direction artistique n’est pertinente que pour le print ?

Cet article vous aidera à découvrir à quel point le design artistique et le web sont intimement liés et vous donnera des conseils pour mieux comprendre et appliquer ce concept dans votre travail.

Art direction grids

Avant de continuer, demandez-vous ce que le terme « Direction artistique » représente pour vous.

Essayez maintenant de l’imaginer dans le contexte du web.

Qu’est-ce que la direction artistique ?

Certains disent que la mise en page est importante, mais il suffit que vous choisissiez une mauvaise typographie par accident, comme cela a été le cas avec l’abus de la police Comic Sans, et le message que vous voulez faire passer peut avoir une signification très différente. L’article “Art Directing for the Web for CSS Grid Template Areas” suggère que toute la mise en page, les images, la typographie, etc., ne sont qu’un résultat de la direction artistique mais pas son essence. Alors, qu’est-ce que la direction artistique ?

Selon Andy Clarke, un concepteur numérique bien connu, c’est « l’art d’extraire l’essentiel, le sens précis ou la finalité d’un contenu ». C’est l’intention derrière le design qui nous permettra de bien transférer le message tout en gardant l’aspect artistique. Autrement dit, vous adaptez le contenu pour différentes mises en page sans perdre le sens exact du texte original.

Dans l’adaptation web, vous devez penser aux images sensibles à la taille de l’écran. La taille de l’image et l’orientation sont utilisées via la balise <picture> en HTML. Cependant, la direction artistique ne consiste pas uniquement en des outils permettant de conserver l’aspect artistique. Encore une fois, nous devrions adapter le contenu de sorte à ne pas déformer le message original.

Si vous doutez encore du lien entre la direction artistique et le web, pensez au moment où vous écrivez votre blog sur internet ou dessinez dans votre petit carnet de croquis. Chacune de ces « plates-formes », qu’elle soit destinée au web ou non, raconte des histoires. C’est à ce moment là que la direction artistique montre son utilité. Lorsque vous créez une bande dessinée, votre but est de faire passer le message qui sera sous forme d’histoire. Il en va de même pour votre blog qui raconte des histoires différentes ou bien une bande dessinée adaptée pour le web. Direction artistique et web sont donc très liés !

Il est vrai que la direction artistique peut non seulement vous aider à raconter une histoire, mais aussi vous aider à promouvoir un produit !

Alors, comment représentons-nous la direction artistique sur le Web ?

Quel que soit le type d’appareil utilisé, il est toujours important de raconter votre histoire de la manière la plus appropriée. Dans le cadre de la conception de sites web, vous avez probablement déjà entendu le mot « CSS grid » ou bien « grille CSS ».

Les zones de gabarit de grille font partie de cette grille CSS. Plus spécifiquement, il s’agit de la façon de placer vos éléments dans la mise en page. Vous avez peut-être vu l’utilisation de grilles sur la création de pages à partir de magazines. Dans ce cas-là, le problème provient de la relation entre la mise en page et le contenu.

Oui, lorsque nous concevons pour le web, nous avons tendance à utiliser des templates, sans tenir compte de la relation entre la mise en page et le contenu. Même si le contenu est responsive, il est possible qu’il ne soit pas dans la continuité du « message » global, car il utiliserait une approche différente des zones du modèle de grille.

 

Art direction grids

Si vous trouvez ce sujet intéressant votre travail, jetez un coup d’œil à l’article : “Art Directing For The Web With CSS Grid Template Areas”, dans lequel l’auteur vous guide dans le développement détaillé d’une mise en page en utilisant des colonnes et des lignes dans CSS grid.

J’espère que vous avez apprécié cet article et que les zones de gabarit de grille vous aideront dans vos projets futurs !

 

 

Source :

https://www.smashingmagazine.com/2018/04/art-directing-web-css-grid/#telling-stories-through-art-direction

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

dix-sept − sept =