• Passer à la navigation principale
  • Passer au contenu principal
  • Passer au pied de page
Lotin Corp.

Lotin Corp.

Agence de branding. Tout est dans le sens du détail.

  • Services
    • Stratégie
    • Logo & identité visuelle
    • Web & Digital
    • Développement commercial
  • Portfolio
  • Blog
    • Branding
    • Business Systems
    • Persuasion et vente
    • Marketing Digital
    • Design pour founders
    • Méthode hypercréative
    • UX Design
    • Chronique
  • Livres
    • E-books
    • Livres sur Amazon.fr
    • Guides
  • L’agence
  • Contacts
  • PRENEZ RENDEZ-VOUS
Vous êtes ici : Accueil / Design web / Etape 5 : Design d’interface web en détail

Etape 5 : Design d’interface web en détail

4 septembre 2021 par Henri Lotin Laisser un commentaire

5 minutes

etapes-creation-site-web-05

Cet article fait partie d’une série : Étapes de création d’un site web

« Les étapes de création d’un site web – Etape 4 : design visuel & design d’interface

» Les étapes de création d’un site web – Etape 6 : Prototypage et intégration HTML5/CSS

Dans le dernier article, j’ai promis de revenir en détail sur le processus de design de l’interface du site web Design & Lifestyle Magazine.

Retourner au sommaire

À TOUS CEUX QUI VEULENT UN BEAU SITE WEB

Vous est-il déjà arrivé de tomber sur le template du site web de vos rêves ? Et qu’après de longues heures de personnalisation vous vous retrouviez avec quelque chose de moche ?

Téléchargez le chapitre gratuit

Tous les e-books gratuits

Après notre phase de recherche UX (design d’interaction), nous devions procéder aux esquisses (ou croquis) de nos pages. Mais avant de se lancer dans les dessins de nos pages, des notions fondamentales en composition sont nécessaires.

Notions en composition

Faire du design nécessite une certaine connaissance des principes de composition graphique, et même typographique.

La composition consiste à regrouper toutes vos idées et tous vos éléments de design ; composer votre design. Cela fait de la composition l’un des aspects vraiment difficiles du design.

Créer une bonne composition renforcera l’expérience des utilisateurs lors de la navigation sur votre site et contribuera à façonner un meilleur design. Nous visons l’alignement, la cohérence et l’unité forte. La composition nous aide également à ajouter une pertinence visuelle à nos mises en pages afin que nous puissions aider nos utilisateurs à mieux comprendre leur parcours sur un site web, où ils devraient se diriger ensuite.

La composition est sans doute la partie la plus importante de votre processus de design – point final.

Nous vous invitons à parcourir cette série : Design School for Developers, en français sur le blog de Lotin Corp. Academy.

Avec les idées claire et la confiance qui va avec, on peut donc, sans hésiter se lancer dans la réalisation de nos esquisses.

L’importance du croquis en design web

Le croquis est un joyau important et souvent négligé du processus de design de l’interface utilisateur (même pour les non-designers). Commencer vos designs hors ligne et avec un crayon et du papier peut aider les équipes à mieux visualiser le potentiel du projet tôt dans le processus.

À ce stade, il est souvent difficile d’exprimer ce que votre esprit évoque… et la bonne nouvelle est qu’il n’est pas nécessaire d’être un artiste pour faire sortir une idée sur papier. Tout ce dont vous avez besoin est une idée et un degré de confort avec le concept.

Le travail peut être très schématique ou très détaillé :

Croquis simple
Croquis détaillé

Notre exemple :

Croquis pour la page d’accueil du site web Design & Lifestyle

Pour en savoir plus sur les esquisses en design web :

  • The Importance of Sketching in Web Design par Carrie Cousins
  • Planning Your Web Design with Sketches par Steven White
  • Le croquis et votre flux de production de design par Rachel Shillcock

Les systèmes de proportion : la grille

Il y a tout un tas de systèmes de proportion. Mais les deux principaux dont nous nous servons le plus souvent en design web sont le nombre d’or et les grilles.

Il n’y a pas de bon principe de conception d’un temple sans proportion, autrement dit sans relation précise entre ses éléments constitutifs, comme il y en a dans le cas d’un homme bien proportionné.

– Vitruve (80-70 av. J.-C.), architecte, ingénieur et écrivain romain

Nous nous arrêterons sur la grille dans notre exemple.

Les grilles vous permettent de construire une structure et une forme solides dans vos conceptions. Tout comme nous avons examiné les hiérarchies typographiques et le rythme, nous pouvons effectuer les mêmes sentiments en utilisant une structure en grille. Comme pour le codage, il existe des méthodes recommandées pour organiser les modules et les sections de code, et un système de grille peut également aider lors de la conception pour le web.

Mais les grilles existent bien avant le web, et ce en architecture et dans l’édition papier :

Système de grille développé pour le magazine Bilama

Pour mieux gérer votre grille de ligne de base en ligne, un outil comme Gutenberg est fort utile.

