User Interface Design

UI: USER INTERFACE DESIGN

O QUE É UI?

• Design de Interface do usuário (UI) foca em antecipar o que os usuários podem precisar ao utilizar uma interface; • assegura que a interface tenha elementos fáceis de acessar e entender; • UI reúne os concepts do Design de Interação, Design Visual e Arquitetura da Informação.

ELEMENTOS DA INTERFACE

• Usuários estão familizarizados com a ação de alguns elementos de interface.

• Tente se manter consistente e previsível em suas escolhas.

Alguns dos principais elementos de Interface são: • Controles de Input: botões, campos para texto, checkboxes, radio buttons, listas dropdown, caixas de listas, toogles, campo para data.

• Componentes de Navegação: breadcrumb, slider, campo de busca, paginação, tags, ícones.

• Componentes Informacionais: tooltips, ícones, barra de progresso, notificações, caixas de mensagem, janelas.

• Containers: accordion

CONTROLES DE INPUT botĂľes, campos para texto, checkboxes, radio buttons, listas dropdown, caixas de listas, toogles, campo para data.

COMPONENTES DE NAVEGAÇÃO breadcrumb, slider, campo de busca, paginação, tags, ícones.

1) utility navigation; 2) global navigation;

3) breadcrumb trail; 4) local navigation;

5) related links.

COMPONENTES INFORMACIONAIS

tooltips, ícones, barra de progresso, notificações, caixas de mensagem, janelas.

CONTAINERS accordion

BOAS PRÁTICAS DO UI DESIGN

• Mantenha a interface simples;

• crie consistência e utilize elementos comuns de UI; • seja objetivo no layout das páginas; • use cor e textura de forma estratégica;

• tenha certeza de que seu usuário recebe feedbacks.

• Wireframe > Flow > Visual > Mockup

1. WIREFRAME

2. FLOW

3. VISUAL

3. VISUAL

4. MOCKUP

EXEMPLOS