Disciplina: Web DesignSegunda Aula

Diretoria de Pós-graduação e Pesquisa

Centro Universitário Senac

Prof. Me. Denise Nevesprofa.denise@hotmail.com.br

Conteúdo da Aula

Tema: Storyboard/Wireframes

Gestalt

O esboço do projeto.

Navegação de Alto Nível

Storyboards/Wireframes

Grids

2

3

A teoria consiste nas observações sobre o fenômeno da percepção

visual, que considera que fatores como equilíbrio, clareza e harmonia

das formas que vemos, contribuem para a melhor estruturação dessas

imagens em nosso cérebro, por atenderem a padrões de organização

desenvolvidos pelo sistema nervoso.

Gestalt

4

As principais Leis da Gestalt são:

• Proximidade;

• Semelhança;

• Continuidade;

• Fechamento;

• Experiência.

Gestalt

5

No design :

ajuda a entender como a informação será passada através das

formas que criamos.

auxilia as pessoas a entenderem e assimilarem as informações

que nós passamos pelas imagens.

melhora os nossos projetos a alcançar os objetivos de

comunicação.

Gestalt

6

A Lei da Proximidade diz que elementos que estão próximos uns dos outros

se agrupam entre si e são percebidos como uma única unidade.

Gestalt

7

A Lei da Semelhança diz que objetos semelhantes tendem a se agrupar,

podendo essa semelhança ser na cor, forma ou tamanho.

Gestalt

8

A Lei da Continuidade diz respeito ao alinhamento de elementos que produzem

um conjunto harmônico e passam a impressão de que os elementos estão

relacionados.

Gestalt

9

A Lei do Fechamento diz que nossa mente interpreta um objeto completo

simplesmente se os elementos parecerem se agrupar.

Gestalt

10

A Lei da Experiência diz que nossa experiência passada favorece a compreensão

e associação de objetos incompletos, desde que nossa consciência tenha

conhecimento de sua existência.

Percebemos a partir das nossas experiências de mundo.

Gestalt

11

Navegação

Navegação : COM MENOS CLIQUES POSSÍVEL.

Destaque na navegação principal (navegação de alto nível).

Liga-se às seções um nível abaixo da página inicial. I (no AI)

O menu é um item do web design que ganhou diferentes versões nos

últimos anos e em 2016 ainda estão experimentando variações.

Objetivo : fazê-lo funcionar bem e ser útil.

12

Em sites one page a rolagem é o ponto principal.

Duas tendências fortes:

•Rolagem Longa: é mais natural e fácil de navegar do que clicar em vários

itens de menus e espaços fora da área de conteúdo, mas torna mais difícil

para fazer a varredura e encontrar informações.

•Rolagem Curta: menos tempo de rolagem faz com que o usuário chegue

rapidamente ao ponto e encontre a solução. Entretanto, a passagem dele

pode ser tão rápida que o faz permanecer menos tempo no web site e

aumentar as taxas de retorno.

Rolagem

13

Entender a arquitetura do site : faz pensar em como pode ser criada uma

boa navegação e um bom design.

O que os usuários querem fazer :

aprender,

encontrar algo,

fazer alguma coisa.

Planejamento

14

Planejamento: StoryboardQuando os criadores de um site estão no processo de design, storyboards é

muitas vezes parte dos estágios iniciais.

Um storyboard é uma maneira de ter uma noção de como o site vai ficar,

sentir e se comportar antes que ele chegue ao projeto oficial. Pode ser

chamado de arte conceitual.

Lápis X Programashttp://chiefofdesign.com.br/wireframes-dicas-sobre-como-construir-um-wireframes-para-as-suas-interfaces/

15

Um dos papéis mais importantes de um storyboard é fornecer um

diagrama wireframe básica de cada página.

O diagrama deve fornecer informações suficientes para dar uma sensação

de quanto espaço cada elemento na página deve ter.

Elementos em um diagrama básico incluem a barra de navegação, links

principais, a área de imagem e videos.

Um diagrama de wireframe é uma parte útil de avaliar a hierarquia de

informações de uma página.

Com um layout visual, é mais fácil ver se os principais elementos terá

espaço suficiente para atrair a atenção dos telespectadores.

Um modo rápido e flexível de encontrar ideias e ter alguns designs

Planejamento: Storyboard

16

Um wireframe é uma representação de baixa fidelidade de um

design.

Um protótipo é uma representação de alta fidelidade, com

interações.

Um mockup é uma representação de média a alta fidelidade, sem

interações.

Planejamento: Storyboard

17

Definindo o Tema ( finalidade e o conceito do seu site)

*1- Entendendo nosso público alvo:

https://www.aterceiraidade.com/curiosidades/idoso-na-internet/

*2- Pesquisando produtos para a terceira idade.

Qual produtos comercializam?

3- Cuidados e necessidades especiais para a terceira idade.

4- Rever AI.

5- Propor wireframe.

Atividade