Estilos de design para apps e sites

O estilo visual muda o jeito como o seu produto é percebido. Aqui estão os mais usados e alguns bem menos óbvios, com o que são, de onde vieram, onde costumam aparecer e telas de exemplo em cores diferentes.

Conversar sobre meu projetoVer os estilos

Todas as telas de exemplo foram criadas para esta página. Marcas e dados são fictícios.

Os mais comuns

Estilos que você encontra todo dia em apps, sistemas e sites. Testados, fáceis de adaptar a qualquer marca e confortáveis para quem usa.

Minimalismo

Época: Desde os anos 1950, nas telas desde 2010

O minimalismo tira da tela tudo o que não ajuda a pessoa a entender ou agir. Ele se reconhece pelo espaço em branco generoso, pela hierarquia feita com tamanho e peso da fonte, por linhas finas no lugar de caixas e por uma única cor de destaque. Passa sensação de calma, clareza e sofisticação.

Um pouco de história

A ideia vem da arquitetura e do design industrial do século 20: a frase "menos é mais" é associada a Mies van der Rohe, e Dieter Rams resumiu sua obra na Braun como "menos, porém melhor". O Estilo Tipográfico Internacional, da Suíça dos anos 1950, levou essa disciplina de grid e tipografia para o design gráfico, e nas telas ela ganhou força com o design plano do início dos anos 2010.

Como reconhecer

  • Muito espaço em branco
  • Uma cor de destaque
  • Tipografia sem serifa
  • Linhas finas em vez de caixas
  • Ícones de traço fino

Onde costuma aparecer

  • Produtos SaaS e painéis
  • Lojas de produtos de design
  • Escritórios de arquitetura
  • Apps de bem-estar
  • Bancos digitais
Voltar ao índice
Telas de exemplo: Minimalismo

Flat design

Época: Desde 2010

O flat design tira da tela tudo o que imita objetos reais: nada de relevo, brilho, gradiente ou sombra. Sobram blocos de cor sólida, ícones de traço simples, ilustrações geométricas e tipografia sem serifa. O resultado é uma interface leve, alegre e fácil de ler, que carrega rápido e se adapta bem a qualquer tamanho de tela.

Um pouco de história

Ganhou força como reação ao skeuomorfismo, o estilo que imitava couro, madeira e papel nas interfaces. A linguagem Metro da Microsoft, no Windows Phone 7 (2010) e no Windows 8 (2012), e o iOS 7 da Apple (2013) levaram o visual chapado para bilhões de telas. A inspiração vem do estilo tipográfico suíço, com sua busca por clareza e grid.

Como reconhecer

  • Cores sólidas e saturadas
  • Sem sombras nem gradientes
  • Ícones simples de cor única
  • Ilustrações geométricas
  • Tipografia sem serifa

Onde costuma aparecer

  • Apps de consumo e delivery
  • Painéis administrativos
  • Sites institucionais e de cursos
  • Ilustrações e infográficos
Voltar ao índice
Telas de exemplo: Flat design

Material Design

Época: Desde 2014

O Material trata a tela como camadas de material que se sobrepõem, com sombra ou tom indicando o que está mais à frente. Tem componentes bem definidos, como botão de ação flutuante, chips, barra de navegação e cards, além de tipografia Roboto e ícones próprios. Passa sensação de produto organizado, previsível e familiar para quem usa Android ou serviços do Google.

Um pouco de história

Foi apresentado pelo Google na conferência Google I/O de 2014, com a metáfora do papel e da tinta: superfícies com sombras de elevação e cores fortes como índigo e rosa. Em 2021 veio o Material You, a terceira versão (Material 3), lançada com o Android 12, que gera a paleta a partir de uma cor-semente, usa cantos mais arredondados e troca boa parte das sombras por variações de tom.

Como reconhecer

  • Superfícies com elevação ou tom
  • Botão de ação flutuante (FAB)
  • Paleta tonal gerada por uma cor
  • Cantos arredondados e chips
  • Fonte Roboto e Material Symbols

Onde costuma aparecer

  • Apps Android
  • Sistemas internos e painéis
  • Produtos SaaS
  • Apps de banco e serviços
Voltar ao índice
Telas de exemplo: Material Design

