UI GUIDE STYLES

Projeto de Interface do Usuário

Prof. Augusto César
IFAL - Campus Maceió

1
Sumário
● PRINCÍPIOS DO DESIGN
● PRINCÍPIOS DO DESIGN GRÁFICO
● TIPOGRAFIA
● LAYOUT
● CORES
● ÍCONES
● COMPONENTES WIDGETS
● ANIMAÇÕES
● EXEMPLOS DE UI GUIDE STYLES

2
Princípios do Design
Segundo Don Norman, os princípios de design que norteiam o design de interação :

1.Visibilidade

2. Feedback

3. Restrições

4. Mapeamento

5. Consistência

6. Affordance
3
Princípios do Design
Visibilidade
“...O sistema deve fornecer indicações do estado do sistema, que sejam
prontamente perceptíveis e interpretáveis e correspondam às intenções e às
expectativas.” (NORMAN, 2006)

4
Princípios do Design
FEEDBACK
“O feedback se refere ao retorno de informações a respeito da ação que foi feita e
do que foi realizado, permitindo a pessoa continuar a atividade.” (PREECE, 2005)

5
Princípios do Design
RESTRIÇÕES
“Restrições “... refere-se às formas de delimitar o tipo de interação que pode
ocorrer [...] para impedir o usuário de selecionar a opção incorreta e reduzir as
chances de erro...” (PREECE, 2005)

6
Princípios do Design
MAPEAMENTO
“... refere-se a relação entre controles e seus efeitos no artefato”

(PREECE, 2005)

7
Princípios do Design
CONSISTÊNCIA
“... refere-se a projetar interfaces de modo que tenham operações semelhantes e
que utilizem elementos semelhantes para a realização de tarefas similares”
(PREECE, 2005)

8
Princípios do Design
AFFORDANCE
“É um atributo do objeto que permite ao usuário saber como utilizá-lo” (PREECE,
2005) “É uma ‘dica’ de como devemos interagir com o objeto.”

9
Princípios Básicos de Design Gráfico
Princípios Básico para Planejamento Visual ou Diagramação:

● Proximidade
○ Elementos relacionados ou semelhantes deve ser agrupados e aproximados uns dos outros.
● Alinhamento
○ Cada elemento deve estar alinhado visualmente com outro componentes de mesma ou maior
hierarquia.
● Repetição
○ Organize os padrões e reproduza criando uma identidade visual repetindo cores, texturas,
formas, fontes
● Contraste

10
TIPOGRAFIA
A escolha de um conjunto de tipos de fonte de para cabeçalhos, títulos,
rótulos.

Importante manter o estilo com consistência.

11
LAYOUT
● O que é um layout ?
○ Arranjo de partes conforme um plano.
○ Distribuição do conteúdo no espaço.
○ Gestão de forma.
○ Estrutura utilizada em todos os projetos
gráficos.

12
LAYOUT
● Layout Fixo

○ Medidas Fixas. Pior experiência multiplataforma.

● Layout Adaptivo

○ Pontos de quebra. Parcialmente adaptado para

multiplataforma.

● Layout Fluido

○ Medidas Fluidas. Ocupa 100% da largura da tela.

○ Sem adaptações multiplataforma.

● Layout Responsivo
13
○ Medidas Fluidas. Melhor experiência multiplataforma.
LAYOUT - Construir uma layout é como uma planta de uma
casa
1. Reúna todo o conteúdo

2. Procure contar uma história

3. Organize a informação por nível de importância

4. Crie um mapa de navegação

5. Crie Personas

○ Baseie as decisões de design que atendam essas personas

6. Crie os Wireframes

14
LAYOUT - GRIDS, ESPAÇAMENTO E ALINHAMENTO
O equilíbrio visual e a viabilidade
técnica irão precisar de definições
bem minuciosas das possibilidades
da distribuição do conteúdo.

15
CORES
● Roda de Cores
● Paleta de Cores

16
CORES
● Roda de Cores

17
CORES
● Paleta de Cores

18
ÍCONES
Ícones estão sendo muito
utilizados e eles ajudam a dar
vida as interfaces.

Um ícone precisa ter boa

visibilidade e leiturabilidade.

19
COMPONENTES WIDGET
Ícones estão sendo muito
utilizados e eles ajudam a dar vida
as interfaces.

Um ícone precisa ter boa

visibilidade e leiturabilidade.

20
ANIMAÇÕES OU MICROINTERAÇÕES
Elas são importantes para transmitir mensagens aos usuários. Note as animações que
aparecem em seu smartphone quando abre e fecha aplicativos, por exemplo.

21
Exemplos de UI Guide styles
● Empresas:
○ Apple - https://developer.apple.com/design/human-interface-guidelines/
○ Microsoft - Fluent Design - https://developer.microsoft.com/pt-br/windows/apps/design
○ Google - Material Design -https://material.io/design/introduction/?hl=pt-br
○ IBM - http://ibm-design-language.mybluemix.net/design/language/resources/
● Plataforma:
○ Android - https://developer.android.com/design/?hl=pt-br
○ IOS - https://developer.apple.com/design/human-interface-guidelines/ios/
○ MS UWP -https://docs.microsoft.com/pt-br/windows/uwp/design/basics/index
● Web
○ Bootstrap - https://getbootstrap.com/
○ IBM Carbon Design System - http://www.carbondesignsystem.com/
○ SalesForce - https://www.lightningdesignsystem.com/
22