O documento discute princípios de design como proximidade, alinhamento, contraste e repetição para organizar informações de forma clara. Ele explica como esses princípios como agrupar itens relacionados, alinhar elementos visualmente e diferenciar itens através do contraste e repetição de elementos visuais criam uma aparência limpa e organizada.

1. DESIGN PARA QUEM
NÃO É DESIGNER

2. Trabalho na área de web há 6 anos, com
especialização em Design de Interfaces,
desenvolvimento front-end e marketing digital.
Sou sócio de uma agência que atende clientes
na região de Campinas, a Agência NB8.
twitter.com /marcofrassonweb
facebook.com /marcofrassonweb

3. ”
A maioria das pessoas tem a capacidade de
olhar para uma página com um design pobre
e concluir que não gostam dela, mas não
saberiam o que fazer para melhora-la.
Robin Williams, introdução do livro.

4. PROXIMIDADE
ALINHAMENTO CONTRASTE
REPETIÇÃO

5. Itens relacionados entre si devem ser
agrupados.
Quando vários itens estão próximos,
tornam-se uma unidade visual, e não
várias unidades individuais.
Isso ajuda a organizar as informações
e reduz a desordem.
PROXIMIDADE

6. LOGO
EMPRESA
BUSCAR
(11) 5239-0987 CARRINHO FINALIZAR COMPRA
CATEGORIAS
Av. Paulista, 123
Centro - São Paulo
LOGO
EMPRESA
BUSCAR
(11) 5239-0987
CARRINHO FINALIZAR COMPRACATEGORIAS
Av. Paulista, 123
Centro - São Paulo

7. • Smart TV
• TV LED
• TV 3D
• Micro Sistem
• Fone de Ouvido
• Soundbar
• Home Theater
• Fogões
• Cook Top
• Micro-ondas
• Batedeiras
• Forno Elétrico
• Liquidificadores
TVs
• Smart TV
• TV LED
• TV 3D
Áudio
• Micro Sistem
• Fone de Ouvido
• Soundbar
• Home Theater
Eletrodomésticos
• Fogões
• Cook Top
• Micro-ondas
Eletroportáteis
• Batedeiras
• Forno Elétrico
• Liquidificadores

8. Repita os elementos visuais do design
e espalhe-os pelo layout.
Você pode repetir as cores, formas,
texturas e as relações espaciais como
espessura, tamanhos, margens e etc..
Isso ajuda a criar uma organização e
fortalecer a unidade.
REPETIÇÃO

9. Lorem ipsum
Dolor sit amet, consectetur adipiscing elit. In orci urna, porta quis
molestie nec, auctor vel eros. Vestibulum ornare condimentum diam
vel molestie. Fusce vel leo dui. Donec vitae molestie arcu. Vivamus
eleifend magna sed ornare mollis. Quisque elementum facilisis mi a
tempor. Integer fringilla luctus finibus.
Nunc vehicula
Velit et volutpat fermentum. Donec elementum sit amet elit eget elei-
fend. Nunc pharetra, orci sit amet gravida pulvinar, odio nulla lacinia
orci, eu volutpat sem leo id neque. Maecenas libero quam, interdum
at tristique eu, pretium tincidunt justo. Nam quis metus eget odio
bibendum fringilla.
Vestibulum tincidunt - Venenatis arcu, in scelerisque quam tincidunt
vitae. Mauris in orci quis velit ultrices fringilla vitae dapibus tellus. In
hac habitasse platea dictumst. Duis porttitor ex libero, sed rhoncus
purus consequat vitae. Suspendisse placerat consectetur tellus et
malesuada. Aenean a sodales augue. Sed nec ligula consectetur,
convallis ligula vel, rutrum mi. Fusce vehicula eget sapien rhoncus
dictum. Proin congue quis lacus vitae egestas.
Lorem ipsum
Dolor sit amet, consectetur adipiscing elit. In orci urna, porta quis
molestie nec, auctor vel eros. Vestibulum ornare condimentum diam
vel molestie. Fusce vel leo dui. Donec vitae molestie arcu. Vivamus
eleifend magna sed ornare mollis. Quisque elementum facilisis mi a
tempor. Integer fringilla luctus finibus.
Nunc vehicula
Velit et volutpat fermentum. Donec elementum sit amet elit eget elei-
fend. Nunc pharetra, orci sit amet gravida pulvinar, odio nulla lacinia
orci, eu volutpat sem leo id neque. Maecenas libero quam, interdum
at tristique eu, pretium tincidunt justo. Nam quis metus eget odio
bibendum fringilla.
Vestibulum tincidunt
Venenatis arcu, in scelerisque quam tincidunt vitae. Mauris in orci
quis velit ultrices fringilla vitae dapibus tellus. In hac habitasse platea
dictumst. Duis porttitor ex libero, sed rhoncus purus consequat vitae.
Suspendisse placerat consectetur tellus et malesuada. Aenean a so-
dales augue. Sed nec ligula consectetur, convallis ligula vel, rutrum
mi. Fusce vehicula eget sapien rhoncus dictum. Proin congue quis
lacus vitae egestas.

