Comment concevoir un site web en 9 étapes ?

L’agence de design web MOTE, fondée en 2014, se spécialise dans la conception de sites web d’e-commerce raffinés, avec une ingénierie à la pointe et un service premium pour un marché en constante évolution. Rembrant Van der Mijnsbrugge, co-fondateur de MOTE et développeur web, a cultivé un goût pour l’innovation ainsi qu’une attention particulière pour la création de sites pour des marques souhaitant établir des relations durables avec leur public. Dans cet article, il nous partage quelques réflexions tirées de ses 26 années d’expérience.

Concevoir un site web peut être aussi simple que vous le souhaitez : pas besoin d'être un designer ou un développeur web professionnel pour créer un excellent site pour votre marque. Avec un éditeur de site web par glisser-déposer, un thème de site web basique et une compréhension des besoins de votre public cible, vous pouvez créer vous-même un site à la fois beau et intuitif.

Découvrez comment concevoir un site web par vous-même avec des exemples de sites pour vous inspirer.

Comment concevoir un site web ?

1. Brainstorming
2. Choisir une plateforme et un modèle
3. Prendre des décisions de branding
4. Commencer à personnaliser votre modèle
5. Créer une grille de base
6. Ajouter du contenu
7. Établir la cohérence entre les canaux
8. Tester et mesurer
9. Savoir quand faire appel à un professionnel

Les étapes exactes que vous suivrez pour concevoir votre site web dépendront du type de site que vous créez et de la plateforme de création de site web que vous utilisez. Voici quelques lignes directrices qui s'appliquent à presque tous les éditeurs de sites web par glisser-déposer :

1. Brainstorming

La première étape du processus de conception web est de prendre du recul et de réfléchir au message que vous souhaitez transmettre avec votre site et aux actions que vous voulez que les visiteurs entreprennent. Connaître ces objectifs fondamentaux vous aidera à déterminer la meilleure façon de présenter ces informations.

Posez-vous les questions suivantes pour guider votre réflexion :

• Public : À qui ce site web est-il destiné ? Comment allez-vous créer une connexion avec votre public cible ?

• Inspiration : Trouvez des exemples de sites existants que vous aimez. Qu'est-ce qui vous plaît chez eux ?

• Contenu : De quel type de contenu avez-vous besoin pour raconter votre histoire ? De texte ? D’images ? De vidéos ?

• Priorités : Où sur votre site les utilisateurs passeront-ils la majorité de leur temps ? Votre catalogue de produits ? Votre blog ? Votre page d'accueil ?

En répondant à ces questions, réfléchissez à la manière dont vous pouvez fournir aux utilisateurs les informations dont ils ont besoin sur chaque page sans les submerger. Cela peut sembler désuet, mais une des meilleures méthodes pour libérer vos idées est de vous éloigner des écrans et de passer au papier avec un stylo. Réalisez quelques croquis sommaires de l'apparence et du ressenti que vous souhaitez pour votre site, en vous concentrant sur les endroits où vous attendez que les utilisateurs passent le plus de temps.

2. Choisir une plateforme et un modèle

Avec votre croquis sur papier, vous devriez avoir une bonne idée des fonctionnalités dont votre site aura besoin. Cette étape vous aidera à sélectionner plus facilement un éditeur de site web et un modèle de design par glisser-déposer.

Par exemple, si vous souhaitez créer une boutique en ligne, le thème Dawn de Shopify est un excellent point de départ pour les débutants. Shopify est une plateforme tout-en-un, ce qui signifie qu'un abonnement à Shopify donne accès à des noms de domaine, à un hébergement web, à un constructeur de site web, à un traitement des paiements, et à tout ce dont vous pourriez avoir besoin pour vendre en ligne.

Vous avez besoin d'un site pour autre chose que l’e-commerce ? Le système de gestion de contenu WordPress est populaire auprès des blogueurs, et Wix est une option solide pour créer rapidement un portfolio. Comparez les fonctionnalités, les coûts et les thèmes disponibles des différents éditeurs de sites web pour trouver un outil de design de site sans code qui fonctionne pour vous et vos besoins uniques.

