Design web : par quoi commencer ? Mon retour d’expérience pour gagner en efficacité

Je travaille depuis plus de 20 ans dans le domaine du web design, et les pratiques ont sensiblement évolué, pour ne pas dire complètement changé. Au fil des ans, j’ai pu expérimenter plusieurs bonnes pratiques concernant la réalisation de la partie design d’un site web. Je souhaite vous faire part de mon expérience et de ma façon de procéder sur des projets qui nécessitent une mise en œuvre rapide.

Par quoi commencer ? Je vais réaliser un nouveau design de site web, quels sont les éléments indispensables pour bien démarrer mon nouveau projet ?

Les UI designers expérimentés, habitués à travailler sur des projets bien organisés, me diront qu’il faut un wireframe qui a été soigneusement élaboré par une équipe UX et validé après des séries de tests A/B et retours utilisateurs, qu’il faut un design system et que la charte graphique de l’entreprise doit être respectée. Je suis entièrement d’accord sur ces points. Mais dans la pratique, que se passe-t-il si le client a un petit budget et souhaite une présence en ligne simple, qu’il n’y a pas de charte graphique et presque rien de cohérent en ce qui concerne sa communication ?

Dans ces situations, il est essentiel de revenir aux fondamentaux et de trouver des solutions créatives pour répondre aux besoins du client sans dépasser le budget. Voici comment aborder un tel projet :

Comprendre les besoins réels du client

Il est primordial de commencer par discuter avec le client pour bien comprendre ses objectifs. Quel est le but principal du site web ? Quelle est la cible ? Quels messages clés doivent être communiqués ? Prendre le temps d’échanger avec le client permet d’orienter votre travail et de garantir que le site répondra à ses attentes.

Prioriser le contenu essentiel

Avec un budget limité, il est essentiel d’identifier les pages nécessaires en plus des informations indispensables telles que la page d’accueil, la page de contact et la page de présentation.

La page d’accueil permettra de présenter le client et de mettre en avant ses derniers articles ou produits.

La page de présentation, ou "À propos", fournira plus d’informations sur l’histoire de l’entreprise ou de l’auteur du site, ainsi que sa mission et ses valeurs.

La page de contact donnera les informations de contact, un plan d’accès si nécessaire, les liens vers les réseaux sociaux. Je ne propose plus de formulaire de contact, tout simplement pour des raisons de simplicité et de maintenance. Les formulaires de contact simples sont trop souvent une source de spam que de contacts réels.

Créer une identité visuelle simple et cohérente

KISS, pas le groupe de rock ! Le principe KISS, "Keep it simple and stupid", nous encourage à garder notre design le plus simple possible. Cela présente des avantages en termes de facilité d’utilisation du site, car les complexités inutiles sont écartées.

Couleurs

Sans aller trop loin, il suffit de choisir trois couleurs en lien avec l’entreprise, puis de les décliner en trois variantes (clair, moyen, foncé). Cela nous donne une petite palette de couleurs suffisante pour définir les couleurs de texte et de titres, les liens et d’autres éléments graphiques.

Typographie

Ne cherchez pas des polices extravagantes ; il faut des polices lisibles et qui s’affichent bien sur les écrans. Voici quelques exemples de paires de polices que j’utilise dans mes designs :

1. Montserrat (Titres) & Open Sans (Corps du texte)

• Montserrat : Une police sans-serif moderne avec des formes géométriques, parfaite pour les titres accrocheurs.
• Open Sans : Une sans-serif neutre et très lisible, idéale pour le corps du texte.

2. Playfair Display (Titres) & Lato (Corps du texte)

• Playfair Display : Une police avec empattements (serif) élégante et sophistiquée, idéale pour donner du caractère aux titres.
• Lato : Une sans-serif propre et polyvalente, excellente pour le corps du texte.

3. Roboto (Titres) & Roboto Slab (Corps du texte)

• Roboto : Une police sans-serif moderne et neutre, adaptée pour les titres.
• Roboto Slab : Une variante avec empattements de Roboto, parfaite pour le corps du texte.

Assurer une expérience utilisateur optimale

L’un des éléments les plus importants d’un site web est l’accessibilité au contenu. Si notre visiteur ne sait pas où cliquer, il va se perdre et quitter notre site.

J’ai déjà fait l’expérience, et peut-être vous aussi, en visitant un site saturé de publicités ou désordonné : si je ne trouve pas mon information rapidement, je quitte le site, retourne sur Google et passe au suivant.

Ce serait dommage : on a fait des efforts pour se faire référencer et créer du contenu de qualité, et par manque de clarté, notre visiteur nous quitte.

Navigation claire

La navigation doit être facilement accessible et compréhensible. Il en va de même pour les liens et les boutons : ils doivent être identifiés rapidement. Utiliser la même couleur pour les éléments interactifs aide les visiteurs à trouver instinctivement où cliquer. À l’inverse, les titres ne doivent pas être de la même couleur que les liens. Si un utilisateur a repéré que le rouge est la couleur des boutons et qu’un titre est en rouge, il sera influencé et aura envie de cliquer.

Responsive design

Le responsive design permet de rendre les sites web accessibles sur toutes les tailles d’écrans, du mobile au écrans plus grands. Il est indispensable, mais en général je n’utilise qu’un break point afin de me simplifier la tâche. Une version mobile et tablette, et une version deskop suffit largement à couvrir l’ensemble des écrans. Et c’est d’autant plus vrai dans une approche de site web simple.

Vitesse de chargement

La vitesse de chargement est très importante, les pages qui seront plus rapidement affichés sont un avantage surtout les utilisateurs sur mobile ont un réseau moins rapide. C’est égalament un critère important pour le référencement, car un site rapide sera mieux référencé. Donc l’avantage d’un design simple c’est qu’il sera également plus léger en terme de technique, moins de code html, js et css lui permettra de s’afficher plus vite

Accessibilité

Pensez également à l’accessibilité de votre site. En terme de design pensez à avoir un contraste suffisant dans vos éléments graphiques, entre le texte et l’arrière plan. En terme de développement il faudra penser à intégrer votre contenu dans les bonnes balises html, comme par exemple <header>, <nav>, <main>, <article>, <section>, et <footer>. Il faut penser à ajouter des légendes et des descriptions dans les balises alt des éléments graphiques.

La simplicité et la clarté sont souvent les meilleurs alliés d'un bon design

En résumé, lorsqu'on travaille sur des projets avec un budget limité, il est essentiel de revenir aux bases du design web. Comprendre les besoins réels du client, prioriser le contenu essentiel, créer une identité visuelle simple et cohérente, et assurer une expérience utilisateur optimale sont des étapes clés pour réussir. En appliquant le principe KISS et en se concentrant sur l’essentiel, vous pouvez fournir un site web efficace qui répond aux attentes du client tout en respectant les contraintes budgétaires. N'oubliez pas que la simplicité et la clarté sont souvent les meilleurs alliés d'un bon design.