18
Layout Design Digital

Layout-Design Digital

Embed Size (px)

Citation preview

Page 1: Layout-Design Digital

LayoutDesign Digital

Page 2: Layout-Design Digital
Page 3: Layout-Design Digital

Resolução do Monitor

800x600 pixels

1024x768 pixels

1280x800 pixels

...

A resolução de segurança deve ser no mínimo 1024x768 px

Page 4: Layout-Design Digital

Tipos de Layout

Fixo

Liquido

Adaptivo

Responsivo

Page 5: Layout-Design Digital

Wireframe

Um wireframe é um guia visual básico usado em design de interface para sugerir a estrutura de um pagina web e relacionamentos entre suas páginas.

Ilustração do layout

Processo inicial, antes do desenvolvimento

Variações de layout (Disposição dos elementos nos dispositivos)

Page 6: Layout-Design Digital

Wireframe

Page 7: Layout-Design Digital

Mockup

Similar o wireframe com a diferença, que se aproxima mais perto do resultado final e consequentemente parte das funcionalidades;

Facilidade parar cliente entender as ideias;

Mais colorido e mais trabalhoso;

Designers podem representar o serviço com um ambiente visual mais agradável.

Page 8: Layout-Design Digital

Mockup

Page 9: Layout-Design Digital

Regra dos Terços para WEB

Regra dos Terços é uma técnica utilizada na fotografia para se obter melhores resultados e pode ser utilizada para construção das paginas WEB.

Page 10: Layout-Design Digital

Regra dos Terços para WEB

Page 11: Layout-Design Digital

Regra dos Terços para WEB

Page 12: Layout-Design Digital

ExemplosPaginas

Page 13: Layout-Design Digital
Page 14: Layout-Design Digital
Page 15: Layout-Design Digital
Page 16: Layout-Design Digital
Page 17: Layout-Design Digital

Onde podemos criar?

Em ferramentas que possam criar vetores. (Corel, Illustrator, Phostoshop);

Em paginas da WEB;

www.csszengarden.com

Page 18: Layout-Design Digital

Atividade

Construir um mockup para a empresa M-Surf.

Usar o seu logo como base para a construção.

As cores devem seguir a harmonia definida no logo.

Aplicar a regra dos terços para construção do layout