3. Prendre des décisions de branding

Si vous avez déjà un guide de marque, vous avez une longueur d’avance. Sinon, vous devrez prendre certaines décisions de branding avant de commencer à personnaliser votre modèle de site web. Que vous créiez un site e-commerce ou un portfolio personnel, maintenir la cohérence de vos polices et couleurs ajoutera de la personnalité et de la légitimité à votre site.

Polices

Commencez par choisir les polices de votre marque. Choisissez une police de corps qui soit lisible. Pour la police de titre, vous pouvez vous permettre d’expérimenter, mais les mots doivent rester lisibles.

Vos choix de polices peuvent transmettre une humeur et une personnalité tout en établissant un cadre pour votre site web. Votre police de corps aidera à déterminer la grille de votre site web : l'espacement des lignes, la largeur des colonnes et les marges horizontales et verticales qui créeront un sens du rythme au sein du site.

Limitez vos sélections de polices pour éviter une expérience de site trop chargée. Si vous débutez, tenez-vous-en à un maximum de deux types de polices qui se complètent : une police pour les titres, une pour le texte de corps.

Palette de couleurs

Une fois votre police choisie, vous pouvez passer à votre palette de couleurs. Pour une lisibilité maximale, une palette de couleurs noir et blanc est souvent la meilleure. Mais il y a encore une opportunité de branding dans cette gamme de nuances : un blanc cassé peut être chaud ou froid, et le charbon peut remplacer le noir pur pour une sensation moins sévère.

Quelles que soient les couleurs que vous choisissez pour votre palette de marque, il est judicieux d'utiliser des couleurs à fort contraste pour une meilleure accessibilité web. Il est utile de se familiariser avec la théorie des couleurs pour avoir une idée plus claire des couleurs qui fonctionnent le mieux ensemble, ainsi que de la manière d'évoquer différentes humeurs avec la psychologie des couleurs.

4. Commencer à personnaliser votre modèle

Le même modèle peut être configuré de manière illimitée. Vous pouvez le rendre complètement différent selon les polices, les couleurs et les autres options que vous sélectionnez. De nombreux éditeurs de sites web, dont Shopify, ont la capacité d'appliquer automatiquement des décisions de branding comme les couleurs, les polices et les logos à l'ensemble de votre site. Si votre éditeur propose cette fonctionnalité, c'est un excellent point de départ pour une personnalisation de site sans code.

5. Créer une grille de base

Les lignes directrices verticales et horizontales qui forment la base de la mise en page d'une page web sont appelées grille de base. Utiliser une mise en page en grille aide à créer une hiérarchie visuelle cohérente et vous donne un aperçu de l'endroit où vous placerez les différents éléments de votre site. Votre grille de base doit correspondre à la hauteur de votre police de corps, c'est pourquoi il est important de choisir vos polices avant de passer à cette étape.

Votre modèle de site web peut avoir une grille par défaut que vous pouvez modifier, si nécessaire. Si vous utilisez un éditeur de site web par glisser-déposer, vous devriez être en mesure de prévisualiser les modifications que vous apportez à votre modèle. En ajustant votre grille, vérifiez comment elle apparaît sur les ordinateurs de bureau par rapport aux appareils mobiles. Si votre site a un design réactif (qui est intégré dans les thèmes Shopify), le nombre de colonnes diminuera automatiquement en fonction de la largeur de l'écran de l'utilisateur. Si la majorité de vos visiteurs proviennent de mobiles, vous voudrez peut-être définir votre aperçu par défaut sur mobile pour simplifier cette étape du processus de conception.

6. Ajouter du contenu

En vous basant sur vos croquis sur papier, ajoutez du contenu à votre modèle de site web.

Le contenu d'un site web doit inclure des éléments tels que :

