Workshop

Design para Devs

Nível
40 aulas
3h10

Assistir agora

1. Apresentação

Sobre o Workshop

Este é um workshop de front-end que visa ajudar pessoas que ainda não se sentem ainda tão confortáveis com Webdesign. Vamos mergulhar em alguns tópicos essenciais e que todo dev front-end deve dominar sobre design.

Você irá perceber que design não significa apenas criatividade e "talento" para desenhar interfaces bonitas. Existem uma série de princípios que podem ser seguidos para que você consiga desenvolver uma aplicação esteticamente amigável.

O que vamos aprender

Alguns dos tópicos que serão abordados nesse workshop:

  • Teoria das cores
  • Tipografia e Fontes para Web (incluindo alguns tópicos de otimização)
  • Imagens e Ilustrações
  • Acessibilidade
  • Layouts.
  • Figma como ferramenta para desenvolvimento front-end

Durante o workshop haverá alguns exercícios práticos e conteúdo mão na massa. De forma que este workshop é uma ótima oportunidade para devs que desejam melhorar suas habilidades em design de interfaces e se tornarem mais confiantes na criação de interfaces web visualmente atraentes e funcionais.

Pré requisitos

Não existe pré-requisito técnico ou conhecimento específico para assistir a esse workshop. Conhecimento básico de HTML e CSS é desejável.

Seu Instrutor

Roberto Cestari

Codante.io

Aulas

  1. Introdução
  2. 1.

    Apresentação

    01:22
  3. 2.

    Sobre o workshop

    03:48
  4. 3.

    Conteúdo do workshop

    01:39
  5. 4.

    Web Designer e Web Developer

    11:42
  6. Cores
  7. 5.

    Evolução do Design da Web

    16:13
  8. 6.

    Sistema de Cores

    09:01
  9. 7.

    Relação entre cores

    05:58
  10. 8.

    Criando Tints, Shades e Tones

    04:23
  11. 9.

    Sombras e Color Context

    03:23
  12. 10.

    Cores e CSS: 256 cores vs RGB

    05:31
  13. 11.

    Named Colors

    01:51
  14. 12.

    RGB e RGBA

    02:54
  15. 13.

    Sintaxe Hexadecimal

    03:35
  16. 14.

    HSL

    05:15
  17. 15.

    Prática - Criando um arco-íris com HSL

    12:38
  18. 16.

    Prática - Criando tonalidades com HSL

    01:46
  19. 17.

    Problema do HSL - Contraste

    05:26
  20. 18.

    LCH

    06:57
  21. 19.

    Prática - Paleta com LCH

    05:59
  22. 20.

    Outros tópicos de cores

    03:05
  23. 21.

    Criando uma paleta de cores

    02:45
  24. 22.

    Ferramentas de cores

    02:39
  25. 23.

    Cores e acessibilidade

    02:09
  26. Tipografia
  27. 24.

    Introdução à Tipografia

    02:54
  28. 25.

    Nomenclatura - Serifa e monospace

    01:49
  29. 26.

    Nomenclatura - Leading, tracking e kerning

    04:48
  30. 27.

    Escolhendo fontes

    06:59
  31. 28.

    Tipografia - Extensões Existentes

    03:10
  32. 29.

    Como identificar a fonte certa

    02:00
  33. 30.

    Fontes Variáveis

    07:11
  34. 31.

    Prática - Google Fonts com fonte não variável

    09:01
  35. 32.

    Prática - Google Fonts com fonte variável

    08:27
  36. Imagens
  37. 33.

    Imagens - Formatos existentes

    06:31
  38. 34.

    Diferentes tamanhos de imagens

    03:57
  39. 35.

    Diferentes formas de utilizar imagens no html

    01:48
  40. 36.

    Ferramentas para otimizar imagens

    01:43
  41. 37.

    Onde encontrar boas imagens

    00:58
  42. 38.

    Imagens como background

    00:59
  43. Outros Tópicos
  44. 39.

    Figma básico

    06:24
  45. 40.

    Finalização

    01:37