Glassmorphism

Época: Desde 2020

Glassmorphism é o estilo em que cartões, menus e barras parecem placas de vidro fosco: deixam passar a cor do fundo, mas desfocada. Reconhece-se pelo desfoque por trás dos painéis, pela borda fina e clara que imita a aresta do vidro e pelas formas coloridas que ficam atrás de tudo. Passa uma sensação moderna, leve e premium, com profundidade sem peso.

Um pouco de história

A ideia de interface translúcida vem do Aero do Windows Vista (2007) e ganhou força no iOS 7 (2013), no Fluent Design da Microsoft (2017) e no macOS Big Sur (2020). O nome "glassmorphism" foi popularizado no fim de 2020 pelo designer Michał Malewicz, quando o efeito virou tendência no Dribbble. Em 2025 a Apple levou a ideia adiante com o Liquid Glass.

Como reconhecer

  • Painéis translúcidos com desfoque do fundo
  • Borda fina e clara nos cartões
  • Formas coloridas e vivas atrás do vidro
  • Cantos bem arredondados e sombras suaves

Onde costuma aparecer

  • Apps de finanças e cartões digitais
  • Painéis de casa inteligente e IoT
  • Players de música e apps de mídia
  • Sites de turismo e hotelaria
  • Landing pages de produtos de tecnologia
Voltar ao índice
Telas de exemplo: Glassmorphism

Bento grid

Época: Desde 2022

O conteúdo é dividido em blocos independentes, cada um com uma única informação ou função, e o tamanho do bloco mostra o que é mais importante. Os cantos são bem arredondados, o espaço entre os blocos é sempre igual e cada bloco pode ter cor própria. Passa organização e clareza: dá para entender a tela inteira numa olhada.

Um pouco de história

O nome vem da caixa de refeição japonesa (bentô), dividida em compartimentos. A ideia de telas em blocos já aparecia no Metro, a linguagem visual da Microsoft para o Windows Phone (2010) e o Windows 8 (2012). O formato bento ganhou força a partir de 2022, quando apresentações e páginas de produtos de tecnologia passaram a resumir recursos em grades de blocos, e virou padrão em landing pages e painéis.

Como reconhecer

  • Blocos de tamanhos variados numa grade
  • Cantos bem arredondados
  • Espaçamento igual entre os blocos
  • Uma ideia por bloco, com número ou ícone grande
  • Cores diferentes para destacar blocos

Onde costuma aparecer

  • Landing pages de produtos e apps
  • Painéis e dashboards
  • Startups e produtos SaaS
  • Portfólios e páginas pessoais
  • Lojas que destacam vários produtos
Voltar ao índice
Telas de exemplo: Bento grid

Neo-brutalismo

Época: Desde 2020

O neo-brutalismo pega a crueza do brutalismo web e a deixa amigável: blocos de cor saturada, contorno preto em tudo e uma sombra dura que faz botões e cartões parecerem recortes colados na tela. A tipografia é grande e pesada, e detalhes como adesivos girados dão um tom bem-humorado. Passa a sensação de produto jovem, direto e confiante.

Um pouco de história

O estilo ganhou força por volta de 2020 e 2021, quando produtos digitais como o Gumroad redesenharam seus sites com bordas pretas e cores vibrantes, e logo virou tendência em portfólios e comunidades de design. O nome faz referência ao brutalismo web dos anos 2010, mas troca a aparência crua por uma composição organizada e colorida.

Como reconhecer

  • Bordas pretas grossas
  • Sombra sólida deslocada
  • Cores chapadas e saturadas
  • Tipografia pesada e grande
  • Elementos em forma de adesivo

Onde costuma aparecer

  • Startups e produtos SaaS
  • Apps para público jovem
  • Lojas online de marcas independentes
  • Cursos e educação online
  • Portfólios criativos
Voltar ao índice
Telas de exemplo: Neo-brutalismo

Gradientes e aurora

Época: Desde 2021

No estilo aurora, o fundo é feito de manchas grandes de cor que se misturam num degradê suave, quase sempre sobre fundo escuro. O resto da interface fica sóbrio: tipografia limpa, cartões discretos, títulos com gradiente e pequenos brilhos em botões, bordas e gráficos. A sensação é de tecnologia, novidade e um certo mistério, sem perder a leitura.

