10 conseils pour démarrer un projet de web design

La mise en route d’un projet de web design peut susciter une certaine appréhension. Il existe quantité de variables et les clients, en général, placent la barre très haut au plan qualitatif. L’identification des objectifs, la définition du périmètre, l’élaboration d’une arborescence de site et d’une maquette, la création de contenu, le design d’interface et le test du site sont autant d’aspects que recouvre le processus de conception web.

En d’autres termes, les risques d’échec sont multiples. Il importe donc de se préparer en disposant d’une stratégie solide.

« Ne sous-estimez pas la bataille de la création : munissez-vous des outils adéquats. »

Intéressons-nous donc à 10 précieux conseils en matière de design web lorsque vous créez un site web pour votre client. Ces recommandations sont valables pour tous types de sites web spécialisés dans le e-commerce grand public : sites e-commerce, sites web de petites entreprises, vitrines de produits, etc.

1. Cernez précisément les attentes

Un projet de web design ne pourra être couronné de succès que si cette notion de « succès » a été réellement définie.

Selon le degré d’expérience du client en matière d’exploitation d’un site web, il risque de ne pas être en mesure d’exprimer clairement ses véritables besoins.

Cela risque d’avoir des conséquences, comme par exemple un client prenant conscience, au beau milieu d’un projet, de son erreur : « Ce n’est absolument pas ce que je voulais ! »

C’est la raison pour laquelle il importe de cerner les attentes du client dès le premier entretien avec lui. Voici cinq questions à lui poser :

1. Quel est l’intérêt de ce site web pour vous et pour votre entreprise ?
2. Quels résultats voulez-vous obtenir avec ce site web ?
3. Comment entendez-vous mesurer le succès de ce site web ?
4. Ce site web a-t-il vocation à représenter une part essentielle de votre activité, ou bien servira-t-il à fournir des informations sur l’entreprise ? Devra-t-il être considéré comme une extension de marque (microsite) ou un projet annexe ?
5. Quel est le public ciblé ? Qui fréquentera ce site web ?

À partir du moment où vous avez recueilli les réponses à ces questions, préparez un document pertinent et à la présentation attractive, qui incitera le client à adhérer à la solution que vous lui proposez. Joignez ce document au contrat. À ce stade, vous avez limité les potentielles déconvenues ultérieures.

1. Définissez l’objectif

Ce point est en corrélation directe avec le précédent. Tout simplement, un site web dépourvu d’objectif clairement défini n’a aucune chance de faire mouche.

L’objectif est une notion que votre client et vous devez définir ensemble. Il doit être clairement défini, mesurable et réalisable. Voici un bon exemple d’objectif pour un site web :

Un objectif valable pour un site web doit être :

• Clairement défini. « il doit générer des ventes. »
• Mesurable. « il doit générer au minimum X ventes par mois. »
• Réalisable. « il doit générer un milliard de ventes par mois. »

Et surtout, un site web ne doit poursuivre qu’un seul objectif principal.

1. Pensez public avant tout et répondez à un problème précis

En optant pour un site web, votre client veut atteindre un objectif. Le site web résout un problème pour son public.

« Faites savoir au public ce qui l’attend. »

Prenons l’exemple du Dollar Shave Club :

Le principal objectif de ce site marchand consiste à proposer chaque mois au grand public de nouvelles lames et des accessoires de rasage inédits. L’adhésion au Dollar Shave Club résout la problématique de l’achat de ces articles, en centralisant leur acquisition. Le message et l’objectif (vente immédiate) de ce site web sont explicites. Afin de convertir les visiteurs en clients, les designers ont créé une expérience utilisateur et un système de navigation exclusivement ciblés sur les questions que se posent les acheteurs potentiels.

2. Donnez la priorité au contenu

Rien ne peut remplacer un contenu bien présenté. Le contenu est roi. Ne le négligez jamais car c’est lui qui déclenchera des interactions et éventuellement des actions de la part du client.

En tant que designer web, il ne faut pas privilégier l’esthétique au détriment de l’utilité. Autrement dit, pour reprendre les termes de John Maeda, à « mettre du design partout ».

Recentrez-vous toujours, pour commencer, sur le contenu que votre client veut diffuser sur son site web. Réfléchissez ensuite à la façon dont le design peut contribuer à améliorer la visibilité de ce contenu, et à éveiller davantage de résonances chez le public.

Par exemple, si vous créez un site e-commerce, demandez-vous comment vous pourriez mettre en valeur les produits plutôt que de les fondre dans le reste du design En voici un exemple signé Tessemae’s :

Comme vous pouvez le constater, ce sont les produits qui sont les plus visibles sur la page, contrairement à l’en-tête, au menu ou aux autres éléments.

3. Respectez les standards web

Il faut respecter les standards pour une raison essentielle : votre public s’y est habitué. N’obligez pas les utilisateurs à se former à un nouveau langage créatif pour pouvoir naviguer sur votre site web. Facilitez-leur la tâche en mettant en œuvre des standards web qu’ils maîtrisent déjà.

Par exemple, tous les sites e-commerce positionnent le panier d’achat dans l’angle supérieur droit. Non pas par souci d’esthétique, mais parce que le public s’attend à le trouver à cet endroit.

Prenons l’exemple de Wrightwood Furniture:

Adoptez également d’autres standards web, tels que ceux-ci :

