Slides - Unidade 2 - Design Gráfico e Repertório Visual

unidade 2
// design gráfico e
repertório visual
SILVA, Leonardo B. O.
Princípios de
usabilidade
// design gráfico e repertório visual
imagem: giphy.com
unidade 2
// design gráfico e 2.1 As heurísticas de Nielsen: o que são e para
repertório visual quê servem?
2.2 1. Visão do estado do sistema
Princípios de usabilidade 2.3 2 Correspondência entre o sistema e o
mundo real
Elementos de design gráfico 2.4 3 Liberdade e controle para o usuário
2.5 4 Consistência e padrão
2.6 5 Prevenção de erro
2.7 6 Relembrar ao invés de memorizar
2.8 7 Flexibilidade e eficiência de uso
2.9 8 Projeto e estética minimalista
2.10 9 Ajude o usuário a reconhecer e se
recuperar de erros
2.11 10 Ajuda e documentação
As heurísticas de Nielsen:
o que são e para quê servem?
imagem: giphy.com
Heurísticas de Nielsen:
10 princípios para uma boa interface
“Even the best designers produce successful products only if their
designs solve the right problems. A wonderful interface to the wrong
features will fail.”
Fonte: Jakob Nielsen

Para que servem as heurísticas?

> Fazer com que o usuário não precise de um “manual de instrução” para usar a interface
> Projetar uma boa interface
> Ajudar o usuário a ter uma boa experiência com a interface
> Podem ser analisadas durante e após a construção de uma interface
FONTE: https://brasil.uxdesign.cc/10-heur%C3%ADsticas-de-nielsen-para-o-design-de-interface-58d782821840
https://medium.com/vivareal-ux-chapter/heur%C3%ADsticas-de-nielsen-avaliando-a-usabilidade-de-interfaces-e96f9801cd5
https://blog.caelum.com.br/10-heuristicas-de-nielsen-uma-formula-pra-evitar-erros-basicos-de-usabilidade/
Avalie (1-5) seu produto nas
Heurísticas de Nielsen
1 - Visibilidade do estado do sistema 6 - Relembrar ao invés de memorizar
2 - Correspondência entre o sistema e 7 - Flexibilidade e eficiência de uso
o mundo real 8 - Projeto e estética minimalista
3 - Liberdade e controle para o usuário 9 - Ajude o usuário a reconhecer e se
4 - Consistência e padrão recuperar de erros
5 - Prevenção de erro 10 -Ajuda e documentação
1 . Visão do estado do sistema
imagem: giphy.com
1. Visibilidade do estado do sistema

> O usuário deve saber o que está acontecendo no
sistema, onde ele está, quais as etapas, para onde
ele pode ir, etc
> O sistema deve informar em tempo real para o
usuário em que estado ele está, o que está
acontecendo no sistema, etc
> Ou seja, deve ter feedbacks instantâneos que
orientem o usuário
fonte: Nielsen Norman Group

2 . Correspondência entre o
sistema e o mundo real
imagem: giphy.com
2. Correspondência entre o sistema e o mundo real

> Um sistema deve falar a mesma “língua” do seu
usuário, de acordo com suas referências e códigos
já conhecidos
> A linguagem, imagens, ícones e interface em
geral devem priorizar o modelo mental do usuário e
não ser orientada pelo sistema
> Evitar linguagem técnica (se esta não for de
conhecimento do público)


> Os símbolos e ícones de uma interface devem ser
de fácil entendimento pelo público (priorizando os
códigos já estabelecidos)
> Ícones podem vir acompanhados de palavras
chave que auxiliam no seu reconhecimento
~ Ex: usar tons vermelhos para itens negativos


> Os símbolos e ícones de uma interface devem ser
de fácil entendimento pelo público (priorizando os
códigos já estabelecidos)
MEU USUÁRIO JÁ CONHECE
> Ícones podem vir acompanhados de palavras
CÓDIGOS. PARA QUE CRIAR
chave que auxiliam no seu reconhecimento
OUTROS?
> Ex: usar tons vermelhos para itens negativos
.

