Poppins
J’ai utilisé du « Poppins » pour son esthétique simple et bien construit.
Le projet
louerunevoiture.eu
Objectifs
- – avoir un avis critique sur différents sites web;
- – se familiariser avec les différentes étapes de la conception d’un site web;
- – créer une maquette papier de notre site web en groupe;
- – s’inspirer de la maquette pour créer mon propre site web sur Figma;
- – prendre en main la conception graphique et le prototypage sur Figma.
Contenu
J'ai voulu concevoir un site simple d'utilisation. Ainsi, la première chose que l'utilisateur voit est une barre d'information qui lui demande le strict nécessaire pour louer une voiture, afin que son expérience soit rapide et agréable.
Pour aller directement droit à l’essentiel, j’ai mis en place des cards de présentation de voitures au centre du design, ce qui permet de mettre en avant l’offre du site sans perdre l’utilisateur dans des explications superflues sur l’entreprise. Je pense que mon site peut proposer une expérience utilisateur satisfaisante.
Typographie
TITRE
POPPINS
CORPS 93
#0F0E0E
SEMIBOLD
POPPINS
CORPS 93
#0F0E0E
SEMIBOLD
SOUS-TITRE
POPPINS
CORPS 33
#0F0E0E
SEMIBOLD
POPPINS
CORPS 33
#0F0E0E
SEMIBOLD
TEXTE
POPPINS
CORPS 20
#0F0E0E
#6C6C6C
#EEEEEE
MEDIUM
POPPINS
CORPS 20
#0F0E0E
#6C6C6C
#EEEEEE
MEDIUM
NAV
POPPINS
CORPS 14
#0F0E0E
#0B63E9
#EEEEEE
REGULAR
POPPINS
CORPS 14
#0F0E0E
#0B63E9
#EEEEEE
REGULAR
Couleurs
TEXTE
#0F0E0E
TEXTE
#EEEEEE
FOND
#FFFAF0
SECONDAIRE
#DDE8F3
CTA & TEXTE
#0B63E9
FAVORIS
#E13715
FOOTER
#1E2022
Avec du recul, le choix d’une couleur secondaire pour les cards n'était pas nécessaire car l’ombre suffit largement à les mettre en évidence. Cette couleur secondaire, ajoutée un peu hasardeusement, alourdit le design. En revoyant le site, je trouve également le fond, qui aurait dû être légèrement jauni, l’est finalement beaucoup trop. Les couleurs constituent donc, selon moi, le principal point faible de ce projet.
Composition
RÉGLE HIERARCHIQUE 1,667
J’ai disposé mes cards en grilles avec mon filtre et ma barre de recherche qui sont disposés parfaitement sur base de cette même grille.
Le breadcrumb que j’ai conçu lors de la location du véhicule est améliorable, notamment dans la partie des options, car j’ai hésité à exploiter l’espace vertical pour placer mes éléments.
Complication
C’était la première fois que j’utilisais Figma, et j’ai rencontré quelques difficultés à me familiariser avec le logiciel. Malgré cela, j’ai réussi à développer mes idées suffisamment pour concevoir un site web cohérent.
Résultat
Visitez la maquette