Um pouco de história

Os gradientes voltaram com força em meados da década de 2010, depois de anos de design chapado; o novo ícone do Instagram, em 2016, é um marco dessa volta. Por volta de 2021 o visual de manchas desfocadas ganhou o apelido de "Aurora UI" em comunidades de design. Com a onda de produtos de inteligência artificial a partir de 2023, virou quase a assinatura visual de sites de startups.

Como reconhecer

  • Manchas de cor grandes e desfocadas
  • Fundo escuro com brilhos (glow)
  • Títulos com texto em gradiente
  • Granulação sutil sobre o degradê

Onde costuma aparecer

  • Produtos de inteligência artificial
  • Startups e produtos SaaS
  • Bancos digitais e fintechs
  • Apps de bem-estar e meditação
  • Lançamentos de produto e eventos de tecnologia
Voltar ao índice
Telas de exemplo: Gradientes e aurora

Neumorfismo

Época: Desde 2020

No neumorfismo, quase tudo tem a mesma cor do fundo e se destaca só pela luz: uma sombra clara de um lado e uma escura do outro fazem o elemento saltar ou afundar, como plástico moldado. O resultado é calmo, macio e muito limpo. O ponto fraco é o contraste baixo, por isso funciona melhor com poucos elementos, textos fortes e uma cor de destaque para o que importa.

Um pouco de história

O nome vem de "new skeuomorphism" e surgiu no fim de 2019, quando concepts como o app de banco do designer Alexander Plyuto viralizaram no Dribbble. Em 2020 virou febre em portfólios e concepts, mas as dificuldades de acessibilidade limitaram o uso em produtos reais, onde aparece mais em detalhes do que na tela inteira.

Como reconhecer

  • Elementos da mesma cor do fundo
  • Sombra dupla: clara e escura
  • Botões que saltam ou afundam
  • Cantos bem arredondados
  • Uma única cor de destaque

Onde costuma aparecer

  • Casa inteligente e controles
  • Players de música e áudio
  • Apps de finanças pessoais
  • Relógios e dispositivos vestíveis
  • Concepts e portfólios de UI
Voltar ao índice
Telas de exemplo: Neumorfismo

Claymorphism

Época: Desde 2021

No claymorphism, cartões, botões e ícones parecem modelados em massinha: cantos muito arredondados, um brilho claro por dentro no topo, uma sombra interna embaixo e uma sombra externa colorida que faz tudo flutuar. Costuma vir acompanhado de ilustrações 3D fofas e paleta pastel. Passa uma sensação lúdica, amigável e acessível, sem os problemas de contraste do neumorfismo, porque cada elemento pode ter cor própria.

Um pouco de história

O termo ganhou força por volta de 2021, no Dribbble e em artigos de design, como resposta mais colorida ao neumorfismo e ao glassmorphism. Ele surfou na popularidade das ilustrações e ícones 3D feitos em ferramentas como o Blender, que deixaram de ser caros de produzir e se espalharam por sites de startups, apps infantis e produtos de consumo.

Como reconhecer

  • Formas infladas e bem arredondadas
  • Sombra interna clara e escura
  • Sombra externa colorida e macia
  • Cores pastel
  • Ilustrações e ícones 3D fofos

Onde costuma aparecer

  • Apps e plataformas infantis
  • Delivery e apps de consumo
  • Fintechs com público jovem
  • Pet shops e serviços do dia a dia
  • Sites de startups e lançamentos
Voltar ao índice
Telas de exemplo: Claymorphism

Skeuomorfismo

Época: 2007 a 2013

O skeuomorfismo copia a aparência de objetos físicos para que a pessoa entenda a tela pelo que já conhece: a agenda tem capa de couro, o bloco de notas é pautado e o volume é um botão giratório de metal. Texturas, brilhos, sombras e texto em baixo-relevo dão uma sensação tátil, acolhedora e artesanal. Exige mais trabalho de arte e envelhece rápido quando usado sem critério, por isso hoje aparece mais em produtos que querem nostalgia, luxo ou personalidade.

Um pouco de história

