Upload
trinhnga
View
213
Download
0
Embed Size (px)
Citation preview
Disciplina: Web DesignSegunda Aula
Diretoria de Pós-graduação e Pesquisa
Centro Universitário Senac
Prof. Me. Denise [email protected]
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