18
DESIGN PARA QUEM NÃO É DESIGNER

Design para quem não é Designer - WordCamp SP - Marco Frasson

Embed Size (px)

Citation preview

Page 1: Design para quem não é Designer - WordCamp SP - Marco Frasson

DESIGN PARA QUEM NÃO É DESIGNER

Page 2: Design para quem não é Designer - WordCamp SP - Marco Frasson

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

Page 3: Design para quem não é Designer - WordCamp SP - Marco Frasson

”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.

Page 4: Design para quem não é Designer - WordCamp SP - Marco Frasson

PROXIMIDADE

ALINHAMENTO CONTRASTE

REPETIÇÃO

Page 5: Design para quem não é Designer - WordCamp SP - Marco Frasson

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

Page 6: Design para quem não é Designer - WordCamp SP - Marco Frasson

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

Page 7: Design para quem não é Designer - WordCamp SP - Marco Frasson

• 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

Page 8: Design para quem não é Designer - WordCamp SP - Marco Frasson

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

Page 9: Design para quem não é Designer - WordCamp SP - Marco Frasson

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.

Page 10: Design para quem não é Designer - WordCamp SP - Marco Frasson

COMPRAR CADASTRAR ENVIAR

COMPRAR CADASTRAR ENVIAR

Page 11: Design para quem não é Designer - WordCamp SP - Marco Frasson

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

Page 12: Design para quem não é Designer - WordCamp SP - Marco Frasson

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.

Page 13: Design para quem não é Designer - WordCamp SP - Marco Frasson

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

Page 14: Design para quem não é Designer - WordCamp SP - Marco Frasson

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

Page 15: Design para quem não é Designer - WordCamp SP - Marco Frasson

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

Page 16: Design para quem não é Designer - WordCamp SP - Marco Frasson

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

Page 17: Design para quem não é Designer - WordCamp SP - Marco Frasson

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

Page 18: Design para quem não é Designer - WordCamp SP - Marco Frasson

twitter.com /marcofrassonwebfacebook.com /marcofrassonweb

[email protected]

OBRIGADO!