Tendance web : parlez-vous le FLAT DESIGN ?

Apparue il y a quelques mois, une nouvelle tendance inonde le monde du webdesign et vous n’allez pas pouvoir y échapper ! Partons à la découverte du FLAT DESIGN, pas si plat que ça !

La tendance FLAT DESIGN

Démocratisé par les géants Microsoft, avec l’arrivée de la nouvelle interface graphique Windows 8, mais aussi par Apple, le flat design est le style où il vous faudra oublier les effets d’ombre portée, de reliefs, de 3D et même les effets miroir donnés à vos images.

flat-design-skypePas de biseautage ni de faux relief glossy à vos boutons, le flat design veut du plat (comme son nom l’indique), du minimaliste (le peu peut le plus), de l’épuré mais surtout et avant tout de beaux aplats de couleurs avec une touche de contraste pour une meilleure lisibilité à l’écran. Nous voilà revenus en 1915 au Carré Blanc sur Fond Noir du peintre Malévitch (c’était la minute culture).

Le flat design est très utilisé pour créer des sites vitrine, des blogs et même du e-commerce mais aussi pour les applications smartphone ou desktop.

Sans le savoir, vous avez dû déjà visiter des sites qui suivent la tendance. Pour ne citer qu’eux, vous avez par exemple Skype, Microsoft, MySpace

Le FLAT DESIGN en 3 principes

1/ Des couleurs audacieuses

couleurs-flatDes couleurs vives, originales et contrastées mais malgré tout harmonieuses. Pour ne pas vous tromper dans le choix des couleurs, un site très utile répertorie les couleurs de la tendance Flat Design : http://flatuicolors.com/

Un échantillon de couleurs dont vous pouvez récupérer le code hexadécimal ou RVB pour ensuite les appliquer à votre site dans un arrière-plan ou sur des boutons et même un élément « couleur ».

2/ Bonjour les majuscules

capitalesTitres de pages ou de paragraphes, slogans, messages commerciaux, vous allez devoir recourir à la MAJUSCULE pour écrire vos textes clés. Les polices de caractère devront elles aussi être épurées et simples pour ne pas perdre en lisibilité. Vous trouverez les dernières polices tendances sur le site Google Web Fonts et en plus c’est gratuit !

Enfin, pour plus de contraste, beaucoup de webdesigners ont recours au texte blanc sur les fonds de couleur. Le texte ressort mieux et est plus facilement lisible même sur les petits écrans de smartphones.

3/ Un site large

Fini les sites aux designs étroits et avec des bords trop marqués. Voyez grand et large ! On aère le contenu, on évite de coller les éléments trop près les uns des autres et surtout on épure. N’ayez pas peur du vide ou de la page blanche ! C’est même CARRÉMENT CONSEILLÉ !

Un site FLAT DESIGN dans WebAcappella

themeCette tendance graphique peut être facilement réalisée avec WebAcappella. D’ailleurs, la team WebAcappella vous propose aujourd’hui un petit exercice : reproduire notre modèle de page d’accueil Flat Design.

Les sites utiles :

Les étapes de création :

Commencez par ouvrir votre logiciel WebAcappella et créez un nouvel espace web.

Dans la fenêtre d’exploration des « Maquettes », créez une maquette que vous nommerez « Accueil » avec les paramètres suivants : 

  • 1000 pixels de large
  • Hauteur : comme vous voulez
  • Couleur de fond : blanc
  • Plan de publication centré.

Maintenant, pour pouvoir faire du flat design, nous allons créer une image JPEG que nous appliquerons à la maquette « Accueil » avec une répétition horizontale uniquement. Pour réaliser cette image, utilisez un logiciel comme Pixlr Editor ou Photoshop.

Cette image d’arrière-plan sera composée comme suit :

  • Image en JPEG et RVB 72 DPI
  • Largeur : 1000 pixels
  • Hauteur : 515 pixels

Dans cet arrière-plan, nous voulons 4 parties :

  • Un bandeau 1000 px de large par 30 pixels de haut, de couleur rouge « alizarin » (référence flatuicolors : #e74c3c) dans lequel nous insérerons nos coordonnées de contact et des icônes de réseaux sociaux Facebook et Twitter.
  • Un rectangle 1000 x 95 de haut de couleur « clouds » (référence flatuicolors : #ecf0f1) dans lequel il y aura le logo et le menu de navigation.
  • Une zone de couleur blanche pour mettre un diaporama de 1000 x 300 pixels.
  • Un bandeau 1000 x 90 pixels de haut en gris « asbestos » (référence flatuicolors : #7f8c8d) pour mettre un slogan.

Si vous utilisez le logiciel Pixlr Editor : utilisez l’outil forme « rectangle » pour créer les différentes zones de couleur. Pour vérifier la taille de vos rectangles, aidez-vous de l’explorateur « Navigateur » disponible à droite de votre écran. Créez un premier rectangle qui prendra toute la largeur et dont le point de référence Y sera à 30. Faites ensuite un autre rectangle avec le Y à 125 puis un autre rectangle dont le Y sera à 425 et ainsi de suite.

Dès que vous avez réalisé cette image, enregistrez-la en JPEG et importez-la comme arrière-plan dans votre maquette en allant dans « Propriétés de la Page ». Vous pouvez maintenant construire votre page en insérant des éléments « texte », « boutons », « album photo » et « image » comme sur l’exemple.

Et voilà, le tour est joué. Vous avez une page d’accueil dont vous pouvez reprendre la maquette « flat design » pour créer les autres pages de votre site. Original, tendance et coloré ! Et si vous manquez d’inspiration, vous pouvez toujours puiser des idées sur des sites de vente de templates. Mais comme toujours, INSPIRATION pas COPIE !

La team WebAcappella vous dit à bientôt pour un nouvel article.