Designer un site
1. Établir les bases
Quel genre d’entreprise le site Web va-t-il promouvoir — une pizzeria, une librairie?
Faire des recherches sur les sites Web existants et prendre des notes. Par exemple
- quelles sont les pages du site web (accueil, à propos, contact, liste des produits, etc)
- quel est le style général (layout)
- quelles couleurs sont utilisées
- et toutes les informations qui vous interéssent
30 UX Design Inspiration Resources
2. Définir le layout du site
-
Dessiner un sketch, avec un crayon et du papier, pour définir les zones et composants des pages.
Il s’agit de l’étape de reflexion, on cherche à définir la structure des pages — où se situe le menu, l’entête, les paragraphes, etc.
-
Lorsque vous avez une idée relativement claire de votre layout, réaliser un wireframe (ou zoning).
Il s’agit de mettre votre schéma au propre, pour chaque page du site et chaque appareil supporté (mobile, desktop).
-
Pour remplir les espaces de texte, uitliser le texte lorem ipsum.
C’est un texte générique, sans signification, qui est utilisé lorsque le vrai texte n’est pas disponible.
3. Définir l’ambiance du site
Choisir la police d’écriture et les couleurs a utiliser.
-
Un guide de style est un document de référence avec plusieurs exemples des typographies qui seront utilisées sur le site web ou l’application. En les réunissant au préalable, vous évitez les incohérences dans votre design et obtiendrez un meilleur résultat et une meilleure expérience utilisateur.
-
Une palette de couleurs est quatre ou cinq couleurs intégrées dans le guide de style. Ces couleurs seront appliquées à différents éléments de l’application, tels que les boutons, la couleur du texte ou les arrières-plans. Une palette contient généralement entre 3 et 5 couleurs.
4. Assembler le design
-
Créer une maquette qui respecte le wireframe et l’ambiance que vous avez choisit.
Une maquette graphique est une image, généralement un fichier PSD.
On cherche à visualiser ce à quoi le produit fini va ressembler.
À gauche un wireframe, à droite une maquette:
-
Les designers présentent généralement leurs maquettes sous forme de mockup.
Un mockup est une maquette représentée dans un décor, sur un produit.
Les clients sont généralement plus attirés par les mockup que par les maquettes présentées de but en blanc.
5. Construire le prototype
Un prototype (ou intégration) est une page fictive, écrite en HTML/CSS/JS, qui permet de voir et interragir avec le site — cliquer pour passer d’une page à l’autre, ouvrir des popup, redimensionner la page, etc. Les fonctionnalités ne sont pas encore implémentées — pas de lecture et écriture en base de données.
How to layout and design a website
The Ideal Design Workflow