Glossário de UI Design: Conheça os principais termos e jargões do universo das interfaces digitais

Existem mil e um termos diferentes e jargões no universo do Design de Interfaces.

Entender o que significa da termo e jargão é uma ótima maneira de conseguir ter uma conversa mais produtiva ao conversar com um desenvolvedor ou gerente de projeto. 🙂

Aqui está uma lista quase-completa dos principais termos da área de UI Design:

• UI
• UI Design
• Designer de interfaces (UI Designer)
• Wireframe
• Angular
• Auto complete
• Botão Checkbox
• Botão Rádio
• Breadcrumb
• Brightness
• Call to action (CTA)
• Dashboard
• Design Adaptativo
• Design Responsivo
• Design Review
• Design System
• Design Visual
• Flat Design
• HEX Color Code
• HSB Color Code
• HTML
• CSS
• Hue
• Javascript / Ecmascript
• Landing Page
• Material Design
• Mobile UI Design
• Modal
• Saturation
• Skeumorfismo
• Stylesheet

UI

User Interface. Significa literalmente Interface do usuário.

UI Design

É a disciplina responsável por projetar interfaces digitais através da utilização de elementos visuais como: Tipografia, Cores, Espaço, Hierarquia Visual, Componentes e muito mais.

Designer de interfaces (UI Designer)

O profissional responsável por pensar e projetar cada detalhe de uma interface.

Wireframe

É um esboço inicial de uma interface em baixa fidelidade. Também conhecido como rabisco frame.

Esse esboço inicial pode ser concebido digitalmente ou em papel e rabiscos também.

Angular

Um framework de javascript utilizado por desenvolvedores front-end.

Auto complete

Quando você preenche uma informação e através de algum script outras informações são preenchidas automaticamente. Ex: Preenchimento automático de endereço ao fornecer o CEP.

Botão Checkbox

Um tipo de botão que permite que você marque ou desmarque várias opções.

Botão Rádio

Botão que permite que você alterne entre uma única opção. Eu falo mais sobre botões neste artigo.

Breadcrumb

Também conhecido como migalhas de pão. É um elemento de interface que mostra exatamente aonde o usuário se encontra.

Brightness

Nível de brilho de uma cor (seguindo o modelo HSB de cores)

Call to action (CTA)

Chamada para ação. Muito utilizado em botões que levam à alguma determinada ação:

• Comprar
• Reservar
• Cancelar

Dashboard

Uma interface com uma grande quantidade de dados, opções e ações.

Design Adaptativo

É a prática de criar várias verões de uma interface para diferentes contextos:

• Celular
• Desktop
• Tablet, etc

Design Responsivo

Diferente do adaptativo, o responsivo é a prática de criar uma única interface que se adapte automaticamente em qualquer tipo de plataforma.

Design Review

Uma prática que consiste em revisar um trabalho de design, apontar erros, melhorias e críticas.

Design System

Uma biblioteca que contém uma grande variedade de princípios, componentes e regras de aplicação de uma determinada interface.

Design Visual

É a prática de criar a parte visual de algum produto ou serviço, definir cores, tamanhos, tipografia, etc.

Flat Design

Um estilo de design adotado pela Apple do qual não utiliza sombras, relevos nem texturas. Por isso o flat, que significa plano.

HEX Color Code

É um código hexadecimal que armazena uma cor, ex: #ffffff (branco)

HSB Color Code

Semelhante ao código HEX, porém utilizado mais para projetar interfaces.

HTML

HTML (Hypertext Markup Language), é como se fosse o esqueleto de uma página web.

CSS

CSS (Cascading Styles Sheet), é o que dá as características visuais de uma página web.

Hue

É um valor que representa o grau de MATIZ de uma cor.

Javascript / Ecmascript

Uma linguagem de programação amplamente utilizada na web. Ecmascript significa a mesma coisa.

Landing Page

Também conhecido como página de aterrissagem. É uma página simples com apenas um objetivo (realizar um cadastro, vender algo, receber informações, etc).

Material Design

Um framework de design criado pela Google em parceria com Estúdio HUGE. Estilo visual utilizado em todos sistemas Android.

Mobile UI Design

Disciplina responsável por projetar interfaces especialmente para aparelho móveis:

• Tablets
• Celulares, etc

Modal

Um elemento de interface, também conhecido como “Pop-up”. Normalmente é utilizado para indicar alguma mensagem ou interação com o usuário.

Saturation

Saturação de uma cor no modelo HSB de cores.

Skeumorfismo

Estilo visual que mistura a vida real com digital. Era o estilo que a Apple utilizada até 2008.

Stylesheet

Folha de estilos, é quase um sistema de design porém bem mais simples. Uma stylesheet contém informações de código de cores, alguns elementos e tipografia.

Faça um comentário abaixo e me conte qual termo você não entende o significado.

Dessa maneira eu posso ajudar você.

Salve este artigo nos seus favoritos e consulte ele sempre que você precisar consultar algum termo.

E compartilhe com os seus amigos, assim todos nós saímos ganhando. 🙂