« Les interfaces élégantes sont celles qui ont le plus d’impact, avec le moins d’éléments » explique Allan Grinshtein (de LayerVault). Le blanc, qu’il fallait à tout prix combler auparavant, permet aujourd’hui de conserver l’attention de ses lecteurs. Il faut oxygéner sa page, supprimer tous chichis et faire en sorte que l’internaute reste plus longtemps sur son site tout en naviguant facilement. Encore à l’honneur cette année, voyons comment optimiser votre site et vos apps en flat design.
« Less is more »
A contrario des années passées où les designers appliquaient à profusion le style « Web2.0 glossy », la tendance web aujourd’hui se rapproche de plus en plus au design print. Sans fioritures, son design va droit au but ! Inspiré des courants architecturaux et artistiques des années 1920, le Flat Design découle du style Bauhaus (l’institut allemand des plus rationnels). Leurs créations misaient sur le minimalisme et le géométrisme, tout comme ce design web.
Au revoir animations flashs, design surchargé et textes lourds, le Flat Design exclue tous détails superflus de la création. C’est un style minimaliste, extrêmement clair et épuré. Il se caractérise par des aplats de couleurs sobres et dont l’organisation de la typographie créée la structure du contenu.
Priorité au contenu et à la hiérarchisation des informations
Le flat design mise sur les textes courts, des formes extrêmement simples, de belles images, des aplats de couleurs, des contrastes forts pour la lisibilité, des typographies en majuscule et un contenu en « grille ».
Créé à la base sur une grille, le design responsive permet de repositionner les éléments suivant le support sur lequel il est lu. Les aplats de couleurs sont la base de la structure avec la typographie, le choix des couleurs sera déterminant pour le rendu final du design. Une typographie efficace vous obligera à bien penser et organiser votre contenu pour que ce soit lui qui créé la structure et non des blocs graphique.
Ce design apporte aussi quelques contraintes techniques, le design responsive ne laisse que très peu de place au graphique superflu. On privilège donc des contenus visuels (photos en plein écran, icônes, formes, effets graphiques) qui peuvent alourdir le poids de votre présence. Adaptez donc vos hébergements et vos infrastructures, les internautes apprécient de naviguer dans des environnements rapides et fluides.
Fonctionnant en termes de visuel, le flat design peut également nuire au référencement naturel, basé entre autres sur le décryptage des corpus de textes. Cependant sa capacité minimaliste favorise le chargement de la page : vous accédez rapidement au contenu recherché.
La simplicité pour tous ?
S’il permet d’aller droit au but, le flat design risque de lasser. Il faut adapter chaque design à chaque problématique. Ne pas faire du Flat Design car c’est à la mode en 2014, mais réfléchir à une stratégie design à 2 ou 3 ans, et ceci pour tous vos devices. Votre marque s’inscrit dans un cadre global articulée autour d’une charte graphique harmonisée sur tous vos supports. Si vous envisagez de passer au flat design, repensez entièrement votre charte graphique pour l’adapter en mode ‘flat’ avant d’uniformiser vos présences sur web, mobiles et objets connectés.
L’arrivée massive du Flat permet aux webdesigner de réfléchir à l’accessibilité web, à l’expérience utilisateur et à l’ergonomie sur tous les supports (ordinateur, tablette, smartphone). Le flat design ne vit pas sur une seule plateforme, mais sur toutes celles où vous êtes présents.
De plus, opter pour le flat design signifie également privilégier le contenu visuel, pensez-vous donc à budgétiser l’achat de photos, polices, icônes …
Exemples
Le flat design a été largement démocratisé, notamment dans des grandes entreprises comme Microsoft (uniformisation graphique de tous ses produits), mais aussi Google avec sa nouvelle charte graphique en 2013. Voici de quoi vous inspirer si vous souhaiter revoir entièrement le design de vos présences web.
1. Microsoft
2. Skype
3. So World Wide
4. Worpress thème Contempo
5. Appli mobile Talenco
