Résumé de la conférence : comment faire un bon un design ?

Notez que ces astuces peuvent être facilement transcrites à n’importe quel CMS.

Cette conférence a été réalisée par Thomas Villain – AnyBoDesign.

Voir les slides de la conférence

Afin de réaliser un bon design, il faut différencier le fond de la forme et bien connaître son sujet : de quoi on parle, à qui on s’adresse ?

Ce qu’il ne faut pas faire

  1. L’équipe créa conçoit les maquettes
  2. On envoie les maquettes au client pour validation
  3. On donne la maquette à intégrer aux intégrateurs et développeurs

La meilleure solution

1 – On réunit tout le monde pour réaliser des maquettes fonctionnelles.

On peut utiliser Balsamik Mockup pour les créer.

1 page = 1 fonction. Ce qui permet d’épurer les pages.

 

2 – Création graphique : logo, typo.

On crée une bibliothèque avec les styles de titre, les boutons, les formulaires, les pictos et les codes couleurs.

Il faut garder à l’esprit qu’il ne sert a rien de se répéter : DRY (Don’t Repeat Yourself)

 

3 – Webdesign

On ne maquette pas toutes les pages du site. Seule la charte (header, footer), une page intérieure et la page d’accueil.

Afin d’être plus efficace, utilisez des grilles de positionnement (GridLayout, Bootstrap, …). Les grilles peuvent aussi être utilisées pour l’intégration afin de gagner du temps.

Pour ne pas que les intégrateurs ou développeurs ne vous tapent dessus, rangez vos calques !!

Ne faites pas de design fermé. Les utilisateurs mettront plus ou moins de texte que celui présent sur les maquettes et peut casser votre design.

Ergonomie

  • Limiter le nombre de clics pour avoir une information
  • Limiter les informations présentes dans les sliders et carrousels (4-5 max)
  • Limiter également les informations présentes dans les lightbox afin d’éviter les scrollbar
  • Utiliser les effets de hover avec parcimonie car ils ne sont pas visibles sur tablette et mobile

Responsive design

Penser au responsive dès le début : Mobil First. Par exemple, il faut penser aux grandes images de présentations que l’on met en haut des pages, cela passe très bien sur un ordinateur mais beaucoup moins bien sur tablette et mobile.

Attention à la réalisation des maquettes sur des écrans 24″ ! L’écran moyen est de 1300px.

Lors de l’intégration il faut faire attention à l’accessibilité et aux performances.

 

Conférence de Thomas Villain. Voir ses slides.