Chapitre IV - Maquettes UX & UI

Dans ce chapitre nous réalisons ensemble la maquette UX et UI de la page Client-First. On se retrouve dans le designer de Figma pour mettre en application toutes les notions et fonctionnalités qu'on a vu dans les précédents chapitres. C'est parti pour maquetter !

Dans cette vidéo, nous préparons la phase de Wireframe de la page Client-First. L'objectif va être de s'appuyer sur la structure de cette page pour vous apprendre à créer une maquette UX dans Figma.

Dans cette vidéo nous construisons l'UX du Header et de la navbar en s'appuyant sur les composants de la relume library.

Je vous montre plusieurs méthodes pour définir des marges horizontales et verticales dans Figma, afin d'uniformiser votre maquette : padding horizontal, padding vertical et layout grid.

On accélère ! Dans cette vidéo, on termine notre wireframe UX en utilisant la fonctionnalité "Auto Layout" dans Figma. 

Dans cette partie du cours, nous commençons la maquette UI de la page Client-First. Je vais pour cela vous présenter plusieurs méthodes pour réaliser une maquette UI dans Figma.

Lorsque vous réalisez un projet de webdesign, un enjeux va être de faire en sorte que l'ensemble des pages et sections de votre site restent uniformes, en terme de tailles, de couleurs, de marges, etc. 

On commence le design de la page Client-First en construisant la barre de navigation de la page. Utilisation des fonctionnalités d'auto-layout et composants.

Dans cette vidéo nous designons le header de la page Client-First, en partant de zéro et à l'aide de fonctionnalités comme l'auto-layout, les styles, les composants ou encore le z-index.

Pour designer la deuxième section de notre maquette, je vous présente dans cette vidéo une seconde méthode, qui consiste à adapter un UX en UI. Nous repartirons donc de notre wireframe auquel nous viendrons attribuer de nouvelles propriétés de design.

Le temps est précieux ! Tout au long de votre projet de webdesign, vous serez amené à réutiliser certains éléments graphiques, qu'ils soient petits, comme des boutons, des icônes, ou qu'ils soient plus gros comme des sections entières.

Dans cette vidéo nous créons notre premier composant Figma avec variant, pour designer les cartes twitter. Le but est de pouvoir dissocier les deux types de cartes, l'une avec fond et l'autre sans fond, tout en ayant un seul composant "parent" duquel nous pourrons définir toutes les propriétés. 

Dans cette vidéo, nous designons le CTA Relume Library en repartant de l'UX de notre wireframe Figma.

Nous terminons la maquette UI de la page Client-First, en designant le CTA de bas de page et le Footer. Dans cette vidéo nous voyons également comment designer un formulaire web dans Figma.