Petits détails, gros impacts


Brand Content

Des petits détails tel que l’alignement général, le contraste et les couleurs, les effets de transitions peuvent changer complètement la conception d’un projet.

Porter attention à ces petits détails est une habitude primordiale à prendre pour un rendu propre et fluide. Nous le savons bien, la tendance est au minimalisme.

 

LA NAVIGATION : FULLSCREEN MENU (MENU PLEIN ECRAN)

La navigation est le premier passage obligé, un point de repère pour l’internaute, c’est pourquoi il est impératif qu’elle soit aussi intuitive qu’ergonomique.

Prenons en exemple, les full screens, ces menus qui prennent tout l’écran : le gros avantage des menus full screen est de laisser une grande place au reste du contenu du site, sans se soucier du nombre de rubriques ou de sous-rubriques que l’on va devoir placer dans le menu.

Les menus sidebar permettent également un gain de place considérable, bien qu’ils ne soient pas encore très utilisés sur les sites desktop.

Le mobile first est à la base de ces nouveaux style de navigation.

Le “navicon “ ou encore l’icône “burger”, comme on l’appelle parfois, est devenu une référence pour accéder au menu. Un détail qui a son importance.

En effet, une navigation aisée et fluide permet d’éviter un taux de rebond trop important.

 

Voici une petite sélection de sites avec des menus plein écran et des sidebars :

01 Petits détails, gros impacts

https://ekwip.me/

02 Petits détails, gros impactshttps://southpawagency.com/

03 Petits détails, gros impacts

https://hlkagency.com/

 

Le site de Nexus est un bon exemple, avec menu sous forme de sidebar :

04 Petits détails, gros impacts

https://www.google.fr/nexus/

 

Un petit dernier, qui mérite toute notre attention dans l’animation du menu :

05 Petits détails, gros impacts

 

https://stadiumtechcenter.com/lifestyle

 

COULEUR ET TYPOGRAPHIE

Le choix des couleurs et des typos est essentiel. Pour que le site garde sa clarté, il est préférable de ne pas abuser d’au moins 2 voir 3 couleurs prédominantes et d’un nombre limité de polices et de caractères. L’idéal ? Une à deux (incluant évidement une webfont).

Certains éléments du site attireront toujours d’avantage l’attention que d’autres en raison d’une image, d’une couleur ou d’un texte. Ce que nous appelons le contraste.

Il est possible de créer un contraste de plusieurs manières :par exemple en utilisant différentes tailles de polices, grandes et petites ou grasses (bold) et normales.

 

Quelques exemples :

06 Petits détails, gros impactshttps://www.razvangarofeanu.com/#the-what

 

07 Petits détails, gros impactshttps://primeissimple.com/
08 Petits détails, gros impactshttps://labcase.org/

L’ALIGNEMENT : LA BASE

Une des premières clés pour un design épuré est l’alignement vertical et horizontal.

Un bon alignement horizontal permet de traduire une hiérarchie respectée pour une conception cohérente.

L’alignement vertical est tout aussi important.

Gardez des largeurs d’éléments cohérentes et accordez une attention aux espaces vides entre eux. Les gouttières (l’espacement entre les éléments) doivent être les mêmes d’un élément à l’autre.

Les gouttières nécessitent des largeurs uniformes et les photos de différentes formes seront parfaitement alignées.

Remercions les grilles responsive , ainsi que notre meilleur ami sur Photoshop : GuideGuide (https://guideguide.me/ ) !

En fait, la grille web se rapproche de la grille typographique utilisée dans le domaine du print, elle permet de construire un site en respectant l’équilibre et la mise en place des éléments textes, images, boutons et autres médias.

 

Les sites :

09 Petits détails, gros impactshttps://chilli.be/en

10 Petits détails, gros impactshttps://www.rodgerstownsend.com

11 Petits détails, gros impactshttps://www.francescobertelli.com/

 

En conclusion, nous vous invitons à ne pas négliger les détails, à respecter les alignements, les contrastes, la typo, les effets, les couleurs, …

La subtilité prime dans toutes les créations graphiques, elle permet d’accéder à l’effet souhaité et surtout de tenir dans le temps. Les petits détails permettent d’aller à l’essentiel.

La plupart des sites qui réussissent à faire passer le message souhaité, le font en grande partie grâce à la limpidité et à la précision de certains détails.

Laisser un commentaire