Lorsqu’on est Webdesigner ou directeur artistique, certaines choses hérissent le poil. Déformation professionnelle sans doute. Lorsqu’on fait des campagnes de pub, des affiches ou des flyers depuis quelques années, on repère vite certaines erreurs grossières. Et bon sang, ce que tu peux en faire des erreurs qui me fâche. Je ne vais pas t’embêter avec de grandes phrases philosophiques aujourd’hui. Je vais plutôt te donner des astuces de forme pour embellir tes travaux. En d’autres termes : Comment passer d’un travail amateur à un travail professionnel en quelques coups de pinceaux.

Tu ne respectes pas tes marges. C’est un énorme défaut facilement corrigible.

Inutile de t’intéresser aux dernières tendances web design 2020 de « JeSaisPasQuoi » si tu ne respectes pas tes marges. Le respect des marges est une notion fondamentale. Elle fait intervenir un aspect que j’adore : l’harmonie. Il y a quelque chose de magique avec l’équilibre visuel. Les éléments de ton interface doivent être calibrés, margés, placés avec la précision d’une horloge suisse. Ainsi, l’oeil de ton utilisateur ne sera pas perturbé (un rien le fait se barrer de ton site en une seconde).

Lorsque je travaille sur une interface, il n’est pas rare que je perde une bonne demi-heure à placer mes blocs de texte et mes images. Il y a quelques chose de reposant dans cet exercice (Surtout accompagné d’une petite playlist indie folk ;)).

 

capture-decran-2016-09-27-a-11-11-24

Je pique ceci au site graphiste.com. J’espère qu’il ne m’en voudra pas.

 

Tes blocs de textes ou visuels doivent être alignés AU PIXEL. J’ai pas envie d’être chiant hein, mais tu t’étonnerais de voir l’impact de deux ou trois pixels de décalage sur la qualité d’un travail. On passe de « Waw, c’est propre » à « Mouais, c’est pas mal ». Ces blocs doivent également (dans la plupart des cas) être pourvus de marges égales sur chaque côté.

Voir le travail de Alessandro Zanoni

 

Un effet « premium » à vos interfaces

Une fois que les marges sont respectées, on peut s’amuser à donner une petite touche pro à son interface. Regarde l’exemple d’un webdesigner qui, intentionnellement, augmente la taille de ses marges de façon outrancière.

Voir le travail de  la boutique Sense6

 

N’utilise pas du Times New Roman dans tes corps de texte.

« Les polices à empattement sont interdites dans un corps de texte d’un site web ».

Et bien c’est faux. Je t’invite à les utiliser : Mais pas de Times new Roman. Sinon je me fâche tout rouge.

Première raison : Le Times New Roman est la police affichée par défaut sur les navigateurs lorsqu’aucune typographie n’est assignée dans le CSS. En d’autres termes, cela donne une impression d’inachevé dans tes travaux. Tu peux trouver mieux qu’une police qui s’affiche quand le chargement du fichier css plante, nan ?

Deuxième raison : Le Times est une police super lorsqu’on l’utilise sur support papier, pas sur le web. C’est chiant mais c’est comme ça.

Si tu aimes le Times d’amour (ça peut arriver), utilise là seulement dans les titres. Et arrange toi pour que ce titre soit affiché en grand. Je suis sûr qu’une tendance du Times dans les interfaces traine dans un recoin d’internet ;). 

J’ai personnellement essayé de l’utiliser dans mes compositions. En vain.
Alors comment on fait pour afficher une police à empattement VINDIEU ?

Prenons l’exemple du meilleur site pour la rédaction d’article. Un des sites les plus utilisés pour les écrivains du web : Medium. Medium utilise sa propre police d’écriture à empattement avec Georgia en deuxième position et Cambria en troisième.

Du coup, je peux prendre quoi comme typo ?

Si tu ne sais pas quelle police prendre, essaye ces combinaisons ! https://www.reliablepsd.com/ultimate-google-font-pairings/ . Elles sont gratuites (google font) et bien sympa. Note aussi que certains exemples sont dotés de typographies serif dans le corps de texte. Alors ne te gêne pas ;).

Si tu te sens l’âme d’un designer pro, va découvrir des typographies ici : http://www.webdesignertrends.com/tag/typographie/ il y en a pour tous les goûts. Je te conseille sérieusement de faire des projets avec les typographies de webdesignertrends : Elles sont originales et d’excellente qualité !

 

Tout ça pour dire :

Le travail du webdesigner est un travail exigeant et minutieux. Le beau et l’équilibre sont essentiels dans tes compositions. Même avec très peu d’éléments, tu peux faire une excellente impression !!! La plus grande erreur que tu peux faire est de délaisser tes interfaces au profit du code. Ces deux disciplines doivent fonctionner ensemble impérativement.

Je te souhaite de passer une excellente semaine.
Porte-toi bien, on se voit lundi 😉