3.5 Responsive et mobile first

3.5 Responsive et mobile first

Ressources du cours

Mobile First et interfaces adaptatives, une obligation en matière de webdesign !

Aujourd'hui les utilisateurs naviguent sur des interfaces de tailles diverses et variées pouvant aller de la montre connecté 3,5" à l'écran de 85". Il sera donc important d'adapter vos designs selon les tailles d'écrans pour vous assurer que votre interface reste accessible en termes de contenu et de navigation. 

03:19
crée par
3.5 Responsive et mobile first
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.
icone webflowmade-in-webflow-svg