O dicionário visual de interfaces

Você já viu esse estilo.
Agora descubra o nome.

Reconheça a linguagem visual, entenda suas características e encontre as palavras para criar com ela.

Experimente:

Estilos visuais24

24 estilos para inspirar sua próxima interface

Efeito de vidro

Glassmorphism

Superfícies translúcidas deixam o fundo aparecer como se estivessem atrás de um vidro fosco.

Tendência visualbackdrop-filter: blur()

Neobrutalismo

Neobrutalism

Blocos de cor e contornos enfáticos produzem uma interface gráfica com poucas ambiguidades visuais.

Tendência visualborder + box-shadow

Minimalismo

Minimalism

Reduz elementos ao que contribui para o conteúdo e para a tarefa.

Abordagem visualspace + hierarchy

Design plano

Flat design

Usa formas simples e cores chapadas com pouca ou nenhuma simulação de profundidade.

Abordagem visualsolid fills

Neumorfismo

Neumorphism

Faz os controles parecerem moldados na própria superfície por meio de sombras suaves.

Tendência visualbox-shadow: inset

Eskeuomorfismo

Skeuomorphism

Traz para a interface características reconhecíveis de objetos físicos.

Abordagem visualmaterial metaphor

Volume de argila

Claymorphism

Explora volumes arredondados e macios que lembram peças modeladas.

Tendência visualborder-radius + shadows

Brutalismo da web

Web brutalism

Assume a estrutura e a materialidade da página, frequentemente com aparência crua e direta.

Rótulo informalsemantic HTML

Estilo suíço

International Typographic Style

Adapta para a interface o uso de grade, alinhamento e hierarquia tipográfica sistemática.

Movimento gráficogrid + typography

Geometria Bauhaus

Bauhaus-inspired

Usa geometria e relações entre forma, função e cor inspiradas na escola Bauhaus.

Referência históricageometric composition

Design editorial

Editorial design

Organiza texto e imagem com a cadência de uma publicação, dando destaque à leitura.

Abordagem visualtype scale + columns

Interface escura

Dark interface

Organiza a hierarquia sobre fundos escuros com níveis de superfície e contraste próprios.

Tratamento de corcolor-scheme: dark

Monocromático

Monochromatic

Constrói a composição com variações de uma mesma cor ou com uma escala neutra.

Tratamento de corsingle-hue scale

Duas cores

Duotone-inspired

Limita a direção visual a duas cores dominantes e suas relações de contraste.

Tratamento de cortwo-color palette

Gradientes

Gradient-led

Usa transições de cor como parte importante da identidade e da profundidade visual.

Tratamento visuallinear-gradient()

Terminal retrô

Retro terminal

Traz convenções visuais de terminais de texto para uma interface gráfica.

Referência de interfacemonospace + contrast

Pixel art e 8-bit

Pixel / 8-bit inspired

Usa formas em grade e bordas discretas que lembram gráficos de baixa resolução.

Referência visualimage-rendering: pixelated

Estética Y2K

Y2K digital

Reinterpreta imagens de tecnologia e futuro associadas à virada dos anos 2000.

Rótulo retrospectivometallic gradients

Frutiger Aero

Frutiger Aero

Combina motivos naturais e superfícies brilhantes em uma visão otimista de tecnologia.

Rótulo retrospectivogloss + gradients

Material Design

Material Design

Um sistema do Google que conecta componentes, movimento, cor e hierarquia de superfícies.

Sistema de designMaterial components

Fluent Design

Fluent Design

O sistema da Microsoft para criar experiências conectadas por componentes e princípios compartilhados.

Sistema de designFluent UI

Liquid Glass

Liquid Glass

Uma linguagem de materiais da Apple em que controles e navegação usam efeitos de vidro dinâmicos.

Linguagem da AppleApple materials

Alto contraste

High contrast

Prioriza diferenças perceptíveis e controles identificáveis, com suporte a preferências do sistema.

Estratégia de acessibilidadeforced-colors

Interface suave

Soft UI

Uma direção visual de cantos suaves, cores contidas e transições discretas entre superfícies.

Rótulo informallow-chroma surfaces
BIBLIOTECA UI / EXPLORAR