Mapa do Módulo 4: Design essencial pra sites

Aula 01: Princípios de design pra quem não é designer
+
- Você não precisa ser designer pra fazer um site bonito. Alguns princípios simples já deixam qualquer página com cara profissional.
- Contraste
  +
  - Faz o que importa saltar aos olhos. Fundo e texto com contraste forte deixam o conteúdo fácil de ler e guiam o olhar pro que você quer destacar.
- Espaçamento
  +
  - Espaço em branco não é espaço vazio. Ele dá respiro entre os elementos e faz o site parecer mais organizado e mais caro.
- Repetição
  +
  - Repetir os mesmos estilos de botão, cor e fonte no site inteiro cria padrão. A pessoa sente que tudo faz parte do mesmo lugar.
- Proporção
  +
  - Os elementos mais importantes ocupam mais espaço e ganham destaque. A proporção certa organiza a página e mostra o que vem primeiro.
- Funcionalidade
  +
  - Bonito e fácil de usar andam juntos. Cada elemento precisa ter função clara e levar a pessoa pro próximo passo sem confusão.
- Hierarquia
  +
  - É a ordem que guia o olhar, do mais importante pro detalhe. Título forte, subtítulo médio e texto de apoio deixam claro o caminho de leitura.
Aula 02: Onde e como buscar inspirações
+
- Ninguém cria do nada. Os melhores sites nascem de boas referências. Aqui você descobre onde buscar e como usar sem cair na cópia.
- Onde buscar
  +
  - Os melhores lugares para garimpar referências:
    Galerias de designSites como Behance e Dribbble mostram o que está em alta.
    Concorrentes do nichoVeja como outros do mesmo segmento se apresentam.
    Templates prontosAs bibliotecas de tema dão ótimas ideias de estrutura.
- Como usar a inspiração
  +
  - Junte referências de vários lugares e tire de cada uma o que funciona: a estrutura de uma, a cor de outra, o tom de uma terceira. Assim você monta algo novo com a identidade do cliente.
  - Inspiração não é cópia. A referência serve pra entender padrões, não pra clonar o site do concorrente.
Aula 03: Como escolher cores e montar uma paleta
+
- A cor é a primeira coisa que a pessoa sente no site. Uma paleta bem escolhida passa a mensagem certa antes mesmo de ler qualquer texto.
- Como montar a paleta
  +
  - As cores que toda paleta precisa:
    Cor principalLigada à marca, aparece no topo e no que representa o negócio.
    Cor de destaqueUsada nos botões e nos pontos de ação, pra chamar o clique.
    Tons neutrosFundo e texto que dão equilíbrio e não cansam os olhos.
- O que cada cor passa
  +
  - O que as cores comunicam:
    AzulPassa confiança e segurança. Muito usado por clínicas e empresas.
    VerdeLigado a saúde, natureza e equilíbrio.
    Vermelho e laranjaChamam atenção e criam urgência, ótimos para botões.
Aula 04: Tipografia: escolher e combinar fontes
+
- A fonte certa deixa o site legível e com personalidade. Combinar bem duas fontes já resolve a maioria dos projetos.
- Como combinar fontes
  +
  - A dupla que funciona quase sempre:
    Fonte de títuloUma fonte com mais personalidade pra dar destaque aos títulos.
    Fonte de textoUma fonte simples e legível pro corpo, que não cansa.
    Contraste entre elasDuas fontes diferentes o suficiente pra criar hierarquia.
- Cuidados com a leitura
  +
  - Priorize sempre a leitura fácil, principalmente no celular. Tamanho confortável, bom espaço entre as linhas e nada de fonte enfeitada em texto longo.
Aula 05: Hierarquia visual e espaçamento
+
- Hierarquia é o que guia o olhar pela página, do mais importante pro detalhe. O espaçamento é o que dá clareza pra isso.
- Como criar hierarquia
  +
  - Use tamanhos, pesos e cores diferentes pra separar título, subtítulo e texto. O olho entende na hora o que ler primeiro.
- O papel do espaçamento
  +
  - Espaço entre os elementos deixa tudo mais claro e agradável. Seções que respiram passam a sensação de site profissional e bem cuidado.
Aula 06: Tamanho ideal de imagens e tipos de banner
+
- Imagem no tamanho errado pesa o site ou fica borrada. Saber o tamanho certo antes de subir evita retrabalho.
- Imagens otimizadas
  +
  - Use imagens no formato certo e comprimidas pra não pesar o carregamento. Site rápido também é design.
- Tipos de banner
  +
  - As versões de banner que você vai precisar:
    Banner de computadorFormato mais largo, pensado pra tela grande.
    Banner de celularProporção mais vertical, com o essencial em destaque.
    As duas versõesTer as duas garante um banner bom em qualquer tela.
Aula 07: Criando um banner no Figma
+
- O Figma é gratuito e poderoso pra criar banners e artes com precisão total.
- Montando o banner no Figma
  +
  - Você cria o quadro no tamanho certo, monta o layout com textos e imagens e exporta pronto pra usar no site. Controle total sobre cada detalhe.
Aula 08: Criando um banner no Canva
+
- O Canva é a opção mais rápida pra criar banners sem complicação.
- Montando o banner no Canva
  +
  - Parte de um modelo ou de um quadro em branco no tamanho certo, ajusta cores, textos e imagens e exporta em poucos cliques. Perfeito pra agilidade.
Revisão do módulo
+
- - Conheço os princípios básicos de design
  - Sei onde buscar referências e como usar sem copiar
  - Consigo montar uma paleta de cores
  - Sei combinar fontes com boa leitura
  - Entendo hierarquia visual e espaçamento
  - Sei o tamanho ideal das imagens e dos banners
  - Criei um banner no Figma e no Canva
Materiais do módulo
+
- Materiais do módulo
  Contrate a Hostinger pelo link abaixo com o desconto já aplicado e siga o módulo com a mesma hospedagem que eu uso.
  Contratar a Hostinger com descontoCupom já aplicado no link

Módulo 4: Design essencial pra sites

Materiais do módulo