design
1.0.0
3.1 Nunca use mais de três tipos de letra em uma página de uma só vez.
Por que? Uma variedade de tipos de letra usada em uma única página demonstra uma marca mal definida e pode parecer preguiçoso e confuso. No máximo, três tipos de letra diferentes podem ser usados de uma só vez (logotipo, cabeçalhos, conteúdo corporal).
3.3 Mantenha uma hierarquia do tipo consistente. Você só deve usar um punhado de tamanhos de fonte e um ou dois pesos de fonte para desenvolver hierarquia do tipo. Pense nas tags de cabeçalho HTML H1, H2, H3, etc. Você deve ter estilos visuais distintos para pelo menos quatro deles, usando variações de brilho, tamanho e peso para denotar a importância do texto. Para um ótimo exemplo de hierarquia de tipos, confira as diretrizes de interface humana da Apple.
[3.4] Mantenha o texto do seu corpo um peso normal e bem espaçado. O texto deve sempre ser legível; portanto, reserva fontes leves ou em negrito para cabeçalhos grandes ou casos em que o peso da fonte terá pouco impacto na legibilidade do texto. Além disso, mantenha sempre o espaçamento da linha do texto do seu corpo em 1,15 a 1,5 (dependendo do tamanho) para maximizar a legibilidade. Por exemplo, este artigo possui aproximadamente um espaçamento de linha REM de 1,5. Justificar os parágrafos do seu corpo também não dói.
3.1 Antecedentes corporais devem sempre ter sombra de cinza
Por que? Fundamentos coloridos, até cinzas muito escuros, podem facilmente criar uma tensão nos olhos. Para conteúdo importante, como o corpo de texto de uma página ou aplicativo da Web, os usuários cruciais podem ler e interpretar a página com facilidade.
3.3 Na maioria dos casos, use o texto em branco em qualquer imagem de imagem, colorida ou gradiente. Se necessário, aplique uma sombra de queda muito leve (<= 10% de opacidade) no texto.
Por que? O branco-escuro geralmente é mais atraente e mais atraente e mais fácil de criar variantes. Decidir sobre uma cor escura a ser usada contra um fundo colorido geralmente pode ser um desafio. No entanto, verifique se qualquer combinação de cores que você escolher também é acessível.
3.4 Nunca use negros absolutos.
Por que? O preto puro e opaco (#000) geralmente é muito duro para a maioria das páginas da web. Até a cor da fonte corporal do Github é #24292E, não #000. Em caso de dúvida, você pode usar os códigos hexadecimais numéricos em escala de cinza na Web ( #111, #222 ... #AAA, #BBB e assim por diante).
3.5 Certifique -se de que componentes coloridos não se bordam.
Por que? A menos que as cores sejam complementos muito fortes um do outro, muitas vezes o contraste de duas cores vizinhas podem criar uma sensação de polarização e divisão que quebre o fluxo da sua página. No caso de onde uma barra de navegação pode tocar em um herói colorido, opte por um fundo transparente de barbas de navegação.
Garanta consistência em todos os componentes. Depois de definir uma fonte de luz para sua página, verifique se todas as sombras seguem sua direção. Se a luz estiver "atingindo" sua página a 135 graus, toda sombra e gradiente devem cair a 135 graus. Use Shadows como uma ferramenta para apresentar hierarquia ou estado. As sombras devem ser usadas para destacar os componentes da página, fornecer estrutura de página ou descrever o estado. Por exemplo, você pode representar um botão é pressionado diminuindo sua elevação em vez de alterar sua cor. Muitas sombras podem apresentar muita dimensionalidade, portanto, tenha cuidado (por exemplo, não crie um site com 18 elevações únicas). O deslocamento da sua sombra deve ser igual a aproximadamente metade do raio do desfoque. Por exemplo, uma sombra com um deslocamento X / Y de 10px deve ter um raio de desfoque de aproximadamente 20px. Essa abordagem torna a sombra mais autêntica. Sempre mantenha a opacidade das sombras para menos de 25%. Erro no lado da sutileza para não prejudicar seu design. Se você estiver usando um fundo escuro, em alguns casos, pode ser necessário aumentar a opacidade da sua sombra para garantir sua visibilidade. As sombras nem sempre precisam ser negras. Ao usar sombras em superfícies coloridas, muitas vezes é vantajoso usar uma variante muito escura ou embotada da cor de fundo para melhorar a mistura da sombra.
