design para quem não é designer - wordcamp sp - marco frasson
TRANSCRIPT
DESIGN PARA QUEM NÃO É DESIGNER
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
”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.
PROXIMIDADE
ALINHAMENTO CONTRASTE
REPETIÇÃO
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
LOGOEMPRESA
BUSCAR
(11) 5239-0987 CARRINHO FINALIZAR COMPRA
CATEGORIASAv. Paulista, 123Centro - São Paulo
LOGOEMPRESA
BUSCAR (11) 5239-0987
CARRINHO FINALIZAR COMPRACATEGORIASAv. Paulista, 123
Centro - São Paulo
• 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
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
Lorem ipsumDolor 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 ipsumDolor 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 vehiculaVelit 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 tinciduntVenenatis 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.
COMPRAR CADASTRAR ENVIAR
COMPRAR CADASTRAR ENVIAR
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
Lorem ipsumDolor 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 tinciduntVenenatis 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 ipsumDolor 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 tinciduntVenenatis 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.
Vestibulum tinciduntVenenatis arcu, in scelerisque quam tincidunt vitae. Mauris in orci quis velit ultrices fringilla vitae dapibus tellus. In hac ha-bitasse plate.
Donec tristique nuncDonec tristique nunc eu pretium euismod. Nulla ipsum orci, hen-drerit non consectetur et, congue vel orci. Praesent id venenatis elit.
Lorem ipsum dolorLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare finibus semper. Sed scelerisque risus et con-sectetur lacinia.
LOGO EMPRESA
The secret behindexceptional websites.
CADASTRAR
HOME PAGE A PAGE B CONTACT
Vestibulum tinciduntVenenatis arcu, in scelerisque quam tincidunt vitae. Mauris in orci quis velit ultrices fringilla vitae dapibus tellus. In hac ha-bitasse plate.
Donec tristique nuncDonec tristique nunc eu pretium euismod. Nulla ipsum orci, hen-drerit non consectetur et, congue vel orci. Praesent id venenatis elit.
Lorem ipsum dolorLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare finibus semper. Sed scelerisque risus et con-sectetur lacinia.
LOGO EMPRESA
The secret behindexceptional websites.
CADASTRAR
HOME PAGE A PAGE B CONTACT
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
Lorem ipsumDolor 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 vehiculaVelit 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 tinciduntVenenatis 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
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
CadeiraStyle
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,00COMPRAR