Foi a linguagem dominante dos smartphones e computadores pessoais entre o lançamento do iPhone, em 2007, e 2013, com apps de estante de madeira, mesas de feltro e calendários de couro. O redesenho do iOS 7, em 2013, trocou tudo isso pelo design plano e marcou o fim da era. O estilo continua vivo em apps de música, jogos e marcas que querem parecer objeto de colecionador.

Como reconhecer

  • Texturas de couro, madeira e metal
  • Botões com brilho de plástico
  • Texto gravado em baixo-relevo
  • Botões giratórios e mostradores
  • Sombras realistas e costuras

Onde costuma aparecer

  • Apps de música e áudio
  • Jogos e apps infantis
  • Marcas de luxo e artesanais
  • Ferramentas que imitam objetos
  • Projetos com apelo nostálgico
Voltar ao índice
Telas de exemplo: Skeuomorfismo

Os menos comuns

Estilos com personalidade forte. Funcionam muito bem quando a marca quer ser lembrada e pedem mais cuidado com leitura e acessibilidade.

Bauhaus

Época: Anos 1920

O estilo Bauhaus monta a tela com formas geométricas puras, como círculo, quadrado, triângulo e meio círculo, em cores chapadas: vermelho, amarelo, azul e preto sobre fundo claro. A tipografia é geométrica e sem serifa, muitas vezes toda em minúsculas, e os blocos se organizam de forma assimétrica com fios grossos. Passa uma sensação criativa, artesanal e ao mesmo tempo racional.

Um pouco de história

Vem da Staatliches Bauhaus, escola fundada por Walter Gropius em Weimar em 1919, que depois funcionou em Dessau (1925) e Berlim, até fechar em 1933 sob pressão do regime nazista. Professores como Wassily Kandinsky, Paul Klee, Josef Albers e László Moholy-Nagy uniram arte, artesanato e indústria. Herbert Bayer criou em 1925 o alfabeto universal, só em minúsculas, que ajudou a definir a tipografia do movimento.

Como reconhecer

  • Círculos, quadrados e triângulos
  • Vermelho, amarelo e azul com preto
  • Tipografia geométrica, muitas vezes em minúsculas
  • Composição assimétrica em blocos
  • Fios grossos e cantos retos

Onde costuma aparecer

  • Escolas, ateliês e cursos criativos
  • Teatros, museus e eventos culturais
  • Lojas de design e decoração
  • Marcas de café, música e gastronomia
Voltar ao índice
Telas de exemplo: Bauhaus

Art déco

Época: Anos 1920 e 1930

O art déco aplica à interface a elegância geométrica do entreguerras. Ele se reconhece pela composição simétrica, pelos leques de raios, arcos escalonados e padrões de escamas, pelas molduras de linha dupla e pelo dourado sobre cores profundas como preto, esmeralda, azul-noite e bordô. Passa sensação de glamour, tradição e exclusividade.

Um pouco de história

O nome vem da Exposição Internacional de Artes Decorativas e Industriais Modernas, realizada em Paris em 1925, e o estilo dominou arquitetura, cartazes e objetos até o fim dos anos 1930. O Edifício Chrysler, em Nova York (1930), e o Cristo Redentor, no Rio de Janeiro (1931), são exemplos famosos. Hoje ele volta em marcas de hotelaria, bebidas e perfumaria que querem transmitir luxo com história.

Como reconhecer

  • Simetria e eixo central
  • Leques de raios e arcos escalonados
  • Dourado sobre cores profundas
  • Molduras de linha dupla
  • Letras geométricas em caixa alta

Onde costuma aparecer

  • Hotéis e restaurantes
  • Perfumarias e joalherias
  • Bancos privados
  • Cinemas, teatros e eventos
  • Marcas de bebidas
Voltar ao índice
Telas de exemplo: Art déco

Estilo Suíço

Época: Anos 1950

O Estilo Suíço organiza tudo sobre um grid modular e deixa a tipografia fazer o trabalho visual: títulos grandes em fonte grotesca, texto alinhado à esquerda, fios pretos e muito espaço vazio. Usa poucas cores, quase sempre preto, branco e um tom forte como o vermelho, e prefere formas geométricas a ornamentos. Passa clareza, rigor e confiança, com cara de instituição séria e bem desenhada.

