Design - Guia de Sobrevivência
Em construção...
Fonte
https://tableless.com.br/um-guia-completo-de-tipografia-para-a-web/
Escolher fontes: https://fonts.google.com/
Combinação de fontes: https://fontjoy.com/
Tamanhos de fontes: https://type-scale.com/ (escolher por exemplo múltiplo de 8 ou 4 h1: 48px, h2: 24px, h3: 20px)
Tipos de fonte
https://www.bambui.ifmg.edu.br/portal/uncategorised/diferentes-tipos-de-tipografia-guia-completo-para-nao-designers
https://rockcontent.com/br/blog/tipografia/
Serif
São conhecidas por seus prolongamentos e pequenos traços.
As fontes do tipo Serif, ou serifadas, são indicadas para livros e texto grandes impressos, pois auxiliam na leitura, dando uma maior continuidade e sem causar cansaço visual.
Esse tipo de fonte transmite seriedade, sendo ideal para situações em que queremos demonstrar respeito e valores tradicionais.
Exemplos: Times New Roman, Palatino, Book Antiqua, Courier, Garamond.
Sans-serif
Não possuem os prolongamentos e são mais minimalistas.
As fontes sem serifa são adequadas para títulos, chamadas e textos digitais, isso porque, quando visualizamos um texto na tela de um computador, tablet ou celular, as serifas acabam sendo um empecilho para a fluidez da leitura.
Esse tipo de fonte passa uma sensação de modernidade, alegria e segurança, sendo utilizadas em ocasiões que necessitam de um design mais minimalista e neutro. São indicadas para empresas que não lidam com assuntos sérios, como agências de publicidade, supermercados, lojas de roupas, entre outros.
Exemplos: Arial, Bauhaus, Tahoma, Verdana, Helvética.
Script, cursive ou handwriting
Fontes do tipo Script são mais desenhadas e parecidas com a escrita à mão ou letra cursiva. O nosso cérebro capta esse tipo de fonte como elegante e sedutora, ideal para chamar a atenção das pessoas. Além disso, ela demonstra certo afeto. Por isso, são mais indicada para serem usadas em títulos, assinaturas e convites.
Exemplos: Lobster, Brush, Grat Vibes, Edwardian.
Moderna ou artística
As fontes do tipo Moderna devem ser utilizadas por marcas que desejam transmitir esse tipo de valor.
Por serem futuristas, acabam transmitindo mais estilo e são perfeitas para empresas que seguem as tendências.
Exemplos: Century Gothic, Infinity, Futura, Majoram, Matchbook.
Fantasy
Monospace
Dicas práticas de tipografia
Tente escolher uma família só.
Dê preferência para famílias conhecidas, pois tem diversos pesos disponíveis (light, medium, bold, extra bold, black).
Hierarquia
Ela é fundamental para que quem esteja lendo consiga identificar o que é o título, uma chamada e o texto. É importante manter esse padrão para não causar confusão.
Você pode destacar os elementos que considerar necessários, porém, não permita que isso interfira no fluxo de leitura, que pode acabar fazendo com que as pessoas não queiram mais ler os seus conteúdos.
Título: regra do dobro do tamanho do texto.
Pode também usar múltiplos de 4 ou 8: 4, 8, 12, 16, 20, 24, 28, 32...
Exemplo:
Texto: 16
H1: 32
H2: 24
H3: 20
Alinhamento
Largura dos blocos de texto
75 palavras no máximo por linha
Espaços em branco
Peso
Contraste não é só branco no preto, leva em consideração peso da fonte, legibilidade em si.
Ritmo Vertical
Cores
https://coolors.co/011627-fdfffc-2ec4b6-e71d36-ff9f1c
https://color.adobe.com/pt/create/color-wheel
Definir paleta para destaque (ter em mente o contraste de acessibilidade, portanto você pode ter uma cor de destaque e um tom mais claro ou escuro para caso você for fazer um link no fundo claro ou escuro e tem um contraste acessível)
Uma panela neutra para fontes, bordas, fundo
Uma paleta para feedback (verde e vermelho, para usar em uma mensagem de erro ou colorir um input correto ou errado)
https://youtu.be/nhO86T8DZSc
Análogo
Monocromático
Tríade
Complementar
Dividir complementar
Dividir complementar duas vezes
Quadrado
Composto
Sombras
Dark Mode
https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#aa-using-custom-properties
Responsividade
Mobile-first
Nem todas informações são necessárias.
Usuário de celular quer informações rápidas e enxutas. Velocidade dados móveis
Acessibilidade
https://developer.mozilla.org/pt-BR/docs/Learn/Accessibility/HTML
https://mwpt.com.br/acessibilidade-digital/boas-praticas/
https://educadiversidade.unesp.br/guia-de-acessibilidade-web/#Boas_praticas