Conception Web complète de Figma à Webflow (nouvelle interface utilisateur)
Vako Shvili, Web Designer
Regardez ce cours et des milliers d'autres
Regardez ce cours et des milliers d'autres
Leçons de ce cours
-
-
1.
Aperçu du cours
6:30
-
2.
Qu'est-ce que Webflow ?
6:54
-
3.
Teaser de Webflow
4:38
-
4.
PARTIE 1 : LES SECRETS D’UN BON DESIGN
2:31
-
5.
Pour commencer avec Figma
11:34
-
6.
Le layout est roi
6:49
-
7.
Rejoignez notre groupe étudiant sur Discord
0:10
-
8.
Affectation : Alignement et grille
11:10
-
9.
Mise en page : importance de la hiérarchie visuelle
7:20
-
10.
Affectation : Hiérarchie visuelle
9:20
-
11.
Mise en page : Méfiez-vous des illusions d'optique
3:51
-
12.
Disposition : Proximité
1:42
-
13.
Comment utiliser la typographie de façon magnifique
1:37
-
14.
Typographie : les caractères ont une personnalité
1:51
-
15.
Typographie : Catégories de polices
6:14
-
16.
Mission : Personnalité typographique
8:08
-
17.
Typographie : Définir le type
8:30
-
18.
Affectation : Définir le type de mission
7:27
-
19.
Typographie : Deux polices seulement
2:47
-
20.
Typographie : où trouver des polices
3:57
-
21.
Affectation : Couplage de polices
7:21
-
22.
L'art de la couleur
1:11
-
23.
Couleurs : couleurs d'échantillonnage
1:56
-
24.
Mission : Échantillonnage des couleurs
18:42
-
25.
Couleurs : Couleurs réglables avec précision
3:58
-
26.
Mission : Ajuster Avec Précision Les Couleurs
2:56
-
27.
Couleurs : Chasse aux couleurs
2:45
-
28.
Couleurs : Couleurs de marque
2:20
-
29.
Comment utiliser des photos pour créer des sites Web attrayants
0:23
-
30.
Photos : Superpositions d'images
1:58
-
31.
Affectation : Superpositions d'images
5:18
-
32.
Photos : Techniques Culturales - Extreme Crop
4:28
-
33.
Photos : Techniques de culture - Culture douce
4:43
-
34.
Mission : Recadrage de photos
9:09
-
35.
Photos : Règle des tiers
4:38
-
36.
Photos : Déboxez-les !
4:47
-
37.
Photos : choisissez vos photos comme un pro
6:13
-
38.
Photos : où trouver des photos
3:27
-
39.
Mission : Trouver des photos
4:54
-
40.
6 astuces de design que chaque designer devrait connaître
0:24
-
41.
Astuce de conception : contraste
3:52
-
42.
Astuce de design : espace blanc
5:07
-
43.
Astuce de conception : la répétition
3:56
-
44.
Astuce de conception : cohérence
7:55
-
45.
Astuce de conception : chevauchement
3:43
-
46.
Affectation : chevauchement
1:00
-
47.
Astuce de conception : Tension
2:32
-
48.
Affectation : Tension
5:18
-
49.
PARTIE 2 : PRATIQUER LE DESIGN COMME UN PRO
0:18
-
50.
La méthode mimique
4:57
-
51.
Le plus grand secret des designers – Inspiration
5:52
-
52.
Mission : Mood Board
7:12
-
53.
Mission : Conception de la page d'accueil de Figma
8:29
-
54.
Conception de la page d'accueil d'une application de chat : Partie 1
9:16
-
55.
Conception de la page d'accueil d'une application de chat : Partie 2
18:20
-
56.
Conception de la page d'accueil d'une application de chat : Partie 3
15:40
-
57.
Conception de la page d'accueil d'une application de chat : Partie 4
21:33
-
58.
PARTIE 3 : DÉVELOPPEMENT WEB (WEBFLOW)
0:24
-
59.
Notions de base du Web : Concepteur de flux Web
2:52
-
60.
Les bases du Web : HTML et CSS
3:38
-
61.
Les bases du Web : le modèle Box
2:15
-
62.
Webflow : Hiérarchie des éléments
4:30
-
63.
Flux Web : section, conteneur, bloc divisé
3:53
-
64.
Webflow : Paramètres de taille
13:48
-
65.
Flux Web : rembourrage et marges
13:46
-
66.
Webflow : Typographie Web
8:15
-
67.
Webflow : Boutons et liens
5:47
-
68.
Webflow : Classes CSS
6:22
-
69.
Webflow vs Figma Sizes
9:34
-
70.
Webflow : Images
6:33
-
71.
Webflow : flotter et afficher
9:13
-
72.
Webflow : Flexbox
12:56
-
73.
Webflow : Liste de contrôle pour déboguer
23:55
-
74.
Webflow : Navbar (application de chat)
10:35
-
75.
Flux Web : Survoler le curseur
8:24
-
76.
Webflow : Section centrale (application de chat)
4:25
-
77.
Webflow : balises HTML
11:01
-
78.
Webflow : Cours combinés
8:55
-
79.
Webflow : section CTA (application de chat)
14:48
-
80.
Webflow : Pied de page (application de chat)
13:28
-
81.
Introduction au Responsive Web Design
6:38
-
82.
Responsive : Section Héros - Tablette
3:57
-
83.
Réactif : Section Héros - Mobile 1
5:16
-
84.
Réponsive : Section Héros – Mobile 2
3:03
-
85.
Réactif : Menu de navigation (application de chat)
10:12
-
86.
Réactif : Débordement
7:17
-
87.
Réactif : Section CTA (application de chat)
5:12
-
88.
Réactif : Pied de page (application de chat)
6:01
-
89.
Mise en ligne : SEO (application de chat)
5:30
-
90.
Mise en ligne : Publication (application de chat)
6:52
-
91.
Mise en ligne : Éditeur
3:31
-
92.
PARTIE 4 : PROJET CLIENT DU DÉBUT À LA FIN
1:32
-
93.
Bon processus de conception
8:03
-
94.
Projet client : Présentation du projet
5:12
-
95.
Projet client : Moodboard
4:44
-
96.
Pourquoi le wireframing ?
7:35
-
97.
Styles Figma
3:05
-
98.
Composants Figma
7:40
-
99.
Kit de filature
5:07
-
100.
Wireframes - Page d'accueil Partie 1
13:18
-
101.
Wireframes - Page d'accueil Partie 2
17:23
-
102.
Wireframes - Page de publication
9:48
-
103.
Wireframes - Grille de blog
8:55
-
104.
Conception de la page d'accueil TeamApp : Partie 1
13:53
-
105.
Conception de la page d'accueil TeamApp : Partie 2
24:27
-
106.
Conception de la page d'accueil TeamApp : Partie 3
15:18
-
107.
Conception de publication de blog
7:59
-
108.
Conception de grille de blog
16:45
-
109.
Développement de flux Web 2
1:02
-
110.
Webflow 2 : Styles d'arrière-plan
8:08
-
111.
Webflow 2 : Navbar (application d'équipe)
10:05
-
112.
Webflow 2 : Contenu du héros
11:25
-
113.
Webflow 2 : Formulaires
13:01
-
114.
Webflow 2 : Maquette section 1
12:05
-
115.
Webflow 2 : Section 2 de la maquette
4:41
-
116.
Webflow 2 : Sections de photos
5:01
-
117.
Webflow 2 : Composant curseur
4:39
-
118.
Webflow 2 : curseur de témoignages
15:17
-
119.
Webflow 2 : Positionnement
8:38
-
120.
Webflow 2 : Flèches du curseur
5:47
-
121.
Webflow 2 : Pied de page (application d'équipe)
7:26
-
122.
Webflow 2 : forme de pied de page
9:39
-
123.
Interactions : Donner De La Vie À Votre Site Web
2:02
-
124.
Interactions : interaction avec les cartes
13:57
-
125.
Interactions : interaction avec la flèche 1
2:50
-
126.
Interactions : interaction avec la flèche 2
7:12
-
127.
Réactif : Navbar (application d'équipe)
5:43
-
128.
Responsive : Section Héros
4:57
-
129.
Réactif : Section de maquettes
5:02
-
130.
Réactif : Corps
5:23
-
131.
Responsive : Témoignage et pied de page
6:47
-
132.
Blog & CMS : passer d’un site statique à un site dynamique
1:33
-
133.
Blog et CMS : Webflow CMS
5:36
-
134.
Blog & CMS : Articles CMS
3:46
-
135.
Blog & CMS : Page de collection
4:07
-
136.
Blog & CMS : barre de navigation & titre
5:41
-
137.
Blog & CMS : Blocage des auteurs
4:07
-
138.
Blog & CMS : Domaine de référence
6:24
-
139.
Blog et CMS : Object Fit
2:06
-
140.
Blog & CMS : Image principale
3:03
-
141.
Blog et CMS : texte enrichi
12:45
-
142.
Blog et CMS : Bloc Auteur en Bas
3:39
-
143.
Composants de flux Web
10:15
-
144.
Blog & CMS : publication réactive
6:34
-
145.
Blog & CMS : Page d'accueil du blog
15:19
-
146.
Liste des collections
10:33
-
147.
Blog et CMS : Pagination
7:11
-
148.
Blog & CMS : Page de blog réactive
5:25
-
149.
Mise en ligne : SEO et publication
8:30
-
150.
Mise en ligne : Soumission des formulaires
2:16
-
151.
Mise en ligne : domaine personnalisé
13:02
-
152.
Site web du portfolio
4:34
-
153.
Visite du site du portfolio
6:15
-
154.
Installation du site Web du portfolio
13:15
-
155.
Trouver du travail en ligne
9:51
-
156.
Trouver des studios de travail
6:35
-
157.
Trouver un réseau de travail
3:12
-
158.
Trouver la fin du travail
0:32
-
159.
Présentation d'Upwork
5:05
-
160.
Conseils 1 à 3 : Faire approuver votre profil
4:37
-
161.
Conseils 4 à 9 : Créez un profil qui attire les clients
7:02
-
162.
Conseils 10 à 12 : Obtenez le badge « meilleur match »
3:29
-
163.
Conseil 13-14 : Proposez le bon prix
4:09
-
164.
Conseils 15-16 : Soyez le freelance auquel ils ne peuvent résister
6:03
-
165.
Conseils 17-22 : Écrivez de très bonnes lettres de motivation
8:03
-
166.
Conseils 23 à 25 : Ne vous faites pas suspendre
6:31
-
167.
Conseils 26-28 : Ne vous faites pas arnaquer
1:42
-
168.
Tarifs : Combien facturez-vous ?
11:25
-
169.
Tarifs : Tarifs horaires vs taux fixe
4:14
-
170.
Modèle de proposition : Taux fixe
8:48
-
171.
Modèle de proposition : Taux horaire
2:24
-
172.
Contrat de freelance
5:51
-
173.
Vendre Webflow à des clients
11:09
-
174.
Introduction à Advanced
1:51
-
175.
Webflow : Modal personnalisé (fenêtre contextuelle)
15:16
-
176.
Webflow : Intégration de code personnalisé - Plugin de commentaires (nécessite un plan payant)
7:16
-
177.
Photoshop : comment créer une coupe étirée
5:16
-
178.
Photoshop : comment découper une image (Unboxing)
13:57
-
179.
Photoshop : Tutoriel Stick Out
10:11
-
-
- --
- Niveau débutant
- Niveau intermédiaire
- Niveau avancé
- Tous niveaux
Généré par la communauté
Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.
17 335
apprenants
351
projets
À propos de ce cours
CECI EST UN COURS DE CONCEPTION WEB EN QUATRE PARTIES
Partie 1 : Les principes fondamentaux d’un bon design
Partie 2 : Pratique de conception
Partie 3 : Développement de flux Web
Partie 4 : Projet client
OUTILS UTILISÉS DANS CE COURS :
Webflow – Outil de conception Web réactive, CMS et plateforme d’hébergement
Figma - Un outil de conception d'interfaces
REJOIGNEZ NOTRE HANGOUT ÉTUDIANT SUR DISCORD :
Nous avons un canal Discord pour les étudiants de ce cours. Vous pouvez y discuter directement avec d'autres étudiants du cours, partager du contenu, échanger des idées, vous aider mutuellement pour la conception de Figma, Webflow et vous faire des amis.
Vous pouvez participer avec ce lien d'invitation.
Rencontrez votre enseignant·e
One day I had enough with the 9-to-5 grind or more like 9-to-9 in my case, and I quit my job, or more like got myself fired from my own startup.
I decided to work on my dream: be my own boss, travel the world, only do the work I enjoyed, and make a lot more money in the process. No more begging for vacation days and living from paycheck to paycheck.
After trying everything from e-commerce stores to professional poker my lucky break came when I started freelance design. I fell in love with the field that gives me the lifestyle of my dreams.
I realize that people who take online courses, want to transform their lives. Today with my courses and mentoring I am helping thousands of peopl... Voir le profil complet
Projet de cours pratique
OUTILS UTILISÉS DANS CE COURS :
Webflow — Outil de conception Web réactive, CMS et plateforme d'hébergement
Figma - Un outil de conception d'interfaces
Ce cours comporte plusieurs petits travaux et deux projets complets de création de sites Web. Pour la plupart d'entre eux, vous aurez besoin de fichiers de projet Figma. Ils sont liés en bas.
Pour recevoir mon retour sur votre travail, vous pouvez soumettre vos solutions de devoirs soit dans le projet de classe, soit dans les discussions.
Tous les fichiers du projet et toutes les ressources mentionnées dans les vidéos sont disponibles ici : https://www.vakoshvili.com/resources
J'ai préparé des notes pour chaque section de ce cours :
- Notes de section : La mise en page est roi
- Notes de section : Comment utiliser la typographie de façon esthétique
- Notes de section : L’art de la couleur
- Notes de section : Comment utiliser des photos pour créer des sites Web attrayants
- Notes de section : 6 astuces de conception que tout designer devrait connaître
- Notes de section : Pratiquer par imitation.
- Notes de section : Conception d'application de chat
- Notes de section : Fonctionnement des pages Web
Affectation/Fichiers de projet :
- Pratique : Hiérarchie visuelle
- Pratique : Personnalité typographique
- Pratique : Définition du type
- Pratique : jumelage de polices
- Pratique : échantillonnage des couleurs
- Pratique : Superpositions d'images
- Pratique : Techniques de recadrage de photos
- Pratique : Trouver des photos
- Pratique : chevauchement
- Pratique : Tension
- Fichier Figma : Conception de la page d'accueil Figma
- Figma File : Application de chat
- Figma File : App d'équipe
- Fichier Figma : Wireframe Kit
Notes attribuées au cours
Pourquoi s'inscrire à Skillshare ?
Suivez des cours Skillshare Original primés
Chaque cours comprend de courtes leçons et des travaux pratiques
Votre abonnement soutient les enseignants Skillshare
Apprenez, où que vous soyez
Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.
Cours apparentés