Um pouco de história

Nasceu na Suíça nos anos 1950, nas escolas de design de Zurique e Basileia, com nomes como Josef Müller-Brockmann, Armin Hofmann e Emil Ruder. Em 1957 surgiram as fontes Helvetica, de Max Miedinger, e Univers, de Adrian Frutiger, que viraram símbolo do movimento. A revista Neue Grafik (1958-1965) espalhou as ideias pelo mundo, e o estilo segue como base de sinalização, identidade corporativa e design de interfaces.

Como reconhecer

  • Grid modular evidente
  • Grotesca sem serifa em tamanhos extremos
  • Texto alinhado à esquerda
  • Layout assimétrico com fios
  • Preto, branco e uma cor forte

Onde costuma aparecer

  • Museus e instituições culturais
  • Revistas e sites editoriais
  • Sinalização e transporte
  • Marcas de design e arquitetura
Voltar ao índice
Telas de exemplo: Estilo Suíço

Editorial

Época: Nas telas desde os anos 2010

O estilo editorial organiza a interface como uma página de revista. Ele se reconhece pelos títulos serifados enormes, pelo grid de colunas separado por fios finos, pelas capitulares, pelas citações em destaque e pelo forte contraste de tamanho entre manchete e texto. Passa sensação de conteúdo cuidado, autoral e com credibilidade.

Um pouco de história

O estilo vem do design de revistas impressas do século 20, em que diretores de arte como Alexey Brodovitch, na Harper's Bazaar entre 1934 e 1958, usavam tipografia grande e espaço em branco como parte da composição. Na web, ganhou força com os artigos com direção de arte do início dos anos 2010 e com o CSS Grid, que chegou aos navegadores em 2017 e facilitou layouts de revista.

Como reconhecer

  • Títulos serifados grandes
  • Grid de colunas com fios
  • Capitulares e citações em destaque
  • Retrancas acima das manchetes
  • Contraste forte de tamanhos

Onde costuma aparecer

  • Revistas e portais de notícias
  • Blogs e newsletters
  • Marcas de moda
  • Imobiliárias de alto padrão
  • Apps de receitas e cultura
Voltar ao índice
Telas de exemplo: Editorial

Retrô computação / terminal

Época: Anos 1970 a 1990

A tela parece um computador dos anos 1970 a 1990: texto monoespaçado brilhando como fósforo de monitor CRT, menus com teclas de atalho, barras de seleção em vídeo invertido, molduras de linha dupla do DOS ou janelas em preto e branco dos primeiros sistemas gráficos. Passa nostalgia, precisão técnica e um humor de quem entende de tecnologia.

Um pouco de história

Os terminais de vídeo dos anos 1970, como o VT100 da DEC (1978), mostravam só texto, e os monitores de fósforo verde e âmbar foram comuns até os anos 1980. Nos anos 1980 e 1990 vieram os programas de modo texto do MS-DOS, os BBS acessados por modem, com arte ANSI colorida, e as janelas de 1 bit do primeiro Macintosh (1984). Hoje a estética volta em ferramentas para desenvolvedores, sites de jogos independentes e marcas que querem um ar nerd e divertido.

Como reconhecer

  • Fonte monoespaçada em toda a tela
  • Brilho de fósforo e linhas de varredura
  • Arte ASCII e letreiros em blocos
  • Menus com teclas de atalho e vídeo invertido
  • Paletas limitadas: verde, âmbar, azul DOS ou 1 bit

Onde costuma aparecer

  • Ferramentas e produtos para desenvolvedores
  • Cursos e comunidades de programação
  • Jogos independentes e sites de games
  • Portfólios de quem trabalha com tecnologia
  • Campanhas com tom nostálgico e divertido
Voltar ao índice
Telas de exemplo: Retrô computação / terminal

Pixel art (8-bit)

Época: Anos 1980

A pixel art desenha tudo com quadradinhos visíveis: letras, ícones, ilustrações e até os cantos das caixas, que viram degraus. As paletas são curtas, como nos consoles antigos, e elementos de jogo entram na interface como barras de vida, pontos de experiência, moedas e inventário. Passa nostalgia, bom humor e uma sensação de brincadeira que funciona bem até em apps sérios, como finanças e tarefas.

