User Interface Design

Page 1

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









Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.