Ah le design. On a parfois vraiment du mal à trouver de l'inspiration ou des effets d'interface un peu sympa. Surtout quand on est développeur. À l'heure d'aujourd'hui, on parle beaucoup du flat design, comprenez par là des designs minimalistes. Avant de nous lancer dans la recherche de l'inspiration (non ne prenez pas de drogues pour ça), on parlera d'abord de ce que l'on attend dans la recherche graphique d'un site, ensuite du flat design (qui est la tendance en ce moment) puis de comment trouver des idées.
On va d'abord commencer par une définition universelle. Quelque chose qui ne vous apprendra pas grand-chose de prime abord, mais qui aura le mérite de resituer les choses :
Le web design désigne la conception de l'interface web : l’architecture interactionnelle, l’organisation des pages, l’arborescence et la navigation dans le site web. Il s’agit d’une phase essentielle dans la conception d’un site.
Merci Wikipédia. On ne va pas vous faire l'affront de vous apprendre ce qu'est l'arborescence et la navigation dans un site. Je suppose que vous savez que votre site doit être un minimum ergonomique, j'entends par là pratique à utiliser. On va revenir sur deux points importants de la définition :
La conception de l'interface web est la notion qui est sûrement la plus compréhensible pour vous. Elle désigne simplement l'aspect visuel du site : la recherche de la palette de couleurs du site, le logo, l'agencement des blocs, etc ...
Il n'y a pas vraiment de règle précise pour la conception de l'interface web. Heureusement d'ailleurs, sinon tous les sites se ressembleraient. L'agencement du site dépend essentiellement de deux paramètres : du site lui-même ainsi que de la créativité du designer. Je vais considérer comme vous êtes comme moi, à savoir des développeurs à l'esprit beaucoup trop cartésien pour pouvoir créer quelque chose vous même (c'est-à-dire aucune imagination).
Découpons un petit peu les éléments d'un site :
Pour pouvoir avoir une conception graphique optimale, je vous recommande donc de suivre les points suivants :
Une fois que vous avez réfléchi à tout ça, vous pouvez passer à l'étape suivante. Une fois que vous avez l'agencement que vous jugez optimal pour votre site, vous allez devoir passer à la recherche de l'inspiration pour vous demandera quoi ça va ressembler (on y arrive dans quelques instants). Pour cette étape d'agencement général, je vous recommande de faire des wireframe, c'est-à-dire un schéma qui va représenter votre site, mais de manière non visuelle. Le meilleur site selon moi : wireframe.cc
Ces étapes d'agencement sont ce que l'on appelle faire l'UI du site, à savoir l'interface utilisateur.
C'est une expression bien compliquée je trouve pour quelque chose de simple : comment va réagir votre site vis-à-vis du comportement client ? Ce terme englobe toutes les composantes entrant dans le ressenti d’un utilisateur dans son utilisation d’un produit. Il dépasse donc les questions d’utilité et d’utilisabilité en ajoutant l’aspect désirabilité. Cette étape nécessite souvent une bonne dose de JavaScript.
Pour vous prendre un exemple à portée de main : quand vous affichez la barre latérale sur le site de grafikart, celle-ci s'affiche avec un effet "d'élasticité". Cela donne une impression de vitesse (je ne suis pas bon en physique, mais si je me souviens pas on appelle ça l'inertie ? :D ) au bloc. En bref ça ne sert pas à grand-chose d'un point de vue utilité, mais d'un point de vue utilisateur ça donne envie de rester sur le site.
Cette étape est appelée UX, ou user expérience pour expérience utilisateur. Pour le coup, on n’a pas vraiment de trucs tout faits pour nous aider. Globalement, il faut arriver à se poser les bonnes questions. Par exemple, si je passe ma souris sur un bouton d'envoi de formulaire, celui-ci va-t-il s'animer ? Celui-ci sera-t-il cliquable si le formulaire n'a pas en format correct (par exemple si le pseudo de l'utilisateur qui s'inscrit est trop court, on ne peut envoyer le formulaire).
Une tendance sur le web s'est installée (et même sur grafikart !). Elle répond essentiellement à deux problématiques :
Du coup, on s'est dit que pour répondre à ça, l'idée c'était vraiment de simplifier les designs. "Think different" comme dirait un illustre inconnu. Du coup on a simplifié. On a rendu les choses flat et le flat design est né. Le design plat ou flat design est un style de design d'interface graphique caractérisé par son minimalisme. Il se base sur l'emploi de formes simples, d'aplats de couleurs vives et de jeux de typographie. [encore Wikipédia].
Je ne dis pas que le flat design doit être utilisé à tort et à travers, qu'on ne doit pas utiliser une image parce que ça fait pas assez flat. Mais il faut avouer que vu que c'est minimaliste, bah c'est juste plus simple à faire :D (vu que c'est minimal).
Maintenant combinons UI, UX et flat design.
J'ai voulu vous parler un peu du material design, car je trouve que c'est une approche relativement intéressante du design. Cette approche a été pensée au départ par Google pour son système d'exploitation Android, puis dans un souci d'uniformisation, adapté à une grande partie de ses services web. Je ne vais pas en parler très longtemps, mais sachez que c'est une approche qui a été pensée pour combiner flat design et UX bien pensée. Vous avez des tonnes de frameworks et d'outils pour vous lancer là-dedans, comme materialize.
Vous pouvez vous pencher sur le sujet si vous avez vraiment du souci avec l'expérience utilisateur. Vous en tirerez des leçons et ça vous aidera à construire vous même vous effets quand vous aurez plus l'habitude.
Ok récapitulons. Tu dis que si on galère avec le design, il suffit de faire du flat et de bien penser l'expérience utilisateur ?
Je pense que c'est en effet par là qu'il faut démarrer. Faire les choses simplement et proprement. Dites-vous qu'un beau site est tout simplement un site simple et agréable à utiliser, tant que vous restez sobre et qu'il n'y a pas de texte rouge en gras clignotant sur votre site ça devrait aller (les vrais devs' se souviendront de la balise <blink> !)
Maintenant que vous avez pensé un minimum votre site, va falloir savoir à quoi il va ressembler. Et la de l'inspiration on en trouve partout :
Bon l'idée c'est de donner des pistes de recherche, pas de faire un annuaire de recherche. Pour le reste Google est votre ami :)
Au fait je le dis et je le répète : ne recopiez jamais un design qui vous plaît. Cela aura comme conséquence, dans le meilleur des cas, de discréditer votre site. Et au pire des cas à avoir des répercussions négatives sur le site qui vous aura servi "d'inspiration". Très subjectivement, je pense que la créativité dans ce domaine et à notre niveau c'est l'art d'associer des choses que l'ont a déjà vues et que nous avons aimées.
Et je vous recommande également de faire un tour sur le site suivant, qui fait réfléchir sur certains pièges du webdesign : doisjeutiliser.fr
Voilà, on pourrait bien sûr parler de beaucoup d'autres choses comme les performances web, le SEO, l'accessibilité (norme aria par exemple), qui rentrent dans le cadre du WebDesign, mais je pense que vous avez déjà assez à faire ici.