3 . Liberdade e controle para o
usuário
imagem: giphy.com
3. Liberdade e controle para o usuário

> Todo usuário pode cometer algum equívoco no
sistema (deletar um email importante, esquecer
uma senha, etc)
> Usuários ficam inseguros se não podem
desfazer seus erros
> Um sistema não deve impor interações ao
usuário e nem tomar decisões por ele

3. Liberdade e controle para o usuário

> O usuário deve ter liberdade para fazer o uso
que desejar do sistema (com exceção das regras
de negócio e atrapalhem funcionalidades)
~ Ex: tweet pode ser deletado, mas não editado
> Facilite saídas de emergência, retorno ao menu
inicial, permita desfazer e refazer, etc

4 . Consistência e padrão
imagem: giphy.com
4. Consistência e padrão
> Já é um desafio fazer o usuário entender o seu
sistema, imagina então se ele tiver que decifrar
vários códigos, modo de interagir e padrões
diferentes?
> Mantenha consistência entre as telas de uma
interface, mantenha padrões de interação,
linguagem, hierarquia, etc

> Tratar da mesma maneira coisas similares https://material.io/
ajuda o usuário a compreender seu sistema

> Design system foca auxiliar neste ponto

> Tratar da mesma maneira coisas similares https://material.io/
ajuda o usuário a compreender seu sistema
MELHOR UMA INTERFACE

> Design system foca auxiliar neste ponto
CONSISTENTEMENTE FEIA, DO QUE

ESPORADICAMENTE BONITA!

5 . Prevenção de erro
imagem: giphy.com
5. Prevenção de erro
> Melhor que deixar seu usuário desfazer um
erro, é evitar que eles aconteçam
> Os erros podem acontecer por: deslizes, não
estava focado, ou engano, teve uma
compreensão equivocada
> Ações drásticas devem ser bem sinalizadas,
chamando atenção (excluir conta)
> Crie mensagens de confirmação para ações
drásticas
6 . Relembrar ao invés de
memorizar
imagem: giphy.com
6. Relembrar ao invés de memorizar

> O cérebro é melhor em reconhecer padrões do que em memorizar
> Possibilite o seu usuário reconhecer o padrão ao invés de obrigá-lo a memorizar informações,
comandos, interações
> Disponibilize ajudas contextuais, fluxos de ações

7 . Flexibilidade e eficiência de
uso
imagem: giphy.com
7. Flexibilidade e eficiência de uso

> Uma interface deve ser útil para usuários leigos
(fáceis de usar) e experientes (ágeis de usar)
> Deixar todas as opções visíveis em primeiras
interações pode inibir usuários leigos
> Algumas estratégias são: personalização menus,
atalhos, preenchimento automático de dados já
cadastrados, etc

8 . Projeto e estética
minimalista
imagem: giphy.com
8. Projeto e estética minimalista

> Quanto mais informações em uma interface mais o usuário
terá que compreender para interagir
> Foque no essencial, seja o mais simples e direto possível
> Informações secundárias podem ser deixadas em segundo
plano (abas, menus, etc)
> Evite elementos visuais que distraiam e confundam o
usuário

8. Projeto e estética minimalista

> Quanto mais informações em uma interface mais o usuário
terá que compreender para interagir
> Foque no essencial, seja o mais simples e direto possível
CADA INFORMAÇÃO A MAIS,
> Informações secundárias podem ser deixadas em segundo
PODE
plano (abas, menus, etc) SE TORNAR UMA DÚVIDA A
MAIS!o
> Evite elementos visuais que distraiam e confundam
usuário

9 . Ajude o usuário a
reconhecer e se recuperar de
erros
imagem: giphy.com
9. Ajude o usuário a reconhecer e