• Menus de navigation conviviaux
• Hero images comme des photos ou des vidéos
• Texte de site web de marque, dont une page À propos
• Pages de produits (si c'est une entreprise d’e-commerce)
• Informations de contact

Lorsque vous ajoutez du contenu à vos pages web, vous pouvez déterminer la marge supérieure et inférieure, c’est-à-dire la quantité d'espace que vous laissez entre les éléments. En utilisant les mêmes valeurs de marge (ou des multiples de ces chiffres) sur l'ensemble du site, vous créerez un sens du rythme vertical à mesure que les visiteurs naviguent sur votre site.

7. Établir la cohérence entre les canaux

Si votre site web renvoie à d'autres plateformes, comme vos réseaux sociaux, il est important de prendre en compte l'harmonisation entre les canaux.

Par exemple, disons que votre branding Instagram est complètement différent de celui de votre site web. Si quelqu'un trouve votre site via votre compte Instagram, il pourrait avoir une expérience utilisateur déroutante en raison de ces incohérences. Dans ce cas, même si votre site est beau et fonctionnel, votre branding erratique entre les plateformes pourrait éroder la confiance de votre public dans votre marque.

Mais si vous établissez un branding cohérent entre les plateformes, vous créerez une expérience utilisateur (UX) plus homogène où que votre public rencontre votre marque.

8. Tester et mesurer

Chaque fois que vous apportez des modifications à votre site, comme l'ajout d'une vidéo ou d'un plug-in tiers, vérifiez comment ces changements affectent vos indicateurs web essentiels. Les indicateurs web essentiels sont des mesures de la performance de votre site, comme le temps de chargement. Ces indicateurs ne sont pas seulement importants pour l'UX. Ils constituent également une partie clé de l'optimisation pour les moteurs de recherche (SEO), car les moteurs de recherche dépriorisent les sites ayant de mauvais indicateurs web essentiels.

Si vous vérifiez vos indicateurs web essentiels avant et après chaque changement, vous saurez exactement quels éléments du site peuvent causer des problèmes de performance. Ces données vous permettront d'apporter les modifications appropriées en toute confiance.

9. Savoir quand faire appel à un professionnel

Si vous décidez finalement de faire appel à un designer web pour personnaliser davantage votre site, votre expérience initiale de DIY dans le processus de conception web sera précieuse lors de cette collaboration. Votre expérience pratique avec votre modèle de site web vous aidera à exprimer ce qu’il manque et à mieux communiquer avec un professionnel. Cela vous permettra, à tous les deux, de réaliser votre vision plus efficacement.

Exemple de design de site e-commerce : Klur

La société de soins de la peau Klur est un excellent exemple de la manière dont une approche minimaliste peut aboutir à une expérience de site forte. Les choix de design de Klur créent une ambiance sereine, plongeant les visiteurs du site dans l'état d'esprit détendu d'un rituel de soins de luxe.

Klur coordonne son branding à travers ses points de contact. Par exemple, elle utilise des variantes d'une seule typographie pour son packaging de produits et son site web. Si le packaging de produits ne s'applique pas à votre marque, envisagez d'autres moyens de créer une harmonisation entre les canaux, comme l'utilisation de la même police pour votre carte de visite, votre signature d'e-mail et votre site web.

Exemple de design de site éditorial : Unconditional Magazine

Le complément numérique d’Unconditional Magazine à son magazine imprimé évoque une sensation de facilité visuelle tout en engageant le spectateur sur un plan émotionnel. Le menu de navigation clair facilite la recherche de ce que vous cherchez, mais si vous êtes d'humeur à explorer, vous pouvez simplement faire défiler vers le bas pour révéler une sélection d'images reliant aux numéros précédents.

Une grande hero image sur la page d'accueil est un excellent moyen d'immerger immédiatement les visiteurs du site dans votre univers de marque, quel que soit votre secteur ou vos objectifs commerciaux. Changer périodiquement cette image est également un moyen facile de rafraîchir votre site sans modifier l'identité de marque ou la fonctionnalité de base.