design para quem não é designer - wordcamp sp - marco frasson

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

twitter.com /marcofrassonwebfacebook.com /marcofrassonweb

marco@nb8.agwww.nb8.ag

OBRIGADO!