se recuperar de erros
> Quando um erro não pode ser prevenido ou facilmente
desfeito é preciso ajudar o usuário a entender onde errou e
se recuperar
> Mensagens de erros claras, que não inibam os usuários e o
conduzam a solução
> Mensagens de erros devem ser exibidas o mais próximo
possível da realização do erro
~ Ex: avisos de formulários de erros no preenchimento

10 . Ajuda e documentação
imagem: giphy.com
10. Ajuda e documentação

> O ideal é evitar que seu usuário precise desses itens, mas
ainda assim, um sistema deve itens relacionados a ajuda e
documentação
> Área de ajuda colabora para que o usuário tire suas
próprias dúvidas de maneira autônoma
> Tente deixar a ajuda e documentação próxima da ação que
a demande

Elementos de
design gráfico
imagem: giphy.com
unidade 2
// design gráfico e 2.12 Design systems e guias de estilo
repertório visual 2.13 Hierarquia e organização visual
2.14 Grid e layout
Princípios de usabilidade 2.15 Tipografia
2.16 Cores
Elementos de design gráfico 2.17 Ícones
2.18 Imagens
Design systems e
guias de estilo
imagem: giphy.com
O que é um Design System?

> É um conjunto pré construído de elementos, padrões e regras para a criação de interfaces
e demais produtos de design. Inclui elementos como:
- famílias tipográficas,
- paletas de cores, Contém elementos
- família de ícones, de design
- componentes de interface,
Pode conter elementos
- grid,
pré-programados para
- guia de aplicação de marca, aplicações web.
- etc.
Porque fazer um Design System?

> Maior agilidade no processo de prototipagem e implementação.
> Maior consistência de linguagem e de experiência.
> Não ter que começar "do zero" a cada novo elemento.
Em seu design system básico devo
encontrar:
Fontes utilizadas, hierarquias e funções

Paleta cromática e situações de uso

Características básicas de elementos

Regras básicas ícones e imagens

Regras básicas de grid e layout

Complete conforme necessário!
Exemplos de design systems:
Material design (google)
fonte: material.io
Bold_ (UFSC)
fonte: https://bold.bridge.ufsc.br/pt/
Adelle (banco de design systems open source)
fonte:https://adele.uxpin.com
Teste!
Hierarquia e organização visual
imagem: giphy.com
Um exemplo
-- Princípios de organização visual --
Princípios de organização visual

Menos importante
Menos importante
Menos importante
Menos importante Mais importante
Menos importante
Mais importante
Menos importante
Menos importante
Mais importante
Menos importante
Menos importante Menos importante


Menos importante
Mais importante
Menos importante
Menos importante
Menos importante
Menos importante
Mais importante
Menos importante
Menos importante
Mais importante
Menos importante
Menos importante
Menos importante
Mais importante Menos importante

Menos importante
Menos importante
Menos importante
Menos importante
Menos importante
Menos importante
Menos importante

Menos importante
Menos importante
Menos importante
Menos importante
Menos importante
Menos importante
Menos importante

Menos importante
Menos importante
Menos importante
Menos importante
Menos importante
Menos importante
Menos importante

Menos importante

Menos importante
Menos importante
Menos importante
Menos importante
Menos importante
Menos importante

Menos importante

Menos importante
Menos importante
Menos importante
Menos importante
Menos importante
Menos importante

Menos importante
Menos importante
Menos importante
Menos importante Mais importante
Menos importante
Mais importante
Menos importante
Menos importante
Mais importante
Menos importante
Menos importante Menos importante

Princípios de organização visual - Gestalt

diferente
diferente
trabalho
pessoal
Bom Ruim pessoal
normal trabalho pessoal

Bom Ruim normal
trabalho pessoal
normal destaque
Bom Ruim
trabalho
normal normal
Bom Ruim pessoal
normal
Características semelhantes Proximidade, diferença Proximidade, cor
Organize seus elementos
visualmente!
Nós temos problemas demais. - ILA19
Hierarquia visual
(design e América Latina)
Esse texto é um relato a partir da participação no Interaction Latin America

