Mieux comprendre le Webdesign en tant que développeur

Mieux comprendre le Webdesign en tant que développeur

Mieux comprendre le Webdesign en tant que développeur


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.



Le design, c'est quoi



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



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 :

  • Il dispose d'un haut de page (couramment appellé header dans le jargon)
  • D'un contenu (la partie la plus importante du site)
  • D'un bas de page (le footer)
  • Selon les cas, des éléments sur le côté (des asides). Par exemple sur grafikart, il y a une barre de navigation qui s'affiche quand on clique en haut à droite.

Pour pouvoir avoir une conception graphique optimale, je vous recommande donc de suivre les points suivants :

  • Réfléchir aux dimensions du site. Mon site aura-t-il une taille fixe ou variable ?
  • Y aura-t-il des éléments d'interface qui seront affichés que dans certaines conditions ? (je pense notamment à des blocs qui pourraient s'ajouter au site quand on est connecté dessus)
  • Le site aura-t-il des contenus chargés dynamiquement (ajax notamment) ?
  • Le site aura-t-il une grille pour afficher le contenu ? (pour afficher des blocs côtes à côtes par exemple, ou encore gérer le responsive).

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.



L'architecture interactionnelle



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).



Le flat design, ou la tendance du moment



Une tendance sur le web s'est installée (et même sur grafikart !). Elle répond essentiellement à deux problématiques :

  • Le poids des pages web qui doivent être allégées (du fait des grosses différences de débits internet, suivant les gens ou terminaux utilisés)
  • L'interface doit être très facilement manipulable pour répondre à la problématique des grosses différences de taille entre un ordinateur, une tablette, un téléphone et un Nokia 3310.

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.



Le material 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.



Et l'inspiration dans tout ça ?



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 :

  • http://tympanus.net/codrops/ qui a des effets d'UI et d'UX très avancés (parfois trop compliqué d'ailleurs)
  • Les sites web que vous visitez régulièrement. Ne pompez jamais un design, néanmoins si un élément graphique vous intéresse, appuyez sur F12 et regardez de plus près vous même.
  • http://blazrobar.com/ qui a des PSD libres et gratuits. Il y a même quelques templates HTML tout prêt.
  • https://dribbble.com/ peut être mon site préféré. Vous pouvez chercher n'importe quoi. Tapez dans la barre de recherche flat header, dark website ou tout autre chose qui vous passe par la tête.
  • https://www.google.com/fonts ce n'est pas un site d'inspiration, mais vous permettra de trouver des polices sympa. Par exemple si vous êtes une tanche en Photoshop, utiliser un logo textuel (comme dans le footer avec le logo grafikart) fera parfaitement l'affaire. Pour le logo vous pouvez par exemple regarder du côté de la police "Marck Script" ou "Great Vibes" (simple suggestion).

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.




{{titrenews}}

- Ce champ est obligatoire !  - Le nom doit contenir au moins 4 caractéres  
- L'adresse email n'est pas valide !  - Ce champ est obligatoire !  - Cette adresse email est trop court ! 

{{titrecontact}}

Téléphone

{{tel}}

Suivez-nous

Addresse

{{adress}}