Um pouco de história

O visual nasceu da limitação técnica dos computadores e consoles do fim dos anos 1970 e dos anos 1980, como o Atari 2600, o NES e o Game Boy, que tinham pouca resolução e poucas cores. Depois de os gráficos 3D dominarem os jogos, a estética voltou como escolha artística nos jogos independentes a partir dos anos 2000 e 2010, e passou para sites, marcas e interfaces.

Como reconhecer

  • Fontes pixeladas
  • Bordas em degraus
  • Paleta curta de cores
  • Ícones desenhados pixel a pixel
  • Elementos de jogo (XP, moedas, vida)

Onde costuma aparecer

  • Jogos e comunidades gamer
  • Apps de hábitos e produtividade
  • Educação financeira e gamificação
  • Lojas e marcas com tom nostálgico
  • Campanhas e eventos de tecnologia
Voltar ao índice
Telas de exemplo: Pixel art (8-bit)

Memphis

Época: Anos 1980

O Memphis mistura círculos, triângulos, rabiscos ondulados e padrões de bolinhas ou listras em cores fortes que normalmente não andariam juntas. Na interface, essas formas flutuam ao redor do conteúdo e ajudam a destacar títulos, cartões e botões. Passa uma sensação divertida, ousada e cheia de energia, com um pé na nostalgia oitentista.

Um pouco de história

O nome vem do Memphis Group, coletivo de design e arquitetura fundado em Milão em 1981 por Ettore Sottsass, que criava móveis e objetos coloridos e provocativos, contra o bom gosto minimalista da época. A estética marcou os anos 80 na moda, na TV e nas embalagens, e voltou a aparecer em interfaces, ilustrações e identidades visuais a partir da década de 2010.

Como reconhecer

  • Formas geométricas soltas
  • Rabiscos ondulados e zigue-zagues
  • Padrões de bolinhas e listras
  • Cores vibrantes em combinações ousadas
  • Confete espalhado

Onde costuma aparecer

  • Festivais e eventos
  • Marcas infantis e de entretenimento
  • Lojas de papelaria, presentes e moda
  • Apps de música e lazer
  • Campanhas sazonais
Voltar ao índice
Telas de exemplo: Memphis

Cyberpunk / neon

Época: Anos 1980, forte desde 2020

Imita as telas de sistema dos filmes e jogos de ficção científica: fundo escuro, cores neon que parecem brilhar, linhas de varredura de monitor e títulos com efeito glitch. Os cantos são chanfrados em vez de arredondados, os dados aparecem em fonte monoespaçada e os painéis têm cantoneiras de HUD. Passa tecnologia, velocidade e uma certa rebeldia.

Um pouco de história

O cyberpunk nasceu na ficção científica dos anos 1980, com o filme Blade Runner (1982) e o livro Neuromancer, de William Gibson (1984), que imaginavam cidades noturnas, chuvosas e cheias de letreiros. A estética passou para animes como Akira (1988) e Ghost in the Shell (1995), para filmes como Matrix (1999) e para videogames, como Cyberpunk 2077 (2020), que popularizou o amarelo-alerta com ciano. Na web, aparece em sites de jogos, eventos e produtos de tecnologia.

Como reconhecer

  • Fundo escuro com neon brilhante
  • Cantos chanfrados e molduras de HUD
  • Efeito glitch e linhas de varredura
  • Dados em fonte monoespaçada
  • Tipografia técnica e condensada

Onde costuma aparecer

  • Jogos e torneios de e-sports
  • Lojas de hardware e periféricos
  • Eventos de música eletrônica
  • Ferramentas de segurança e infraestrutura
  • Apps de música e entretenimento noturno
Voltar ao índice
Telas de exemplo: Cyberpunk / neon

Y2K

Época: 1997 a 2004, com retorno desde 2020

Y2K é o visual otimista e brilhante do fim dos anos 1990 e começo dos 2000, quando o ano 2000 representava "o futuro". Reconhece-se pelo texto e pelas superfícies cromadas, gradientes holográficos, estrelinhas de quatro pontas, formas de bolha, grades em perspectiva, detalhes em pixel e fontes largas e futuristas. A sensação é divertida, ousada e nostálgica, com um pé na ficção científica e outro na cultura pop.

