Embed Size (px)
Citation preview
Conteúdo da Aula
Tema: Storyboard/Wireframes
O esboço do projeto.
Navegação de Alto Nível
Storyboards/Wireframes
2
3
4
Em sites one page a rolagem é o ponto principal.
Duas tendências fortes:
Há vantagens e desvantagens para ambas as tendências:
•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
5
Conteúdo da Aula
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.
Ambos os profissionais técnicos e de criação usam storyboards, o que
pode agilizar o processo de design e desenvolvimento.
container
6
Um storyboard website geralmente começa com uma série de
retângulos em branco em uma página, uma para cada página do site.
Dependendo da empresa e os designers, o espaço pode aparecer
perto das placas em branco para notas ou perguntas.
Um designer de informação, designer gráfico ou web designer
preenche o storyboard com um esboço básico de cada página para
demonstrar como ele vai olhar e sentir; ele pode ser tão simples
como caixas na página ou tão complexo como um esboço completo.
Storyboards ajudar uma equipe de design e / ou clientes chegam ao
mesmo entendimento sobre o que a página vai fazer no momento, e
fazer alterações iniciais para o projeto básico.
7
Um dos papéis mais importantes de um storyboard é fornecer um
diagrama wireframe básica do que cada página será semelhante. 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 espaço para a cópia site. 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 para
ver se os principais elementos terá espaço suficiente para atrair a
atenção dos telespectadores.
8
Regra dos três terços - Equilibrio
Etapa 1 : Pegue um pedaço de papel e desenhe um retângulo para
representar seu site. Então, divida seu retângulo na vertical em terços.
Etapa 2 : Divida os retângulos na horizontal em terços.
Etapa 3 : Divida cada uma das suas colunas verticais em terços.
Etapa 4 : Faça seu layout alinhando os elementos nas linhas de grade.
9
NAVEGAÇÃO
Acessar a COM MENOS CLIQUES POSSÍVEL.
Pode-se ter menu superior, menu inferior, auxiliar, na direita,
na esquerda, aparente, escondido,… enfim, continuam testando
o menu de formas diferentes para fazê-lo funcionar bem e ser
útil.
Tendências :
Menus horizontais e as opções em listas. Navegação no corpo
da página. (sites one page ond a rolagem é o ponto principal)
Ex: http://htmlcoder.me/preview/worthy/v.1.0/
10
WIREFRAME
Metáfora visual Assim que tiver um tema geral do site e tiver
começado a pensar sobre o que deseja, precisará considerar aonde
todo o conteúdo do seu site irá.
Gastar um tempo na série de idéias sobre o conteúdo do seu projeto.
Topo
Corpo (definir quantidade de colunas – distribuir conteúdo)
Rodapé
Comecem a buscar elementos visuais para reforçar o tema!
11
Ferramenta para Mockup
http://lumzy.com/app/
12 https://www.wirify.com/
Referências
SIARTO,Jeff ;WATRALL,Ethan. Use a cabeça: Web Design. Rio de Janeiro:
Alta Books, 2009.
Links:
http://www.evolutionoftheweb.com/?hl=pt-br
http://oldweb.today/
13