(ILA19) em Outubro e Novembro de 2019, em Medellín (Colômbia).
O que você quer que seja O Interaction Latin América (ILA) 19, em Medellín, foi fantástico... ponto.
visto primeiro? É inevitável voltar de um evento desses e de uma cidade dessas sem um
milhão de coisas borbulhando no cérebro. Reflexões sobre o design, sobre a
América Latina, sobre nossa identidade e sobre nossa capacidade de
impacto no mundo. Dessas coisas, uma se destacou em minha mente:
~ Nós temos problemas demais.~
Já explico:
O "novo mundo"
Medellín é uma cidade muito… diferente. Ela mora nesse meio termo entre
ser uma cidade extremamente inovadora - sendo enorme exemplo de
inclusão e reforma social a partir de um sistema ímpar de mobilidade
urbana - e ser uma cidade extremamente pobre - com um passado violento
ligado a cartéis de drogas e de problemas sociais ainda muito presentes.
Essa cidade é um choque, um soco.
Hierarquia visual
Hierarquia visual 1
3
Tenha uma hierarquia visual clara!
Grid e layout
imagem: giphy.com
Grid e layout
> Grid são as "linhas invisíveis" que
ordenam o nosso layout.
> É forma como são organizados os
elementos do seu projeto. Inclui:
. Textos
. Imagens
. Estruturas de coluna
. Botões
. Etc.
. Mantenha próximos
Proximidade elementos relacionados
. Mantenha mais
distantes elementos
diferentes.
fonte: GCFLearnFree.org
. Tenha espaço "em
Espaço "em branco" branco" para respiro.
. Facilita leitura,
hierarquia e
entendimento da
organização da interface.
. Elementos alinhados
Alinhamento passam maior sensação
de organização e
estrutura
. Facilita leitura da página
e navegação
Colunas, margem e intervalo
fonte: mateiral.io
. Seu layout deve se
Responsividade do layout adaptar de acordo com o
suporte (mobile, desktop,
etc)
fonte: mateiral.io
Como é a navegação de seu projeto?
. Como o usuário vai usar

a sua interface?
. Qual a ação principal
dele em seu layout?
Seu layout deve facilitar o

uso!
Texto/ leitura
fonte: mateiral.io Galeria/ exploração

Recomendações:
Material.io - grid
fonte: https://material.io/design/layout/
Tipografia
imagem: giphy.com
Tipografias são os
"estilos" das letras que
você escolhe para o seu
layout.
Conceitos básicos
Hierarquia de fontes
. Defina a hierarquia entre

<h1>
Título os diferentes elementos e
<h2> quais configurações de
Subtítulo fonte utilizam.
<h3> Subtítulo 2 (Fonte, tamanho, estilo,
etc.)
<p> Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque et cursus quam.
Vestibulum sed sollicitudin nunc. Pellentesque ac
odio quam. Morbi tincidunt turpis ut egestas
eleifend. Suspendisse maximus magna libero,
nec fringilla purus hendrerit a. Nam ut commodo
neque. Vivamus eu efficitur lacus. ...
Tamanho de fonte
pequeno . Seus usuários conseguem ler a fonte em
diferentes dispositivos?
Teste no
contexto real!
Gran
. Fonte tão grande que as palavras "não
de cabem" no grid.
Legibilidade
. Facilidade de leitura de
cada letra.
Legibilidade . Sem serifa tendem a ser

melhores
. Melhor para dispositivos
móveis
Leiturabilidade
. Facilidade/ maior
velocidade de leitura em
textos longos.
. Com serifa tendem a ser
melhores
. Melhor para impresso
Tipos de fontes
Famílias tipográficas
Fontes sem serifa . Melhor legibilidade web

