Vibulário
Menu
Aparência e idioma
Termos por tópico · 50 guias

Design

Aprenda como tornar as telas claras, consistentes, fáceis de usar e abertas a todos.

01 / Atlas

Todos os termos de Design

Abrir um termo para um significado simples, um exemplo, quando usá-lo, quão oficial ele é, e seu nome de código.

  2. 02 · Mais detalhes

    Affordance Affordance

    Uma "dica de uso" (Affordance) é um sinal visual ou físico que mostra como usar um objeto.

  4. 04 · Mais detalhes

    Aqua Aqua

    Aqua é um estilo de interface brilhante ligado aos primeiros macOS. Ele usa controles que brilham, profundidade gelatinosa, listras finas e detalhes em azul vivo.

  5. 05 · Centro

    Borda Arredondada em CSS CSS Border Radius

    O border-radius em CSS cria cantos arredondados usando elipses de quarto de círculo com raios horizontais e verticais. Ele altera a pintura e o recorte, mas não o tamanho do layout da caixa, e não cria um squircle matemático.

  7. 07 · Mais detalhes

    Brutalismo Web Web Brutalism

    O brutalismo web é um estilo de web cru. Mostra a estrutura, padrões do navegador, tipografia simples e aspereza planejada em vez do polimento usual.

  8. 08 · Mais detalhes

    Canto Squircle do CSS CSS Squircle Corner

    No rascunho do CSS Borders Nível 4, squircle é um valor de forma de canto para uma superelipse convexa entre arredondado e quadrado. Equivale a superellipse(2), precisa de um raio de borda diferente de zero e ainda exige uma verificação de suporte do navegador.

  9. 09 · Mais detalhes

    Claymorphism Claymorphism

    Claymorphism é um estilo divertido com formas infladas e cantos arredondados. Sombras suaves e cores pastel fazem parecer argila.

  10. 10 · Centro

    Componente Component

    Um Componente é uma parte reutilizável de uma interface com estrutura, comportamento, estados e limites claros.

  11. 11 · Centro

    Contraste de Cores Color Contrast

    Contraste de Cores é a diferença de luz medida entre o conteúdo e o fundo perto dele. Ele mostra se os textos e bordas principais são fáceis de ver.

  12. 12 · Centro

    Design de Material Material Design

    Design de Material é um sistema para componentes e interações. Ele utiliza superfícies em camadas, movimento com propósito, layouts flexíveis e tokens de design compartilhados.

  13. 13 · Centro

    Design Editorial Editorial Design

    O design editorial organiza uma história através do ritmo de leitura, tipo, imagens, legendas e padrões de página que se repetem.

  14. 14 · Centro

    Design Orgânico Organic Design

    O Design Orgânico segue formas encontradas na natureza. Ele usa curvas irregulares, texturas táteis, cores naturais e layouts menos mecânicos.

  15. 15 · Centro

    Design Plano Flat Design

    Design plano usa formas simples, cores sólidas e áreas planas claras, com pouca profundidade falsa.

  17. 17 · Mais detalhes

    Digite Escala Type Scale

    Uma Type Scale é um conjunto pequeno e planejado de tamanhos de texto e alturas de linha.

  20. 20 · Centro

    E-commerce Direct-to-Consumer DTC E-commerce

    O comércio eletrônico DTC permite que uma marca venda diretamente aos consumidores. Ele cobre descoberta, escolhas de produtos, pagamento, entrega e suporte pós-venda.

  21. 21 · Mais detalhes

    Ecomorfismo Skeuomorphism

    O ecomorfismo copia objetos reais familiares para explicar um controle digital. Ele também pode copiar seus materiais.

  24. 24 · Centro

    Estado da interação Interaction State

    Um Estado de Interação mostra a condição atual de um controle. Exemplos incluem padrão, passar o mouse, foco, clicado, desativado, carregando, erro e sucesso.

  25. 25 · Mais detalhes

    Estética Digital Y2K Y2K Digital Aesthetic

    Esta estética digital é um estilo retro-futuro da cultura digital do final dos anos 1990 e início dos anos 2000. Frequentemente usa cromo, pixels, gradientes brilhantes e detalhes de computador divertidos.

  26. 26 · Centro

    Estética do Terminal Terminal Aesthetic

    A Estética Terminal toma emprestado das telas de linha de comando. Ela usa texto monoespaçado, hierarquia rígida, sinais de prompt, poucas cores e status claro.

  27. 27 · Mais detalhes

    Estilo Memphis Memphis Style

    Estilo Memphis é um visual ousado pós-moderno. Ele usa formas fortes, cores que se chocam, padrões, equilíbrio desigual e energia divertida.

  28. 28 · Mais detalhes

    Estilo Suíço Swiss Style

    O Estilo Suíço usa grades claras e layouts irregulares, mas equilibrados. Também usa tipografia sem serifa, fotos e uma ordem visual rigorosa.

  29. 29 · Mais detalhes

    Frutiger Aero Frutiger Aero

    Frutiger Aero é um estilo esperançoso dos meados dos anos 2000. Ele mistura interfaces brilhantes com céus azuis, água, plantas verdes, bolhas e tecnologia com aparência amigável.

  30. 30 · Mais detalhes

    Glassmorphism Glassmorphism

    Glassmorphism é um estilo visual com superfícies claras em camadas. Ele usa desfoque, bordas leves e uma pequena sensação de profundidade.

  31. 31 · Centro

    Gradiente Gradient

    Um gradient é uma mudança suave entre cores ou transparência. Ele pode seguir uma linha, círculo, ângulo ou malha.

  32. 32 · Centro

    Hierarquia Visual Visual Hierarchy

    A Hierarquia Visual orienta o que as pessoas percebem primeiro, depois e por último através do tamanho, contraste, posição e espaço.

  33. 33 · Mais detalhes

    Iconografia Iconography

    Iconografia é um conjunto de símbolos compartilhados com aparência correspondente e significados claros para ações e ideias.

  35. 35 · Centro

    Minimalismo Minimalism

    O minimalismo remove o que um design não precisa. Ainda mantém o produto claro, útil e distinto.

  36. 36 · Centro

    Modo Escuro Dark Mode

    O Modo Escuro altera superfícies, textos, bordas, mídias e estados para um ambiente escuro.

  37. 37 · Mais detalhes

    Neobrutalismo Neobrutalism

    Neobrutalismo é um estilo digital ousado e de alto contraste. Utiliza formas simples, bordas grossas, cores diretas e um layout mecânico claro.

  38. 38 · Mais detalhes

    Neumorfismo Neumorphism

    Neumorfismo é um estilo suave, de baixo contraste. Sombras claras e escuras fazem os controles parecerem levantados ou pressionados em uma superfície de cor única.

  39. 39 · Centro

    Paleta de Cores Color Palette

    Uma Paleta de Cores é um conjunto de cores planejado. Cada cor tem um papel, estado ou superfície clara.

  41. 41 · Centro

    Site Corporativo B2B B2B Corporate Site

    Um Site Corporativo B2B ajuda grupos de empresas a verificar as habilidades, regras, confiança e adequação de uma empresa. Ele também apoia compras ou parcerias.

  42. 42 · Centro

    Site de Marketing SaaS SaaS Marketing Site

    Um Site de Marketing SaaS explica um problema e um serviço de software para um grupo de pessoas. Ele ajuda os visitantes a verem se serve para eles e a escolherem o próximo passo.

  44. 44 · Centro

    Tipografia Typography

    Tipografia é a forma como os estilos de texto são escolhidos e organizados para tornar as palavras legíveis, ordenadas e de acordo com a marca.

  45. 45 · Centro

    Token de Design Design Token

    Um Design Token nomeia uma única escolha de design. Exemplos incluem uma cor, espaço, fonte ou velocidade de movimento.

  46. 46 · Centro

    Variante Variant

    Um Variant é uma versão aprovada de um componente para um tamanho, força ou configuração diferente.

  47. 47 · Mais detalhes

    Vidro Líquido Liquid Glass

    Vidro Líquido é um estilo de material claro e em movimento. Ele usa dobras semelhantes a lentes, destaques e formas que parecem se juntar ou flexionar.

  48. 48 · Mais detalhes

    Wabi-sabi Wabi-sabi

    Wabi-sabi é uma visão japonesa de beleza. Valoriza limites, mudanças, formas irregulares, idade e materiais honestos em vez de polimento perfeito.

  49. 49 · Mais detalhes

    Web vernacular Vernacular Web

    A web vernacular copia os sites cotidianos que as comunidades criam. Difere de sistemas polidos feitos por grandes grupos.

  50. 50 · Mais detalhes

    Windows Aero Windows Aero

    Windows Aero é um estilo de desktop do final dos anos 2000. Ele usa molduras de janelas transparentes, vidro embaçado, brilho suave e bordas em camadas.