Design Web complet de Figma à Webflow (nouvelle interface utilisateur) | Vako Shvili | Skillshare
Parcourir
Recherche
Se connecter

Velocidade de reprodução

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

Web design completo do Figma para o Webflow (nova UI)

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.

      Visão geral do curso

      6:30

    • 2.

      O que é o Webflow?

      6:54

    • 3.

      Teaser do Webflow

      4:38

    • 4.

      PARTE 1: SEGREDOS DO BOM DESIGN

      2:31

    • 5.

      Começando com o Figma

      11:34

    • 6.

      O layout é rei

      6:49

    • 7.

      Junte-se ao nosso hangout de estudantes no Discord

      0:10

    • 8.

      Tarefa: alinhamento e grade

      11:10

    • 9.

      Layout: importância da hierarquia visual

      7:20

    • 10.

      Tarefa: hierarquia visual

      9:20

    • 11.

      Layout: cuidado com ilusões de ótica

      3:51

    • 12.

      Layout: proximidade

      1:42

    • 13.

      Como usar a tipografia lindamente

      1:37

    • 14.

      Tipografia: o tipo de letra vem com uma personalidade

      1:51

    • 15.

      Tipografia: categorias de tipos

      6:14

    • 16.

      Tarefa: personalidade do tipo

      8:08

    • 17.

      Tipografia: configuração de tipo

      8:30

    • 18.

      Tarefa: configuração de tipo

      7:27

    • 19.

      Tipografia: apenas duas fontes

      2:47

    • 20.

      Tipografia: onde encontrar fontes

      3:57

    • 21.

      Tarefa: emparelhamento de tipos

      7:21

    • 22.

      A arte da cor

      1:11

    • 23.

      Cores: cores de amostra

      1:56

    • 24.

      Tarefa: amostragem de cores

      18:42

    • 25.

      Cores: cores de ajuste fino

      3:58

    • 26.

      Tarefa: ajuste fino de cores

      2:56

    • 27.

      Cores: caça às cores

      2:45

    • 28.

      Cores: cores da marca

      2:20

    • 29.

      Como usar fotos para criar sites de água na boca

      0:23

    • 30.

      Fotos: sobreposições de imagens

      1:58

    • 31.

      Tarefa: sobreposições de imagens

      5:18

    • 32.

      Fotos: técnicas de corte — Extreme Crop

      4:28

    • 33.

      Fotos: técnicas de corte — Soft Crop

      4:43

    • 34.

      Tarefa: corte de fotos

      9:09

    • 35.

      Fotos: regra dos terços

      4:38

    • 36.

      Fotos: descaixe

      4:47

    • 37.

      Fotos: escolha fotos como um profissional

      6:13

    • 38.

      Fotos: onde encontrar fotos

      3:27

    • 39.

      Tarefa: encontrando fotos

      4:54

    • 40.

      6 truques de design que todo designer deve saber

      0:24

    • 41.

      Truque de design: contraste

      3:52

    • 42.

      Truque de design: espaço em branco

      5:07

    • 43.

      Truque de design: repetição

      3:56

    • 44.

      Truque de design: consistência

      7:55

    • 45.

      Truque de design: sobreposição

      3:43

    • 46.

      Tarefa: sobreposição

      1:00

    • 47.

      Truque de design: tensão

      2:32

    • 48.

      Tarefa: tensão

      5:18

    • 49.

      PARTE 2: PRATIQUE O DESIGN COMO UM PROFISSIONAL

      0:18

    • 50.

      O método da mímica

      4:57

    • 51.

      O maior segredo dos designers - Inspiração

      5:52

    • 52.

      Tarefa: mood board

      7:12

    • 53.

      Tarefa: design da página inicial do Figma

      8:29

    • 54.

      Design da página inicial do aplicativo de bate-papo: parte 1

      9:16

    • 55.

      Design da página inicial do aplicativo de bate-papo: parte 2

      18:20

    • 56.

      Design da página inicial do aplicativo de bate-papo: parte 3

      15:40

    • 57.

      Design da página inicial do aplicativo de bate-papo: parte 4

      21:33

    • 58.

      PARTE 3: DESENVOLVIMENTO WEB (WEBFLOW)

      0:24

    • 59.

      Noções básicas da Web: designer de fluxo

      2:52

    • 60.

      Noções básicas da Web: HTML e CSS

      3:38

    • 61.

      Noções básicas da Web: o modelo da caixa

      2:15

    • 62.

      Webflow: hierarquia de elementos

      4:30

    • 63.

      Webflow: seção, contêiner, bloco Div

      3:53

    • 64.

      Webflow: configurações de tamanho

      13:48

    • 65.

      Webflow: preenchimento e margens

      13:46

    • 66.

      Webflow: tipografia da web

      8:15

    • 67.

      Webflow: botões e links

      5:47

    • 68.

      Webflow: classes de CSS

      6:22

    • 69.

      Webflow vs Tamanhos do Figma

      9:34

    • 70.

      Webflow: imagens

      6:33

    • 71.

      Webflow: flutuar e exibir

      9:13

    • 72.

      Webflow: Flexbox

      12:56

    • 73.

      Webflow: lista de verificação de depuração

      23:55

    • 74.

      Webflow: Navbar (aplicativo de bate-papo)

      10:35

    • 75.

      Webflow: passar o mouse

      8:24

    • 76.

      Webflow: seção do meio (aplicativo de chat)

      4:25

    • 77.

      Webflow: tags HTML

      11:01

    • 78.

      Webflow: aulas combinadas

      8:55

    • 79.

      Webflow: seção CTA (aplicativo de chat)

      14:48

    • 80.

      Webflow: rodapé (aplicativo de chat)

      13:28

    • 81.

      Introdução ao web design responsivo

      6:38

    • 82.

      Responsivo: seção de heróis — tablet

      3:57

    • 83.

      Responsivo: seção de heróis — Mobile 1

      5:16

    • 84.

      Responsivo: seção de heróis — Mobile 2

      3:03

    • 85.

      Responsivo: menu Nav (aplicativo de chat)

      10:12

    • 86.

      Responsivo: transbordamento

      7:17

    • 87.

      Responsivo: seção de CTA (aplicativo de chat)

      5:12

    • 88.

      Responsivo: rodapé (aplicativo de chat)

      6:01

    • 89.

      Entrando ao vivo: SEO (aplicativo de chat)

      5:30

    • 90.

      Entrando ao vivo: publicação (aplicativo de chat)

      6:52

    • 91.

      Entrando ao vivo: editor

      3:31

    • 92.

      PARTE 4: PROJETO DO CLIENTE DO INÍCIO AO FIM

      1:32

    • 93.

      Bom processo de design

      8:03

    • 94.

      Projeto do cliente: resumo do projeto

      5:12

    • 95.

      Projeto do cliente: moodboard

      4:44

    • 96.

      Por que fazer wireframing?

      7:35

    • 97.

      Estilos de Figma

      3:05

    • 98.

      Componentes do Figma

      7:40

    • 99.

      Kit de wireframe

      5:07

    • 100.

      Wireframes - página inicial parte 1

      13:18

    • 101.

      Wireframes - página inicial parte 2

      17:23

    • 102.

      Wireframes - Página de postagem

      9:48

    • 103.

      Wireframes - Blog Grid

      8:55

    • 104.

      Design de página inicial do TeamApp: parte 1

      13:53

    • 105.

      Design de página inicial do TeamApp: parte 2

      24:27

    • 106.

      Design de página inicial do TeamApp: parte 3

      15:18

    • 107.

      Design de postagem de blog

      7:59

    • 108.

      Design de grade de blog

      16:45

    • 109.

      Desenvolvimento de Webflow 2

      1:02

    • 110.

      Webflow 2: estilos de fundo

      8:08

    • 111.

      Webflow 2: Navbar (aplicativo de equipe)

      10:05

    • 112.

      Webflow 2: conteúdo de herói

      11:25

    • 113.

      Webflow 2: formulários

      13:01

    • 114.

      Webflow 2: seção de modelo 1

      12:05

    • 115.

      Webflow 2: seção de modelo 2

      4:41

    • 116.

      Webflow 2: seções de fotos

      5:01

    • 117.

      Webflow 2: componente deslizante

      4:39

    • 118.

      Webflow 2: controle deslizante de depoimentos

      15:17

    • 119.

      Webflow 2: posicionamento

      8:38

    • 120.

      Webflow 2: setas deslizantes

      5:47

    • 121.

      Webflow 2: rodapé (aplicativo Team)

      7:26

    • 122.

      Webflow 2: formulário de rodapé

      9:39

    • 123.

      Interações: dando vida ao seu site

      2:02

    • 124.

      Interações: interação com cartões

      13:57

    • 125.

      Interações: interação com setas 1

      2:50

    • 126.

      Interações: interação de seta 2

      7:12

    • 127.

      Responsivo: Navbar (aplicativo da equipe)

      5:43

    • 128.

      Responsiva: seção de heróis

      4:57

    • 129.

      Responsiva: seção de modelos

      5:02

    • 130.

      Responsivo: corpo

      5:23

    • 131.

      Responsivo: depoimento e rodapé

      6:47

    • 132.

      Blog e CMS: passando do site estático para o dinâmico

      1:33

    • 133.

      Blog e CMS: Webflow CMS

      5:36

    • 134.

      Blog e CMS: itens do CMS

      3:36

    • 135.

      Blog e CMS: página de coleção

      4:14

    • 136.

      Blog e CMS: barra de navegação e título

      5:41

    • 137.

      Blog e CMS: bloco de autor

      4:07

    • 138.

      Blog e CMS: campo de referência

      6:24

    • 139.

      Blog e CMS: ajuste de objetos

      2:06

    • 140.

      Blog e CMS: imagem principal

      3:03

    • 141.

      Blog e CMS: texto rico

      12:45

    • 142.

      Blog e CMS: parte inferior do bloco do autor

      3:48

    • 143.

      Componentes do Webflow

      10:15

    • 144.

      Blog e CMS: publicação responsiva

      6:34

    • 145.

      Blog e CMS: página inicial do blog

      15:19

    • 146.

      Lista de coleções

      10:33

    • 147.

      Blog e CMS: paginação

      7:11

    • 148.

      Blog e CMS: página de blog responsiva

      5:25

    • 149.

      Entrando ao vivo: SEO e publicação

      8:30

    • 150.

      Entrando ao vivo: envio de formulários

      2:16

    • 151.

      Entrando em ação: domínio personalizado

      13:02

    • 152.

      Site de portfólio

      4:34

    • 153.

      Tour do site do portfólio

      6:15

    • 154.

      Instalando um site de portfólio

      13:15

    • 155.

      Encontrando trabalho online

      9:51

    • 156.

      Encontrando estúdios de trabalho

      6:35

    • 157.

      Encontrando redes de trabalho

      3:12

    • 158.

      Encontrando a conclusão do trabalho

      0:32

    • 159.

      Visão geral do Upwork

      6:05

    • 160.

      Dicas 1-3: obter seu perfil aprovado

      4:46

    • 161.

      Dicas 4-9: crie um perfil que atraia clientes

      7:02

    • 162.

      Dicas 10-12: obtenha o emblema de "melhor combinação"

      3:30

    • 163.

      Dicas 13-14: proponha o preço certo

      4:09

    • 164.

      Dicas 15-16: seja o freelancer que eles não podem resistir

      6:03

    • 165.

      Dicas 17-22: escreva cartas de apresentação muito boas

      8:03

    • 166.

      Dicas 23-25: não se deixe suspender

      6:31

    • 167.

      Dicas 26-28: não seja enganado

      3:05

    • 168.

      Preços: quanto você cobra?

      11:25

    • 169.

      Preços: por hora vs taxa fixa

      4:14

    • 170.

      Modelo de proposta: taxa fixa

      8:36

    • 171.

      Modelo de proposta: taxa por hora

      2:28