• Logo en haut à gauche (selon une étude de Nielsen Norman, les utilisateurs ont 89 % plus de chances de se souvenir d’un logo lorsqu’il est positionné à cet endroit).
• Identité visuelle homogène sur l’ensemble du site web (les pages doivent suivre des schémas de conception identiques — ce qui est rarement le cas des sites e-commerce).
• Contact en haut à droite ou au centre (comme dans la capture d’écran précédente, par exemple).
• Bandeau de navigation en haut de la page, sur toute sa largeur et sans menus clairement identifiables
• Valeur ajoutée et call-to-action en partie haute de la page d’accueil (un call-to-action hautement visible permet d’optimiser les conversions).
• Fonction de recherche dans l’en-tête.
• Zone réservée aux inscriptions dans le pied de page.

1. Simplifiez la navigation

Pour remplir son objectif, les utilisateurs doivent pouvoir naviguer aisément d’un point A à un point B.

Par conséquent, la conception du système de navigation se doit d’être minimaliste et ne faire appel qu’aux informations indispensables pour amener en un clin d’œil l’utilisateur du point A au point B.

Commencez par récapituler les étapes les plus importantes ponctuant le parcours des utilisateurs sur le site web. Assurez-vous que votre système de navigation les aide sur ce parcours au lieu de leur compliquer la tâche. Réfléchissez à la manière dont vous pouvez leur venir en aide pour accomplir les choses qu’ils veulent faire, sans leur imposer votre vision. Faire appel aux bonnes pratiques de navigation sur sites web et maîtriser les principes de base de la navigation mobile est l’assurance d’une expérience utilisateur optimisée.

Voici un exemple parfait, signé Ugmonk.com. Vous noterez la dimension minimaliste de la navigation, qui donne accès à quelques options principales uniquement. Parallèlement, l’internaute sait très exactement sur quelle page il se trouve :

2. Mettez l’accent sur la mobilité

La mobilité est dans l’air du temps — que ce soit pour surfer sur le web, visionner des contenus multimédias, interagir sur les réseaux sociaux ou faire des achats. À l’heure actuelle, les utilisateurs accèdent plus souvent à Internet sur mobile que depuis un poste de travail.

Pour cette raison, vous devez impérativement vous assurer que la conception de votre site web est optimisée pour mobile, autrement dit que votre site est responsive. Cela signifie que toutes les fonctionnalités — panier d’achat compris — doivent fonctionner de manière fluide afin d’offrir une expérience utilisateur d’exception.

Voici deux exemples de sites web bénéficiant d’une excellente optimisation mobile en termes de mise en page et d’accessibilité :

Aperçu du site web Greats.com sur mobile

Aperçu du site web Rebel8 sur mobile

3. Ne négligez pas la typographie

Au-delà de l’aspect visuel d’un projet, il faut également se concentrer sur la typographie et ne pas se contenter d’ajouter quelques polices de caractères pour « fignoler » le design.

Actuellement, nombre de projets de web design de qualité accordent un rôle important à la typographie, pour en faire, non pas simplement un élément de design, mais un outil créatif à part entière. Autre aspect intéressant d’une typographie bien étudiée — et ceci est en rapport avec le point précédent : elle est exploitable sur tous les devices.

Voici un exemple signé Bittermilk. La version poste de travail :

Et la version mobile :

Comme vous pouvez le remarquer, le choix des polices de caractères, des coloris, des espacements, etc., joue un rôle dans l’aspect général de la page toute entière, et fonctionne aussi bien sur poste de travail que sur mobile.

4. Livrez en plusieurs fois

La création en solitaire n’est jamais une bonne idée. En créant le projet de votre côté et sans échanges réguliers avec le client, vous n’obtiendrez pas un résultat satisfaisant.

Divisez plutôt votre projet en deux ou trois grandes parties, en fonction de sa complexité, et livrez ces dernières suivant un calendrier fixé à l’avance. À chaque fois, recueillez les commentaires du client et rectifiez la suite du projet en conséquence.

5. Adhérez aux réseaux sociaux

À l’instar des smartphones, les médias sociaux sont omniprésents dans le paysage web actuel.

Le public est adepte des réseaux sociaux, et passe sans aucun doute davantage de temps sur Facebook que sur un site web. Tournez donc cette situation à votre avantage.

D’après les statistiques, deux milliards d’individus environ utiliseraient Facebook chaque mois. Raison pour laquelle vous devez impérativement prévoir une intégration avec les réseaux sociaux sur le site web de votre client. Vous inciterez ainsi les internautes à partager son contenu ou ses produits, et donc attirer d’autres utilisateurs sur le site web.

Voici un exemple signé The Colossal Shop (observez les pictogrammes des réseaux sociaux sous le prix de l’article) :

The Colossal Shop propose donc des optimisations qui permettront aux visiteurs de promouvoir ses produits.

Quelles sont les prochaines étapes ?

Ces dix conseils pourront vous aider à accélérer le démarrage de votre prochain projet de web design. Pensez à éviter les erreurs courantes, et n’oubliez jamais que les compétences des graphistes sont naturellement adaptées au design web et à l’expérience utilisateur.

Faites le plein de conseils si vous voulez devenir designer indépendant, ou proposer des prestations complémentaires. D’autres conseils vous attendent sur le blog Adobe XD.