Inspirações
- Pinterest: minha curadoria de páginas com vários temas.
- Awwwards: acho que o mais famosos concurso de sites da internet.
- Typewolf: site com foco em fontes, mas com uma seção de Site of the Day muito boa.
- Dribbble: inspirações de design em geral.
- Behance: plataforma de publicação de trabalhos de design da Adobe.
- Pinterest: quadros de inspiração em geral. Mantenho lá meus quadros com as curadorias de sites.
- Hoverstat: Curadoria espanhola de sites alternativos.
- Nicholas Rougeux (C82): este cara é um gênio.
Landing Pages
- SaaS landing pages examples: um monte de desigs para se inspirar na hora de criar landing pages;
- Lapa: idem;
- Landingfolio: ibidem;
- One Page Love: ibidem.
E-Commerces
- eCommerce Website Design: curadoria de mais de 3.000 e-commerces.
- Commerce Cream: seleção de ótimos designs do Shopify.
Wireframes
- DiviWP: wireframes para o tema Divi, mas que podem ser copiados para qualquer site.
- Blank Wireframe Kit: wireframes genéricos;
- Creator Blocks (Skool House): wireframes específicos para o GenerateBlocks.
Princípios Gerais de Design Gráfico e Web Design
- Baseline: curso gratuito de design;
- Beginning Graphic Design: Fundamental (GCFLearnFree.org): os seis vídeos da série de princípios do design gráfico são muito bons. Este aqui fala dos princípios: linha, forma, volume, textura e balanço.
- Designing for the Web (Mark Boulton).
Cores
Formação
- Teoria das Cores (Greg Gunn): cinco vídeos da Futur Academy que me ajudaram a entender o básico sobre paletas de cores.
- Beginning Graphic Design: Color (GCFLearnFree.org): conceitos básicos de aplicação de cores em design gráfico.
- A beginner’s guide to applying color in UI design (George Francis): aprendi que uma paleta de 5 cores não é suficiente para o design de um site.
- Super Practical Guide to Color Theory, Color Models and Perfect Color Palettes (DesignerUp): configurações HSB para formar 6 tipos diferentes de tons para paletas de cores: joias, pastel, terra, neutro, fluorescente e sombras.
- The “Gray Dead Zone” of Gradients (Chris Coyier): artigo sobre o problema de se criar gradientes que passam sobre a área de saturação zero do círculo cromático.
Ferramentas
- Coolors: geração de paleta de cores de forma rápida;
- Adobe Color Wheel: geração de paleta de cores mais completa e teórica;
- CSS Gradient: vários modos diferentes de criar gradientes em CSS;
- Easy Gradient Generator Tool: outro gerador de gradientes;
- Color Contrast Checker: para conferir se as cores do seu site atendem aos níveis de conformidade da Web Content Acessibility Guidelines.
Tipografia
Formação
- Beginning Graphic Design: Typography (GCFLearnFree.org): conceitos básicos de tipografia;
- Butterick’s Practical Typography (Matthew Butterick);
- The Elements of Typographic Style Applied to the Web (Richard Rutter);
- Thinking with Type (Ellen Lupton);
- Font size is useless; let’s fix it (Nikita);
- A Five-Minute Guide to Better Typography (Pierrick Calvez).
Hierarquias
- A Modern Typographic Scale (Rob Weychert).
Ferramentas
- Gridlover;
- The good line-height (Fran Pérez);
- Type-scale (Jeremy Church).
Layout e Composição
- Beginning Graphic Design: Layout & Composition (GCFLearnFree.org): conceitos básicos de layout e composição: proximidade, espaço em branco (respiro), alinhamento, contraste, hierarquia e repetição.
- Responsive grids and how to actually use them - Part I, Part II (Christie Tang): vários do and don’ts sobre a utilização de grids.
- The Comprehensive 8pt Grid Guide (Vitsky): guia sobre como criar grids com 8pt.
Imagens
- Beginning Graphic Design: Images (GCFLearnFree.org): conceitos básicos de imagens.
- Onde encontrar fotos gratuitas para publicações: post aqui do site com uma lista ampla de locais para buscar fotos.
- Onde encontrar ilustrações gratuitas para publicações: idem, mas para ilustrações.
Experiência do Usuário (UX)
- Don’t make me think (Steve Krug): talvez o livro de UX mais citado pelos especialistas da área.
- The Principles of Visual Communication (Elizabeth Lin): como melhorar a comunicação de ideias e informações através de elementos visuais.
Outras Ferramentas
- 10015: várias ferramentas;
- CSS Mesh gradient generator: aqueles gradientes radiais com vários focos de cores misturadas.