DWEB. Design para Web. Diagramação Web. Curso Superior de Tecnologia em Design Gráfico

Tamanho: px

Começar a partir da página:

Download "DWEB. Design para Web. Diagramação Web. Curso Superior de Tecnologia em Design Gráfico"

Carla Alencastre Ferrão
8 Há anos
Visualizações:

1 DWEB Design para Web Curso Superior de Tecnologia em Design Gráfico Diagramação Web Medita estas coisas; ocupate nelas, para que o teu aproveitamento seja manifesto a todos. 1 Timóteo 4:15

2 Contatos Carlos José

3 Objetivo Apresentar os fundamentos de utilização de um sistema de grids para diagramação web.

4 Agenda Grid Grid system

5 Diagramação Web Introdução Cada recomendação gerada em wireframe foi pensada e tem uma razão de ser. Logo, deve ser respeitada pelo designer. Em qualquer tipo de interface, contraste, ritmo, harmonia e equilíbrio estão presentes na composição. Agregaram-se então a arquitetura de informação e a usabilidade como campos de estudo do que podemos chamar de diagramação digital. Edição 71 Novembro 009

Em qualquer tipo de interface, contraste, ritmo, harmonia e equilíbrio estão presentes na

6 Introdução Grids não são uma moda passageira: foram criados antes dos tipos móveis. Parece que todos os designers interativos estão, pela primeira vez em suas carreiras, olhando para os impressos e para a teoria gráfica em busca de inspiração. As pessoas justificam um projeto ruim porque não quebra o grid, eles esquecem que feio é sempre feio. Edição 15 Dezembro 010 O grid é uma ajuda, não uma garantia.

impressos e para a teoria gráfica em busca de inspiração.

7 Introdução

8 Introdução

9 Introdução Grid é a base sobre a qual um design é construído.

10 Introdução O grid permite que o designer organize de modo eficiente diversos elementos.

11 Introdução Grids adicionam ordem e estrutura ao design, quer seja simples ou complexo. Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 008.

12 Grid? Subdividir uma página vertical e horizontalmente em: Margens Colunas Espaços entre colunas Linhas de texto e espaços entre blocos de texto e imagens. Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 008.

texto e espaços entre blocos de texto e imagens.

13 Grid? Margem externa Margem central Módulos de imagem Grid de linhas de base Coluna Medianiz Margem inferior Espaço entre colunas

14 Por que usar? A subdivisão forma a base de uma abordagem modular e sistemática ao layout principalmente para documentos com múltiplas páginas. Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 008.

15 Por que usar? Torna o processo de design mais rápido e garante a coerência visual. Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 008.

16 Leitura Como lemos uma página?

17 Leitura Qualquer página tem elementos ativos e passivos devido à natureza do conteúdo e à maneira como enxergamos a página. Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 008.

18 Leitura Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 008.

19 Leitura Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 008.

20 Leitura Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 008.

21 Leitura Como lemos uma tela?

22 Leitura Da mesma forma que analisamos uma página impressa em busca de palavras-chave ou pontos de interesse. Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 008.

23 Leitura O Designer pode interferir nesse processo destacando ou adicionando marcadores afim de garantir que as seções e informações mais importantes saltem aos olhos. Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 008.

24 Padrão F Passamos os olhos rapidamente pelo topo da página, da esquerda para direita em duas faixas, e seguimos para baixo a procura de algo relevante. Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 008.

25 Padrão F Este padrão é resultante da tentativa de aprender rapidamente informações em um website. Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 008.

26 Padrão F Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 008.

27 Pirâmide Invertida As informações mais importantes e impactantes aparecem no topo, seguidas por informações secundárias e por fim as informações gerais por último. Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 008.

28 Pirâmide Invertida Este padrão oriundo do jornalismo, visa gerar um ponto de dobra criando uma linha imaginária que limita o que pode ser visualizado sem a rolagem de tela. Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 008.

29 Pirâmide Invertida Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 008.

30 Grid system O Sistema de grid web está dividido em: Largura fixa Largura flexível ou responsiva Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 008.

31 Grid system Largura fixa A largura fixa têm como finalidade principal manter a largura o layout inalterado independente da janela do navegador ou a resolução da tela do dispositivo ao qual está sendo exibido. Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 008.

32 Grid system

33 Grid system Largura fixa 1 Colunas layout com pouco conteúdo. A largura de uma coluna é de 60px, a largura da margem da esquerda é de 10px e a largura da margem da direita é de 10px.

34 Grid system

35 Grid system Largura fixa 16 Colunas layout com médio conteúdo como blogs ou websites institucionais. A largura de uma coluna é de 40px, a largura da margem da esquerda é de 10px e a largura da margem da direita é de 10px. 40px

36 Grid system Largura fixa 4 Colunas layout com muito conteúdo como portais de notícias e e-commerce com uma variedade de produtos muito vasta. A largura de uma coluna é de 30px, a largura da margem da esquerda é de 10px e a largura da margem da direita é de 10px. 30px

37 Grid system Largura flexível ou responsiva A largura flexível ou responsiva têm como finalidade principal ajustar a largura do layout em função da janela do navegador ou da resolução da tela do dispositivo ao qual está sendo exibido. Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 008.

38 Grid system

39 Grid system Largura flexível ou responsiva? Colunas para qualquer layout. A largura de uma coluna pode ser 5%, 10%, % ou % para atingir um total de 100%. A largura da margem da esquerda é de 10px e a largura da margem da direita é de 10px. Os valores em pixel variam de acordo com a tela do dispositivo. Este sistema de grid permite aninhar colunas.

40 Grid system 1 Colunas - Unsemantic

41 Grid system Photoshop Para criação de layout utilizando o grid system no Adobe Photoshop: 960.gs ( GuideGuide (

42 Dúvidas?

Documentos relacionados

ARQI. Arquitetura de Informação. Prototipação, layout e wireframe. Curso Superior de Tecnologia em Design Gráfico

ARQI. Arquitetura de Informação. Prototipação, layout e wireframe. Curso Superior de Tecnologia em Design Gráfico ARQI Arquitetura de Informação Curso Superior de Tecnologia em Design Gráfico Prototipação, layout e wireframe Conserva o modelo das sãs palavras que de mim tens ouvido, na fé e no amor que há em Cristo