Disciplina: Web Design Segunda Aula

Transcrição

1 Disciplina: Web Design Segunda Aula Diretoria de Pós-graduação e Pesquisa Centro Universitário Senac Prof. M e. Denise Neves profa.denise@hotmail.com.br

2 Conteúdo da Aula Tema: Storyboard/Wireframes Gestalt O esboço do projeto. Navegação de Alto Nível Storyboards/Wireframes Grids 2

3 Gestalt 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. 3

4 Gestalt As principais Leis da Gestalt são: Proximidade; Semelhança; Continuidade; Fechamento; Experiência. 4

5 Gestalt 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. 5

6 Gestalt 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. 6

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 7

8 Gestalt 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. 8

9 Gestalt A Lei do Fechamento diz que nossa mente interpreta um objeto completo simplesmente se os elementos parecerem se agrupar. 9

10 Gestalt 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. 10

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. 11

12 Rolagem 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. 12

13 Planejamento 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. 13

14 Planejamento: Storyboard Quando 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 Programas 14

15 Planejamento: Storyboard 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 15

16 Planejamento: Storyboard 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. 16

17 Definindo o Tema ( finalidade e o conceito do seu site) Atividade *1- Entendendo nosso público alvo: *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. 17