A MEANINGFUL WEB TYPOGRAPHY STARTER KIT

Pour en savoir plus sur les grilles et les systèmes de proportion :

  • Géométrie sacrée, principes et applications par Henri Lotin
  • Tout sur les systèmes de grille par Rachell Shillcock

Une fois pris connaissance de ce concept d’aide à la création, nous pouvons évoluer vers la création de notre wireframe.

Le wireframing

Sur la base de notre croquis, nous nous dirigeons vers notre application préférée de wireframing et/ou de prototypage pour créer notre wireframe.

Référez-vous à la fin de l’article précédent pour déterminer lequel des outils cités vous conviendrait le mieux.

Ici pas besoin forcément de définir la police définitive de votre design, ni les couleurs, car comme nous allons le découvrir, pour mieux apprécier la hiérarchie et l’efficacité de notre design, nous le conserverons en niveau de gris.

Notre exemple :

Wireframe pour la page d’accueil du site web Design & Lifestyle

Nous y sommes presque.

La maquette graphique de l’interface

La dernière phase de cette étape consiste à donner corps : images, couleurs et typographie à notre création.

Avant tout, des directives visuelles seraient un plus pour formaliser et standardiser notre interface.

Notre exemple :

Directives de styles pour le site web Design & Lifestyle

Une fois définies les directives, nous pouvons avancer.

Notre exemple :

Maquette graphique pour la page d’accueil du site web Design & Lifestyle

J’aurais souhaité faire une vidéo sur le design de cette interface sous Photoshop, Figma ou Adobe XD, mais j’ai hésité. Si une vidéo vous intéresserait, n’hésitez pas à m’en dire un mot en commentaires.

Page d’accueil du site web Design & Lifestyle – Photoshop

Pour aller plus loin

En dehors de la série Design School for Developers, d’autres ressources [Anglais], gratuites et payantes sont disponibles en ligne.

  • Composez des interfaces utilisateurs en Material Design
  • UI/UX case study: a step-by-step guide to the process of designing a pet diet app
  • Learn UI Design – The Video Course

Cette excellente vidéo de The Future sur le Design d’expérience utilisateur (UX) résume parfaitement tout ce que nous avons pu faire jusqu’ici, depuis la première étape.

Vous pouvez aussi pensez à vous inscrire à notre formation sur le design web [Français]

Merci de votre attention durant cette série sur les étapes de création d’un site web, nous revenons avec un article bonus pour vous expliquer comment fonctionne l’intégration d’une maquette graphique en maquette fonctionnelle HTML, après avoir examiné le processus de fonctionnement des prototypes haute-fidélité.

Retourner au sommaire

Catégorie(s) : Design web, UI Design Tags : création de site web, design d'interface utilisateur, Design UI, design visuel, étapes de création de site web, UX design

À propos Henri Lotin

Brand Strategist & UX/UI Designer autodidacte vivant à Douala, au Cameroun, je suis le directeur de création, le responsable de la stratégie et du marketing digital, mais également le co-fondateur de Lotin Corp. (c'est beaucoup, je sais !?)

Je suis depuis Octobre 2014, le fondateur de Lotin Corp. Academy, où j’enseigne le marketing digital, l’introduction à la communication visuelle, le design web et interactif et les logiciels de PAO.

Souscrivez à notre newsletter

Pour ne rien rater de nos offres, quand nous aurons l’occasion de vous en faire profiter. Et nos articles, une fois par semaine dans votre boîte aux lettres.

Cliquez ici pour vous inscrire

Interactions du lecteur

Laisser un commentaire Annuler la réponse.

Footer

#BrandingAdvocacy

Les frameworks de création de stratégie de marque

Les modèles et les frameworks de création de stratégie de marque semblent être aimés ou détestés par les stratèges ; … [Lire la suite...] à proposLes frameworks de création de stratégie de marque

Plus d'articles de cette catégorie

Catégories

  • 15 Minutes avec
  • Branding
  • Business Systems
  • Chronique
  • Clients
  • Design graphique
  • Design pour founders
  • Design web
  • Etudes de cas
  • Freelance
  • Guides
  • Illustrations
  • Livres
  • Marketing Digital
  • Méthode hypercréative du design
  • Nouvelles
  • Persuasion et vente en business
  • Profession
  • Stratégie
  • Traductions
  • UI Design
  • UX Design
  • Vidéo
  • WordPress

Nos articles récents

  • Les frameworks de création de stratégie de marque
  • Le guide ultime pour créer une stratégie de marque
  • Stratégie de branding : corporative, familiale et produit
  • Un message d’espoir d’un chef d’entreprise à un autre
  • [Livre] Branded Interactions

Adresse et contacts

403, Rue Drouot, Akwa
BP 4468 Douala
contact[at]lotincorp.biz
 +237 673 07 94 08
Lundi à Samedi : 09h00 à 19h00

Copyright © 2008–2023. Lotin Corp.· All Rights Reserved.