Um pouco de história

O nome vem de "Y2K", abreviação em inglês de ano 2000, a mesma do famoso bug do milênio. A estética marcou clipes, revistas, games, sites e aparelhos entre o fim dos anos 1990 e meados dos 2000, como o iMac G3 (1998) com seu plástico colorido translúcido. Por volta de 2020 o estilo voltou com força na moda e nas redes sociais, e desde então reaparece em marcas, capas de disco e interfaces.

Como reconhecer

  • Texto e superfícies cromadas
  • Gradientes holográficos e iridescentes
  • Estrelinhas de quatro pontas e bolhas
  • Fontes largas e futuristas
  • Plástico colorido translúcido

Onde costuma aparecer

  • Moda, beleza e acessórios
  • Festas, festivais e eventos de música
  • Apps e campanhas para o público jovem
  • Lançamentos de artistas e capas de disco
  • Marcas que querem um ar retrô e divertido
Voltar ao índice
Telas de exemplo: Y2K

Frutiger Aero

Época: 2004 a 2013

Frutiger Aero é o visual "molhado" e luminoso que dominou softwares, celulares e sites entre meados dos anos 2000 e o começo dos 2010. Reconhece-se pelo céu azul com nuvens, gramados, gotas e bolhas, botões em gel com metade de cima mais clara, vidro translúcido, reflexos espelhados e tipografia humanista limpa. Passa uma sensação de tecnologia amigável, natureza limpa e otimismo com o futuro.

Um pouco de história

O visual tem raízes no Aqua do Mac OS X (2001) e chegou ao auge com o Aero do Windows Vista (2007) e do Windows 7 (2009), além de celulares e aparelhos de música da época. Perdeu espaço por volta de 2012 e 2013, com a chegada do design chapado no Windows 8 e no iOS 7. O nome "Frutiger Aero", que junta a fonte Frutiger ao Aero do Windows, foi criado em 2017 e popularizado depois por comunidades online de estética, como o Consumer Aesthetics Research Institute.

Como reconhecer

  • Céu azul, nuvens, gramado e água
  • Botões em gel com brilho na metade de cima
  • Bolhas, gotas e reflexos espelhados
  • Molduras de vidro translúcido
  • Ícones coloridos e lustrosos

Onde costuma aparecer

  • Projetos com apelo nostálgico
  • Marcas ligadas à água, natureza e limpeza
  • Turismo e lazer
  • Jogos e apps para o público jovem
  • Campanhas e eventos com tema retrô
Voltar ao índice
Telas de exemplo: Frutiger Aero

Vaporwave

Época: Desde 2010

Mistura de propósito símbolos de luxo antigo com computação velha: estátuas de mármore, palmeiras e colunas gregas ao lado de janelas cinzas em relevo, letreiros cromados e Times New Roman em itálico. As cores são rosa, lilás e ciano em degradê, com sol listrado no horizonte e chão quadriculado em perspectiva. Passa nostalgia, ironia e um clima de sonho de shopping center.

Um pouco de história

O vaporwave surgiu como gênero musical na internet por volta de 2010 a 2012, com faixas que desaceleravam músicas de elevador e comerciais dos anos 1980 e 1990, como no álbum Floral Shoppe, de Macintosh Plus (2011), cuja capa tem um busto clássico. A estética visual se espalhou pelo Tumblr e por fóruns, reaproveitando gráficos de sistemas operacionais antigos, propaganda e textos em japonês. Depois passou para moda, capas de discos, games e campanhas de marcas que querem um tom retrô e bem-humorado.

Como reconhecer

  • Degradê rosa, lilás e ciano
  • Sol listrado e chão quadriculado em perspectiva
  • Estátuas clássicas, colunas e palmeiras
  • Janelas de sistema antigo com bordas em relevo
  • Letreiros cromados, Times em itálico e katakana

Onde costuma aparecer

  • Marcas de bebida, moda e produtos jovens
  • Rádios, playlists e apps de música
  • Lojas e campanhas de verão
  • Festas, eventos e capas de disco
  • Projetos com tom irônico e nostálgico
Voltar ao índice
Telas de exemplo: Vaporwave