10. COMPRAR CADASTRAR ENVIAR
COMPRAR CADASTRAR ENVIAR

11. Nada deve ser colocado
arbitrariamente em uma página.
Cada elemento deve ter uma ligação
visual com outro elemento da página.
Isso cria uma aparência limpa,
sofisticada e suave.
ALINHAMENTO

12. Lorem ipsum
Dolor sit amet, consectetur adipiscing elit. In
orci urna, porta quis molestie nec, auctor vel
eros. Vestibulum ornare condimentum diam
vel molestie. Fusce vel leo dui. Donec vitae
molestie arcu. Vivamus eleifend magna sed
ornare mollis. Quisque elementum facilisis mi
a tempor. Integer fringilla luctus finibus.
Vestibulum tincidunt
Venenatis arcu, in scelerisque quam tincidunt vitae. Mauris in orci
quis velit ultrices fringilla vitae dapibus tellus. In hac habitasse platea
dictumst. Duis porttitor ex libero, sed rhoncus purus consequat vitae.
Suspendisse placerat consectetur tellus et malesuada.
Lorem ipsum
Dolor sit amet, consectetur adipiscing elit. In orci urna, porta quis
molestie nec, auctor vel eros. Vestibulum ornare condimentum diam
vel molestie. Fusce vel leo dui. Donec vitae molestie arcu. Vivamus
eleifend magna sed ornare mollis. Quisque elementum facilisis mi a
tempor. Integer fringilla luctus finibus.
Vestibulum tincidunt
Venenatis arcu, in
scelerisque quam tincidunt
vitae. Mauris in orci quis
velit ultrices fringilla vitae
dapibus tellus. In hac
habitasse platea dictumst.
Duis porttitor ex libero, sed
rhoncus purus consequat vitae. Suspendisse placerat consectetur
tellus et malesuada. Aenean a sodales augue. Sed nec ligula
consectetur, convallis ligula vel, rutrum mi. Fusce vehicula eget
sapien rhoncus dictum. Proin congue quis lacus vitae egestas.

13. Vestibulum tincidunt
Venenatis arcu, in scelerisque
quam tincidunt vitae. Mauris in
orci quis velit ultrices fringilla
vitae dapibus tellus. In hac ha-
bitasse plate.
Donec tristique nunc
Donec tristique nunc eu pretium
euismod. Nulla ipsum orci, hen-
drerit non consectetur et,
congue vel orci. Praesent id
venenatis elit.
Lorem ipsum dolor
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Aenean ornare finibus semper.
Sed scelerisque risus et con-
sectetur lacinia.
LOGO EMPRESA
The secret behind
exceptional websites.
CADASTRAR
HOME PAGE A PAGE B CONTACT

