1.4 Page design system

1.4 Page design system

Ressources du cours

Dans cette vidéo nous préparons la page design system du projet Figma, qui regroupe plusieurs zones :

  1. Style Guide : regroupe toutes les règles de styles du projets (typographies, couleurs, effets, etc.)
  2. Composants & Symbols
  3. Visual Library : comprends tous les visuels PNG, SVG et Open Graph de votre projet.

Vous retrouverez sur cette page de nombreux éléments graphiques et règles de design liés à ce projet, tels que l'iconographie, les couleurs, les typographies, les CTA selon leurs statuts, etc.

Outils

Apprendre à créer un design sytem : 0.0 Design System
06:49
crée par
1.4 Page design system
Thomas
logo-cup-of-cofee
Buy me a coffee ?
interface figma sur fond violet avec logo digidop académie et titre du chapitre

Chapitre I - Figma 360°

Thomas
30 min
17 vidéos

Figma est un outil de webdesign conçu pour créer et designer des maquettes web.  L'outil propose de nombreuses fonctionnalités permettant de gérer des éléments vectoriels, matriciels, de créer des wireframe, des maquettes UI, des prototypes web, etc. 

Dans ce chapitre nous faisons un tour à 360° des utilisations de Figma et de son interface :

  1. Immersion dans le dashboard principal
  2. Exemples d'utilisation de Figma
  3. Découverte de Figma Community
  4. Présentation des fonctionnalités du designer

Bon cours !

Voir

Chapitre II - Préparer son fichier de design

Thomas
30 min
12 vidéos

Avant de lancer tout projet de webdesign, il est important de préparer son fichier Figma. Dans chapitre nous préparons ensemble, chacune des pages qui vous seront indispensables pour la suite du projet.

Voir
oeil noir et blanc ,avec des curseurs qui adaptent des vecteurs sur fond violet et titre du chapitre III du cours sur Figma

Chapitre III - Principes du webdesign

Thomas
52 min
21 vidéos

Il existe de nombreuses règles en matière de webdesign qui sont importantes à connaitre. Dans ce chapitre nous explorons les principales tendances, habitudes consommateurs, idées reçus, et principes en matière de webdesign. Notre analyse se porte sur les aspects UX, UI et également sur l'enjeux d'accessibilité web. Nous finirons par une analyse de la page Client-First sur ces différents points. 

Voir
plusieurs formes vectorielles jaunes, violette, bleues, avec des curseurs et stylos et le titre du chapitre sur fond violet avec logo digidop académie

Chapitre IV - Maquettes UX & UI

Thomas
1 h 36 min
14 vidéos

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 !

Voir
plusieurs formes vectorielles jaunes, violette, bleues, avec des curseurs et flèche et le titre du chapitre sur fond violet avec logo digidop académie

Chapitre V - Prototypage

Thomas
17 min
4 vidéos

Donnez vie à votre maquette avec la fonctionnalité de prototypage Figma. Dans ce chapitre, je vous apprends à créer vos premières animations dans Figma, et rendre l'interaction et la navigation possible entre les pages. Créez votre prototype web avant de lancer le développement.

Voir
plusieurs formes vectorielles jaunes, violette, bleues, logo figma, logo webflow et le titre du chapitre sur fond violet avec logo digidop académie

Chapitre VI - Design System

Thomas
15 min
5 vidéos

Dans ce chapitre nous faisons un tour du projet pour préparer la migration de notre maquette Figma vers Webflow. Nous complétons et optimisons le design system de notre fichier, en nous assurant que chaque élément est à jour pour le développement web. 

Voir
plusieurs formes vectorielles jaunes, violette, bleues, logo figma, logo webflow et le titre du chapitre sur fond violet avec logo digidop académie

Chapitre VII - Collaborer sur Figma

Thomas
3 vidéos

Figma est un outil de webdesign collaboratif ! Dans ce chapitre je vous montre plusieurs astuces et fonctionnalités pour collaborer en direct ou en asynchrone sur Figma. Partagez votre projet, présenter une maquette, faites des feedbacks et collaborez en direct sur Figma. 

Voir
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
webflow-badge-icon-svg
made-in-webflow-svg