La création d'un site web se décompose 4 étapes
- La phase de préparation, appelée aussi la phase « d’avant-projet ». Audits, recherches… C’est la face cachée de l’iceberg. Une étape régulièrement ignorée ou méconnue, autant par les concepteurs que par les commanditaires et pourtant tellement importante et indispensable à la réussite d’un projet.
- La phase de conception où nous créons les maquettes
- La phase de développement où nous transformons les maquettes en code fonctionnel
- La phase de production où nous mettons en ligne votre site
La phase de préparation
L’UX design ou « design de l’expérience utilisateur » est la toute première étape dans la création d’un site web. Il s’agit d’un dispositif qui place le futur utilisateur au centre de la réflexion. Il doit permettre de répondre à un souhait du commanditaire, tout en servant l’utilisateur.
Le saviez-vous ? Avant 1940, les grandes industries concevaient des produits sans se soucier des besoins utilisateurs. C’est Toyota, dans les années 40 qui a provoqué le changement : « C’est la machine qui doit être adaptée à l’homme, et non l’homme qui doit l’être à la machine ».
La phase de conception
Une fois le projet cadré, les objectifs définis, il est grand temps de concevoir les maquettes de votre futur site ! C'est ce qu'on nomme la démarche « UI Design » ou « design d'interface utilisateur ». UI design et UX design débattent de sujets communs. L'UI design se focalise sur la conception de l'interface utilisateur et il s'agit donc de la partie visible des travaux réalisés lors de la phase UX.
Cette étape est elle-même composée de deux étapes :
- Wireframing : nous dessinons des maquettes en "fil de fer". À ce stade-là, il n'est pas du tout question de couleurs, d'effets, etc. Les wireframes se concentrent sur le positionnement de chaque élément dans la page, de l'espace qu'il occupe, ou plus simplement de la hiérarchie visuelle.
- Maquettage ou Prototypage : le but ici est de créer des maquettes réalistes, extrêmement proche du rendu qu'aura votre site.
La phase de développement
C'est ici que nous traduisons les maquettes en code fonctionnel à l’aide à différents langages de programmation. Tout ce que vous voyez un sur écran lorsque vous naviguez sur internet est en réalité des milliers et des milliers de lignes de code.
Prenons l'exemple de la page d'accueil Google. Tout le monde la connait et au premier coup d’œil, elle est simple. Amusez-vous à faire un clic droit et cliquez sur "Inspecter" (sous Chrome). Les lignes de codes que vous voyez apparaitre représentent une microscopique portion du code qui s'exécute réellement.