14. Vestibulum tincidunt
Venenatis arcu, in scelerisque
quam tincidunt vitae. Mauris in
orci quis velit ultrices fringilla
vitae dapibus tellus. In hac ha-
bitasse plate.
Donec tristique nunc
Donec tristique nunc eu pretium
euismod. Nulla ipsum orci, hen-
drerit non consectetur et,
congue vel orci. Praesent id
venenatis elit.
Lorem ipsum dolor
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Aenean ornare finibus semper.
Sed scelerisque risus et con-
sectetur lacinia.
LOGO EMPRESA
The secret behind
exceptional websites.
CADASTRAR
HOME PAGE A PAGE B CONTACT

15. O objetivo do contraste é evitar
elementos meramente similares em
uma página.
Se os elementos não forem os mesmos,
diferencie-os completamente.
O contraste costuma ser a mais
importate atração visual de uma página.
CONTRASTE

16. Lorem ipsum
Dolor sit amet, consectetur adipiscing elit. In orci urna, porta quis
molestie nec, auctor vel eros. Vestibulum ornare condimentum diam
vel molestie. Fusce vel leo dui. Donec vitae molestie arcu. Vivamus
eleifend magna sed ornare mollis. Quisque elementum facilisis mi a
tempor. Integer fringilla luctus finibus.
Nunc vehicula
Velit et volutpat fermentum. Donec elementum sit amet elit eget elei-
fend. Nunc pharetra, orci sit amet gravida pulvinar, odio nulla lacinia
orci, eu volutpat sem leo id neque. Maecenas libero quam, interdum
at tristique eu, pretium tincidunt justo. Nam quis metus eget odio
bibendum fringilla.
Vestibulum tincidunt
Venenatis arcu, in scelerisque quam tincidunt vitae. Mauris in orci
quis velit ultrices fringilla vitae dapibus tellus. In hac habitasse platea
dictumst. Duis porttitor ex libero, sed rhoncus purus consequat vitae.
Suspendisse placerat consectetur tellus et malesuada.
Donec vitae molestie arcu
Lorem ipsum
Dolor sit amet, consectetur adipiscing elit. In orci urna, porta quis
molestie nec, auctor vel eros. Vestibulum ornare condimentum diam
vel molestie. Fusce vel leo dui. Donec vitae molestie arcu. Vivamus
eleifend magna sed ornare mollis. Quisque elementum facilisis mi a
tempor. Integer fringilla luctus finibus.
Nunc vehicula
Velit et volutpat fermentum. Donec elementum sit amet elit eget elei-
fend. Nunc pharetra, orci sit amet gravida pulvinar, odio nulla lacinia
orci, eu volutpat sem leo id neque. Maecenas libero quam, interdum
at tristique eu, pretium tincidunt justo. Nam quis metus eget odio
bibendum fringilla.
Vestibulum tincidunt
Venenatis arcu, in scelerisque quam tincidunt vitae. Mauris in orci
quis velit ultrices fringilla vitae dapibus tellus. In hac habitasse platea
dictumst. Duis porttitor ex libero, sed rhoncus purus consequat vitae.
Donec vitae molestie arcu

17. Cadeira Style
DESCRIÇÃO:
Carregando estilo no nome e no desenho, a cadeira Stile
também segue como referência a qualidade do
acabamento artesanal, muito propagada nos anos 50.
MEDIDAS: 93 x 53 x 62
Variações no Acabamento: - Imbuia - Lacas Foscas -
Carvalhos e Ebanizado Texturizado
ESTRUTURA: Madeira
R$ 90,00 COMPRAR
Cadeira
Style
DESCRIÇÃO
Carregando estilo no nome e no desenho, a cadeira Stile
também segue como referência a qualidade do acabamento
artesanal, muito propagada nos anos 50.
MEDIDAS 93 x 53 x 62
ACABAMENTO Imbuia - Lacas Foscas - Carvalhos e
Ebanizado Texturizado
ESTRUTURA Madeira
R$ 90,00
COMPRAR

18. twitter.com /marcofrassonweb
facebook.com /marcofrassonweb
marco@nb8.ag
www.nb8.ag
OBRIGADO!