Brutalismo

Época: Desde 2014

O brutalismo web assume a estrutura da página em vez de escondê-la. Fontes padrão como Times e Courier, links azuis sublinhados, botões do próprio navegador, tabelas com bordas finas e títulos enormes ao lado de textos minúsculos. O resultado parece rápido, honesto e um pouco desconfortável, e por isso chama atenção.

Um pouco de história

O nome vem da arquitetura brutalista, que usava concreto aparente ("béton brut", em francês) a partir dos anos 1950, com Le Corbusier como referência. Na web, o termo ficou popular por volta de 2014 e 2016, quando o designer Pascal Deville reuniu exemplos no site Brutalist Websites, como reação aos sites padronizados feitos a partir de templates.

Como reconhecer

  • Fontes padrão do sistema
  • Links azuis sublinhados
  • Grids e tabelas com bordas finas
  • Títulos gigantes e assimetria
  • Cores puras e sem sombra

Onde costuma aparecer

  • Portfólios de arquitetos e artistas
  • Revistas e editoras independentes
  • Lojas de nicho e selos musicais
  • Sistemas internos simples
  • Sites de eventos culturais
Voltar ao índice
Telas de exemplo: Brutalismo

Orgânico

Época: Nas telas desde o fim dos anos 2010

O estilo orgânico troca os retângulos rígidos por formas que parecem desenhadas à mão. Ele se reconhece pelos blobs e curvas, cantos bem arredondados e assimétricos, divisões em onda, paletas de terra, folhas e argila, e uma leve textura de papel. Passa sensação de acolhimento, calma e proximidade com o natural.

Um pouco de história

A ideia de um design que imita a natureza é antiga: Frank Lloyd Wright defendia a "arquitetura orgânica" no início do século 20, e o Museu de Arte Moderna de Nova York promoveu o concurso "Organic Design in Home Furnishings" em 1940, vencido por Charles Eames e Eero Saarinen. Nas telas, ganhou força no fim dos anos 2010, quando formas fluidas, ilustrações e tons terrosos passaram a suavizar as interfaces planas e geométricas.

Como reconhecer

  • Formas fluidas (blobs)
  • Tons terrosos e naturais
  • Cantos arredondados e assimétricos
  • Textura de papel
  • Ilustrações botânicas

Onde costuma aparecer

  • Cafés e restaurantes
  • Cosméticos naturais
  • Bem-estar, yoga e saúde
  • Pousadas e turismo
  • Alimentos orgânicos
Voltar ao índice
Telas de exemplo: Orgânico

Desenhado à mão

Época: Desde 2008

No estilo desenhado à mão, caixas, botões e ícones têm contorno irregular, as fontes imitam letra de gente e a página ganha setas, sublinhados, marca-texto e anotações nas margens. O fundo costuma ser papel pautado, quadriculado ou quadro-negro. Passa uma sensação pessoal, próxima e bem-humorada; o cuidado está em manter a leitura fácil e não exagerar no texto manuscrito em blocos longos.

Um pouco de história

O visual de esboço ficou conhecido em software com o Balsamiq Mockups, lançado em 2008, que desenhava protótipos de propósito com cara de rascunho para não parecerem prontos. Em 2020, o Excalidraw popularizou diagramas e quadros com traço manual, e o estilo passou a aparecer em sites de marcas pequenas, produtos educativos e ferramentas criativas que querem soar humanas.

Como reconhecer

  • Contornos tremidos e cantos desiguais
  • Fontes manuscritas
  • Setas, rabiscos e marca-texto
  • Sombra hachurada em vez de desfoque
  • Fundo de papel ou quadro-negro

Onde costuma aparecer

  • Negócios artesanais e locais
  • Educação e cursos
  • Apps de diário e hábitos
  • Ferramentas de quadro e ideias
  • Marcas com tom pessoal
Voltar ao índice
Telas de exemplo: Desenhado à mão

Contato

Gostou de algum estilo?

Me diga qual estilo chamou sua atenção e o que você quer construir. O jeito mais rápido é pelo WhatsApp, mas o formulário e o e-mail também funcionam.

WhatsApp · +55 18 99171-4553
RedesLinkedInGitHubYouTube

Ou deixe uma mensagem