. Mais moderna/ clean
Fonte
Type: Helvetica Neue
fonte: Lupton; Bringhurst

Fontes com serifa . Melhor leiturabilidade

(bom para textos maiores)
. Estilo mais clássico
Fonte
Type: Georgia

Fontes display
Fonte . Bom para elementos de

destaque (títulos, marcas,
destaques)
Type: Monoton

Fontes manuscrita
Fonte
fonte: Lupton; Bringhurst Type: Satisfy
. Bom para elementos de
destaque.
. Clássico ou humor.
Ao escolher uma fonte,
atente-se para:
Quantidade/ variedade de fontes no site
. Tente usar apenas 1 ou 2

famílias tipográficas por
Ag Ag
projeto.
. Prefira variar em peso
(bold, italic, light) ou em
tamanho da fonte.
Type: Georgia Type: Roboto
Variedade de “pesos”
Ag Ag . Prefira fontes com pesos

variados, pois são mais
versáteis. Ex.:
. Light
. Regular
. Italic
Ag Ag . Bold
. Black
Type: Roboto: Light, Regular, Slantec (italic), Bold.

Variedade de caracteres (e acentos)
. Use fontes que tenham

suporte para acentos, que
se adequam à língua
éàõ&% portuguesa.
( ', ~, ^, etc.)
Type: Roboto
Recomendações:
Fontes para NÃO usar:
Comic Sans Papyrus

Fontes substitutas
Patrick hand Antic Didone
Ag Ag
Patrick hand é Antic Didone é
melhor que melhor que
Comic Sans. Papyrus.
Fontes: Exemplos para uso
Helvetica Neue Roboto
Ag Ag
Helvetica Neue Roboto nasceu
é uma fonte para a web.
clássica.
Fontes: Exemplos para uso
Garamond Lobster
Ag Ag
Garamond também Lobster pode ser
é clássica, mas com usada, mas com
serifa. moderação.
Google fonts
fonte: https://fonts.google.com
My fonts
fonte: https://www.myfonts.com
Cores
imagem: giphy.com
Cores podem ser

usadas para:
> Direcionar o olhar (destacar
elementos)
> Evocar uma sensação (conforto,
animação, etc.)
> Comunicar sem o uso necessário
de palavras (Ex.: vermelho x verde)
Matiz
. Qual cor
Saturação
. O quão vibrante
(cor - cinza)
Luminosidade
. O quão luminosa
(branco - preto)
Círculo cromático e harmonias
Secondary
Círculo cromático
ry
Tertia Te
rtia
ry
y
ar
Yellow
Pri
im
Pr
ma
Green Red
ry
Tertiary
Tertiary
Magenta
Cian
Se
co
ary
nd
d n
ary
co
Se
Blue
Te
tia r
ry ry
rtia
Te
Primary
Cores monocromáticas
Cores análogas
Cores complementares
Cores complementares-divididas
Cuidado!
Não fazer!
muito claro
muito vibrante
Não fazer!
contraste
muito claro
bom
mais
muito
confortável
vibrante
Paletas cromáticas
Escolha de paleta,
destaque e linguagem
fonte: Youtube
Escolha de paleta,
fonte: Google maps

Escolha de paleta,
Boa prática:
. Cores base
análogas (ou
monocromáticas)
. Cor destaque
complementar
fonte: Nubank
Cores e significado (marcas)

Recomendações:
Adobe Color Wheel
fonte: https://color.adobe.com/create
Canva palette generator (photo)
fonte:
https://www.canva.com/colors/colo
r-palette-generator/
Material.io - colors (acessibilidade)
fonte:
https://material.io/resources/color/#!
/?view.left=0&view.right=0
Não tenha medo das cores!
Ícones
imagem: giphy.com
O "ícone" é um símbolo que refere a
algo no mundo real.
Um ícone é uma
metáfora
Grau de abstração
. O usuário consegue
reconhecer facilmente?
. Qual o contexto?
fonte: https://thenounproject.com
Família de ícones e consistência
. Tenha consistência!
. Mesma linguagem,
espessura, abstração,
preenchimento.
Preenchido Duotone Linha fonte: https://material.io/resources/icons/

. Ícones mais simples

Redução (com menos linhas e
linhas mais grossas)
tendem a ter melhor
redução
Recomendações:
The noun project
Shutterstock
fonte:
https://www.shutterstock.com/
search/icons
Material.io - icons
fonte: https://material.io/resources/icons/
Imagens
imagem: giphy.com
Boas práticas
Definição e tamanho . Cuidado com:

> Perda de detalhes
> Criação de artefatos na imagem
> Imagens "pixelizadas"
Resolução BAIXA NÃO Resolução ALTA SIM

Para imagens pequenas, evitar
Tipos de corte e foco imagens detalhadas demais.
Selecionar um corte que
favoreça a mensagem e o que
você quer passar.
NÃO SIM SIM

Imagens e formatos para web
. Cuidado com imagens grandes

demais! Demora para carregar.
> salve para web.
> use png (geralmente)
> cuidado com imagens com
resolução maior do que a
necessária em seu contexto.
Imagem como linguagem
Defina o padrão das imagens
fonte: https://graphicmama.com/blog/graphic-design-trends-2020/
Recomendações:
Shutterstock
fonte: https://www.shutterstock.com
Pexels.com
fonte: https://www.pexels.com/
~ obrigado! ~
unidade 2
// design gráfico e
repertório visual

Slides - Unidade 2 - Design Gráfico e Repertório Visual

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Slides - Unidade 2 - Design Gráfico e Repertório Visual

Enviado por

Direitos autorais:

Formatos disponíveis

unidade 2

Fonte: Jakob Nielsen

Para que servem as heurísticas?

1. Visibilidade do estado do sistema

fonte: Nielsen Norman Group

2. Correspondência entre o sistema e o mundo real

fonte: Nielsen Norman Group

2. Correspondência entre o sistema e o mundo real

fonte: Nielsen Norman Group

2. Correspondência entre o sistema e o mundo real

fonte: Nielsen Norman Group

3. Liberdade e controle para o usuário

fonte: Nielsen Norman Group

3. Liberdade e controle para o usuário

fonte: Nielsen Norman Group

fonte: Nielsen Norman Group

ajuda o usuário a compreender seu sistema

fonte: Nielsen Norman Group

ajuda o usuário a compreender seu sistema

MELHOR UMA INTERFACE

CONSISTENTEMENTE FEIA, DO QUE

fonte: Nielsen Norman Group

6. Relembrar ao invés de memorizar

fonte: Nielsen Norman Group

7. Flexibilidade e eﬁciência de uso

fonte: Nielsen Norman Group

8. Projeto e estética minimalista

fonte: Nielsen Norman Group

8. Projeto e estética minimalista

fonte: Nielsen Norman Group

9. Ajude o usuário a reconhecer e

fonte: Nielsen Norman Group

10. Ajuda e documentação

fonte: Nielsen Norman Group

O que é um Design System?

Porque fazer um Design System?

Fontes utilizadas, hierarquias e funções

Paleta cromática e situações de uso

Características básicas de elementos

Regras básicas ícones e imagens

Regras básicas de grid e layout

Material design (google)

Adelle (banco de design systems open source)

Princípios de organização visual

Menos importante Menos importante

Princípios de organização visual

Princípios de organização visual

Mais importante Menos importante

Princípios de organização visual

Mais importante Menos importante

Princípios de organização visual

Mais importante Menos importante

Princípios de organização visual

Mais importante Menos importante

Mais importante Menos importante

Princípios de organização visual

Mais importante Menos importante

Mais importante Menos importante

Princípios de organização visual

Menos importante Menos importante

Princípios de organização visual - Gestalt

normal trabalho pessoal