Compléter le design web de Figma à Webflow | Vako Shvili | Skillshare
Menu
Recherche

Vitesse de lecture


  • 0.5x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 2x

Compléter le design web de Figma à Webflow

teacher avatar Vako Shvili, Web Designer

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Aperçu du cours

      5:15

    • 2.

      Qu'est-ce que Webflow ?

      6:54

    • 3.

      Webflow Teaser

      4:51

    • 4.

      PARTIE 1 : SECRETS DU BON DESIGN

      2:31

    • 5.

      Se lancer avec Figma

      10:25

    • 6.

      La mise en page est roi

      6:49

    • 7.

      Rejoignez notre groupe d'étudiants sur Discord

      0:10

    • 8.

      Assignment : alignement et grille

      11:11

    • 9.

      Mise en page : importance de la hiérarchie visuelle

      7:20

    • 10.

      Assignment : hiérarchie visuelle

      9:18

    • 11.

      Mise en page : méfiez-vous des illusions optiques

      3:51

    • 12.

      Mise en page : proximité

      1:42

    • 13.

      Comment utiliser magnifiquement la typographie

      1:37

    • 14.

      Typographie : la typographie est accompagnée d'une personnalité

      1:51

    • 15.

      Typographie : catégories de polices

      6:14

    • 16.

      Assignment : personnalité de la police

      8:08

    • 17.

      Typographie : définir le type

      8:30

    • 18.

      Assignment : définir le type

      7:29

    • 19.

      Typographie : deux polices seulement

      2:47

    • 20.

      Typographie : où trouver des polices

      3:57

    • 21.

      Assignment : appariement de polices

      7:30

    • 22.

      L'art de la couleur

      1:11

    • 23.

      Couleurs : échantillonner les couleurs

      1:56

    • 24.

      Assignment : échantillonner les couleurs

      18:27

    • 25.

      Couleurs : affiner les couleurs

      3:58

    • 26.

      Assignment : affiner les couleurs

      3:01

    • 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.

      Assignment : superpositions d'images

      5:19

    • 32.

      Assignment : superpositions d'images

      4:45

    • 33.

      Photos : Techniques de recadrage - Recadrage extrême

      4:28

    • 34.

      Photos : techniques de recadrage - Recadrage souple

      4:43

    • 35.

      Assignment : recadrage photo

      9:50

    • 36.

      Photos : règle des tiers

      4:38

    • 37.

      Photos : Unbox !

      4:47

    • 38.

      Photos : choisir des photos comme un pro

      6:13

    • 39.

      Photos : où trouver des photos

      3:27

    • 40.

      Assignment : trouver des photos

      4:53

    • 41.

      6 astuces de design que tout designer devrait savoir

      0:24

    • 42.

      Astuce de design :

      3:52

    • 43.

      Astuce de design : espace blanc

      5:07

    • 44.

      Astuce de design : Repetition

      3:56

    • 45.

      Astuce de design : cohérence

      7:55

    • 46.

      Astuce de design : se superposer

      3:43

    • 47.

      Assignment : se chevaucher

      1:00

    • 48.

      Astuce de design : tension

      2:32

    • 49.

      Attribution : tension

      5:31

    • 50.

      PARTIE 2 : PRATIQUER LE DESIGN COMME UN PRO

      0:18

    • 51.

      La méthode mimic

      4:57

    • 52.

      Le plus grand secret des designers - Inspiration

      5:52

    • 53.

      Assignment : tableau d'ambiance

      7:09

    • 54.

      Assignment : Figma Homepage Design

      8:11

    • 55.

      Conception de pages d'accueil de ChatApp : partie 1

      8:42

    • 56.

      Conception de pages d'accueil de ChatApp : partie 2

      18:49

    • 57.

      Conception de pages d'accueil de ChatApp : partie 3

      14:37

    • 58.

      Conception de pages d'accueil de ChatApp : partie 4

      21:15

    • 59.

      PARTIE 3 : DÉVELOPPEMENT WEB (WEBFLOW)

      0:24

    • 60.

      Les bases du web : Webflow designer

      4:18

    • 61.

      Les bases du web : HTML et CSS

      3:35

    • 62.

      Les bases du web : le modèle de boîte

      2:15

    • 63.

      Webflow : hiérarchie des éléments

      4:30

    • 64.

      Webflow : éléments de création de pages Web

      4:05

    • 65.

      Webflow : paramètres de taille

      13:43

    • 66.

      Webflow : remplissage et marges

      14:37

    • 67.

      Webflow : typographie web

      7:26

    • 68.

      Webflow : buttons et liens

      5:47

    • 69.

      Webflow : CSS Classes

      6:22

    • 70.

      Webflow vs Figma tailles

      9:36

    • 71.

      Webflow : images

      6:40

    • 72.

      Webflow : flotter et afficher

      9:02

    • 73.

      Webflow : Flexbox

      12:56

    • 74.

      Webflow : liste de tâches de débogage

      23:55

    • 75.

      Webflow : Navbar (application de chat)

      10:35

    • 76.

      Webflow : Survoler

      8:24

    • 77.

      Webflow : section centrale (application de chat)

      4:25

    • 78.

      Webflow : balises HTML

      11:13

    • 79.

      Webflow : cours combinés

      9:03

    • 80.

      Webflow : section CTA (application de chat)

      16:47

    • 81.

      Webflow : pied de page (application de chat)

      13:28

    • 82.

      Introduction à la conception web responsive

      6:40

    • 83.

      Responsive : section Héros - Tablette

      3:57

    • 84.

      Responsive : section Héros - Mobile 1

      5:16

    • 85.

      Responsive : section Héros - Mobile 2

      3:03

    • 86.

      Responsive : Menu de navigation (application de chat)

      10:12

    • 87.

      Responsive : Overflow

      7:17

    • 88.

      Responsive : section CTA (application de chat)

      5:12

    • 89.

      Responsive : Footer (application de chat)

      6:01

    • 90.

      Aller en direct : SEO (application de chat)

      5:30

    • 91.

      Aller en direct : publier (application de chat)

      6:52

    • 92.

      Aller en direct : éditeur

      3:31

    • 93.

      PARTIE 4 : PROJET CLIENT DU BOUT EN BOUT

      1:32

    • 94.

      Projet client : bon processus de design

      8:03

    • 95.

      Projet client : brief de projet

      5:09

    • 96.

      Projet client : Moodboard

      4:50

    • 97.

      Projet client : pourquoi Wireframing ?

      7:35

    • 98.

      Projet client : styles Figma

      2:59

    • 99.

      Projet client : Composants Figma

      7:14

    • 100.

      Projet client : kit Wireframe

      4:54

    • 101.

      Projet client : Wireframes - Page d'accueil partie 1

      12:32

    • 102.

      Projet client : Wireframes - Page d'accueil partie 2

      15:47

    • 103.

      Projet client : page de publication Wireframes

      7:46

    • 104.

      Projet client : Wireframes - Blog

      7:16

    • 105.

      Projet client : design de page d'accueil, partie 1

      11:30

    • 106.

      Projet client : design de page d'accueil, partie 2

      17:44

    • 107.

      Projet client : design de page d'accueil, partie 3

      11:57

    • 108.

      Projet client : design de posts de blog

      6:19

    • 109.

      Projet client : design de blog

      13:39

    • 110.

      Développement Webflow 2

      1:02

    • 111.

      Webflow 2 : styles d'arrière-plan

      8:28

    • 112.

      Webflow 2 : Navbar (application équipe)

      10:05

    • 113.

      Webflow 2 : contenu pour héros

      11:25

    • 114.

      Webflow 2 : Formes

      13:01

    • 115.

      Webflow 2 : section 1 de la maquette

      12:05

    • 116.

      Webflow 2 : Maquette section 2

      4:41

    • 117.

      Webflow 2 : Sections photo

      5:01

    • 118.

      Webflow 2 : composant curseur

      4:39

    • 119.

      Webflow 2 : curseur de témoignage

      15:17

    • 120.

      Webflow 2 : Positionner

      8:38

    • 121.

      Webflow 2 : flèches du curseur

      5:47

    • 122.

      Webflow 2 : Footer (application équipe)

      7:26

    • 123.

      Webflow 2 : Forme de pied de page

      9:39

    • 124.

      Interactions : donner vie à votre site web

      2:02

    • 125.

      Interactions : interaction avec des cartes

      13:57

    • 126.

      Interactions : interaction avec les flèches 1

      2:50

    • 127.

      Interactions : interaction avec les flèches 2

      7:12

    • 128.

      Responsive : Navbar (application équipe)

      5:43

    • 129.

      Responsive : section Héros

      4:57

    • 130.

      Responsive : section Maquettes

      5:02

    • 131.

      Responsive : Body

      5:23

    • 132.

      Responsive : témoignage et pied de page

      6:47

    • 133.

      Blog et CMS : passer d'un site statique à un site dynamique

      1:33

    • 134.

      Blog et CMS : Webflow CMS

      5:36

    • 135.

      Blog et CMS : éléments CMS

      3:36

    • 136.

      Blog et CMS : page de collection

      4:14

    • 137.

      Blog et CMS : Navbar et titre

      5:41

    • 138.

      Blog et CMS : Bloc d'auteurs

      4:07

    • 139.

      Blog et CMS : champ de référence

      6:24

    • 140.

      Blog et CMS : ajustement de l'objet

      2:06

    • 141.

      Blog et CMS : image principale

      3:03

    • 142.

      Blog et CMS : texte riche

      12:45

    • 143.

      Blog et CMS : bas du bloc auteur

      3:48

    • 144.

      Composants Webflow

      10:15

    • 145.

      Blog et CMS : publication responsive

      6:34

    • 146.

      Blog et CMS : page d'accueil de blog

      15:19

    • 147.

      Liste de collection

      10:33

    • 148.

      Blog et CMS : Pagination

      7:11

    • 149.

      Blog et CMS : page de blog responsive

      5:25

    • 150.

      Aller en direct : SEO et publication

      8:30

    • 151.

      Mise en ligne : soumissions de formulaires

      2:16

    • 152.

      Going Live : domaine personnalisé

      13:02

    • 153.

      Site web de portfolio

      4:34

    • 154.

      Visite du site web Portfolio

      6:15

    • 155.

      Installer le site web de portfolio

      13:15

    • 156.

      Trouver du travail en ligne

      9:51

    • 157.

      Trouver des studios de travail

      6:35

    • 158.

      Trouver le travail en réseau

      3:12

    • 159.

      Trouver des travaux

      0:32

    • 160.

      Aperçu de Upwork

      6:05

    • 161.

      Astuces 1-3 : obtenir l'approbation de votre profil

      4:46

    • 162.

      Astuces 4-9 : créer un profil qui attire des clients

      7:02

    • 163.

      Astuces 10-12 : Obtenir le badge "best match"

      3:30

    • 164.

      Astuces 13-14 : proposer le bon prix

      4:09

    • 165.

      Astuces 15-16 : être le freelance auquel il ne peut résister

      6:03

    • 166.

      Astuces 17-22 : Rédiger de bonnes lettres de motivation

      8:03

    • 167.

      Astuces 23-25 : ne vous laissez pas suspendus

      6:31

    • 168.

      Astuces 26-28 : ne pas se faire arnaquer

      3:05

    • 169.

      Tarification : combien facturez-vous ?

      11:25

    • 170.

      Tarification : horaire par rapport au tarif fixe

      4:14

    • 171.

      Modèle de proposition : tarif fixe

      8:36

    • 172.

      Modèle de proposition : tarif horaire

      2:28