Design para Devs
Assistir agora
1. Apresentação
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.
- Evolução do Design da Web
- Sistema de Cores
- Relação entre cores
- Criando Tints, Shades e Tones
- Sombras e Color Context
- Cores e CSS: 256 cores vs RGB
- Named Colors
- RGB e RGBA
- Sintaxe Hexadecimal
- HSL
- Prática - Criando um arco-íris com HSL
- Prática - Criando tonalidades com HSL
- Problema do HSL - Contraste
- LCH
- Prática - Paleta com LCH
- Outros tópicos de cores
- Criando uma paleta de cores
- Ferramentas de cores
- Cores e acessibilidade
- Introdução à Tipografia
- Nomenclatura - Serifa e monospace
- Nomenclatura - Leading, tracking e kerning
- Escolhendo fontes
- Tipografia - Extensões Existentes
- Como identificar a fonte certa
- Fontes Variáveis
- Prática - Google Fonts com fonte não variável
- Prática - Google Fonts com fonte variável