Descubra A Regra De 3 Secreta Das Interfaces Dark Mode
Neste artigo vamos revelar a regra de 3 secreta utilizado por muitos Web Designers, UI Designer e Programadores Web para criar interfaces Dark Mode.
Caso você não saiba o Dark Mode nada mais é do que um tema escuro.
E neste caso precisamos entender muito bem como funciona essa regra de 3 para que a interface fique com uma cara moderna e profissional.
Ou seja, entendendo isso com certeza suas interfaces Dark vão ficar excelentes. Vamos lá?
Confira neste artigo:
Cores principais
Primeiramente devemos escolher 3 cores principais para a nossa interface.
Ou seja, essas cores ficarão mais destacadas dentro da nossa interface para que o usuário consiga ver de fato o que pode ser feito dentro dela.
Por exemplo:
- #FF0043
- #FAFAFA
- #535353
Cores dark
Agora que já escolhemos as cores principais, agora é a hora de escolher as cores dark.
Essas cores vão compor toda a interface e diferenciar cada sessão dela.
Por exemplo:
- #100F10
- #1B1B1B
- #242424
Cores de fontes
Neste momento precisamos definir 3 cores de fontes para que o usuário consiga entender quais palavras estão ativadas ou desativadas.
Além disso, precisamos definir o tamanho das fontes em 3 sessões com 3 medidas conforme apresentado abaixo:
3 tamanhos pequenos
- 0.375rem (6px)
- 0.625rem (10px)
- 0.875rem (14px)
3 tamanhos médios
- 1rem (16px)
- 1.375rem (22px)
- 1.75rem (28px)
3 tamanhos grandes
- 2.5rem (40px)
- 3.5rem (56px)
- 4.5rem (72px)
Essa variação de tamanho vai te ajudar a definir o que é título, sub-titulo e paragrafo.
Implementação
Por fim, basta implementar tudo o que foi definido na sua interface Front-End.
Você pode criar Painel de Controle, Páginas Web, Aplicativos e muito mais utilizando essa técnica de interfaces dark mode.
Conclusão: Regra de 3
Em conclusão, vimos neste artigo que é muito simples implementar a regra de 3 para desenvolver interfaces dark da forma correta.
O segredo para alcançar o topo da sua carreira na área da tecnologia está a um clique de distância. Toque no botão abaixo agora mesmo e mergulhe em mais de 1400 cursos completos, todos com certificados de peso.
Enfim, espero que tenha gostado deste conteúdo pois preparamos ele para realmente te ajudar em seus estudos sobre desenvolvimento de software.
Eu vou ficando por aqui…
Até a próxima e um forte abraço!
Escrito por
David AlvesDesenvolvedor de automação e IA
Sou David Alves, desenvolvedor desde 2009 e criador do Programador Viking. Hoje utilizo Python, Playwright e inteligência artificial para gerar resultados reais para empresas que querem automatizar tarefas, e sou responsável pelo setor de RPA de uma grande indústria de borracha. Desde 2019, compartilho aqui o que aprendo na prática para ajudar quem está começando na programação.
