O que desenvolvedores

deveriam aprender sobre design

Débora Correia
QUEM SOU EU?
@debscorreia

Ciência da Computação na UFPE

UX design

IxDA Recife

Django Girls Recife

LABCODES
Estúdio de Software
de Recife para o
mundo

Tecnologias
trabalhadas

Labcodes e a
comunidade
MOTIVAÇÃO
MOTIVAÇÃO
Designers devem aprender a programar?

Devs devem aprender design?

MOTIVAÇÃO
1. Começando seu próprio negócio
2. Trabalhando com um designer
3. Trabalhando em uma pequena empresa
com um pequeno time de design
4. Trabalhando em uma grande empresa mas
a razão designers vs desenvolvedores ainda
não é ideal
MOTIVAÇÃO

https://techcrunch.com/2017/05/31/here-are-some-reasons-behind-techs-design-shortage/
MOTIVAÇÃO
1. Desenvolvedores tomam decisões que
modelam os produtos todos os dias
2. Desenvolvedores pensam em coisas que os
designers tendem a esquecer: acessibilidade,
responsiveness, placeholders, erros, segurança
3. Design não é tornar pixels bonitos
O QUE É DESIGN

User User
interface experience
DESIGN DE INTERAÇÃO
CONTEÚDO
“Design in the absence of content is not
design, it’s decoration.”
- Jeffrey Zeldman
CONTEÚDO
O conteúdo vem da pesquisa!

O que é importante para o seu usuário saber

sobre o seu produto?

Qual é a informação relevante que o seu

produto fornece para o usuário?
CONTEÚDO
Abandone o lorem ipsum

Sempre que tiver a oportunidade, coloque

dados reais ou mais próximos do real nos seus
projetos para ver como eles se comportam.
CONTEÚDO
Analise o seu conteúdo.

Remover o que é desnecessário.

Agrupar para evidenciar a relação entre os

conteúdos
CONTEÚDO
As pessoas só escaneam 

Menos é mais

Parágrafos longos são um sinal de desordem

HEADLINES

Fale sobre benefícios, não detalhes

Mantenha curto

Use linguagem natural e amigável
https://www.youtube.com/watch?v=uKpfO331DY4&t=1277s
https://www.youtube.com/watch?v=uKpfO331DY4&t=1277s
CONTEÚDO
When it’s used well, whitespace
Trabalhe a forma de makes a site easier to navigate.
It improves the user experience
visualizar o conteúdo by organizing content for easy
comprehension. It creates a
clear content hierarchy,
Coloque o que puder separating elements from each
em bullets other. Finally, a site design with
built in whitespace forces site
managers to keep their
Highlight partes do message clear, reducing site
texto clutter, and adding content
that supports users on their
journey.

texto: https://www.uxpin.com/studio/blog/ux-case-study-
designing-whitespace-to-improve-conversions/
CONTEÚDO
When it’s used well, whitespace
Trabalhe a forma de makes a site easier to navigate.

visualizar o conteúdo • It improves the user

experience by organizing
content for easy
Coloque o que puder comprehension.
em bullets • It creates a clear content
hierarchy, separating
elements from each other.
Highlight partes do • Finally, a site design with built
texto in whitespace forces site
managers to keep their
message clear, reducing site
clutter, and adding content
that supports users on their
journey.
CONTEÚDO
When it’s used well, whitespace
Trabalhe a forma de makes a site easier to navigate.

visualizar o conteúdo • It improves the user

experience by organizing
content for easy
Coloque o que puder comprehension.
em bullets • It creates a clear content
hierarchy, separating
elements from each other.
Highlight partes do • Finally, a site design with built
texto in whitespace forces site
managers to keep their
message clear, reducing site
clutter, and adding content
that supports users on their
journey.
CONTEÚDO
Trabalhe CTAS

O que o usuário deve fazer quando entra na
sua página?

Chamar atenção para o principal.

VISUAL DESIGN
PRINCÍPIOS
PRINCÍPIOS
"Principles are guidelines, not necessarily rules”

1. Equilíbrio 6. Proporção
2. Alinhamento 7. Hierarquia visual
3. Ritmo 8. Ênfase
4. Contraste
5. Escala

https://mackenziechild.withcoach.com/design-for-developers
PRINCÍPIOS
Equilíbrio
PRINCÍPIOS
Equilíbrio
PRINCÍPIOS
Equilíbrio
PRINCÍPIOS
Equilíbrio
PRINCÍPIOS
Equilíbrio
PRINCÍPIOS
Alinhamento
PRINCÍPIOS
Alinhamento
PRINCÍPIOS
Ritmo
PRINCÍPIOS
Ritmo
PRINCÍPIOS
Escala e proporção
PRINCÍPIOS
Escala e proporção
PRINCÍPIOS
Contraste
PRINCÍPIOS
Hierarquia e ênfase

YOUR EYES HERE

(then here)
and finally here
PRINCÍPIOS
Hierarquia e ênfase
PRINCÍPIOS
Hierarquia e ênfase
PRINCÍPIOS
Hierarquia e ênfase
COMO APLICAR?
Cor

Tipografia

Grid

Espaços

Consistência
TIPOGRAFIA
TIPOGRAFIA
Tamanho

https://webdesign.tutsplus.com/articles/typography-basics-for-developers--webdesign-14025
TIPOGRAFIA
Contraste
TIPOGRAFIA
Espaçamento
TIPOGRAFIA
Hierarquia
TIPOGRAFIA
TIPOGRAFIA
Use no máximo duas fontes diferentes.

Display font e Body font.

Fontes de categorias diferentes. Contraste!

http://hellohappy.org/beautiful-web-type/
https://www.typewolf.com/
COR
COR
Cor é um dos elementos mais importantes do
design.

Podem ser usadas para dar equilíbrio,

contraste, ênfase e hierarquia visual aos
elementos.

Traz emoção para as pessoas.

COR

The color wheel

COR
Escolha uma paleta que se adeque ao se
projeto
COR
Média de 3 cores diferentes.

Use cores complementares.

Maioria neutra e uma cor para destaque.

Monte uma paleta de cores

https://color.adobe.com/
https://coolors.co
http://www.colourlovers.com/palettes
GRID
GRID
Alinhamento

Diminuem a sensação de bagunça e

composição mais atrativa.

Oferece uma experiência melhor de forma

subconsciente
ESPAÇOS
ESPAÇOS
Espaço positivo e espaço negativo
(whitespace)
ESPAÇOS

https://www.uxpin.com/studio/blog/ux-case-study-designing-whitespace-to-improve-conversions/
OUTRAS COISAS
Consistência

Imagens e videos

Mobile e design responsivo

Prevenção de erros

Empty states
“A clean UI is like clean code <3”
 OBRIGADA!
DEBORA CORREIA
@debscorreia

www.labcodes.com.br
GitHub.com/labcodes
twitter.com/labcodes\
speakerdeck.com/labcodes