responsive web design - wireframe

29
mobile - wireframe Renato Bongiorno

Upload: renato-bongiorno-bonfanti

Post on 20-Jul-2015

312 views

Category:

Internet


6 download

TRANSCRIPT

Page 1: Responsive Web Design - Wireframe

mobile - wireframe

Renato Bongiorno

Page 2: Responsive Web Design - Wireframe

AI - Mobile

Atividades e conceitos da aula:

- Conceitos AI

- Wireframe

- Responsive Wireframe

- Atividade

Page 3: Responsive Web Design - Wireframe

Mobile - wireframeArquitetura da informação

Arquitetura de Informação é tornar o complexo claro. WURMAN (1997)

Segundo Steve Taub,

“Arquitetura de Informação é a arte e a ciência de estruturar e organizar ambientes de informação

para ajudar as pessoas a satisfazerem suas necessidades de informação de forma efetiva.”

Page 4: Responsive Web Design - Wireframe

Mobile - wireframeusabilidade

Usabilidade é um conjunto de atributos que incidem sobre o esforço necessário para o uso,

bem como sobre a avaliação individual de tal uso, por uma indicação implícita ou por um conjunto de

usuários - Norma ISO 9241-11

Page 5: Responsive Web Design - Wireframe

Mobile - wireframeusabilidade

Usabilidade - É a mobilidade que o site nos proporciona, ou seja, eu consigo ir para onde eu quiser e achar conteúdo desejado?

Para Frederick van Amstel - Usabilidade é sinônimo de facilidade de uso.

Se um produto é fácil de usar, o usuário tem maior produtividade: aprende mais rápido a usar, memoriza as

operações e comete menos erros.

Page 6: Responsive Web Design - Wireframe

Mobile - wireframeobjetivos arquitetura da informação

O desafio da AI é definir as regras de organização do website, definir o modelo de interação do

usuário com a informação e especificar todas as páginas do website e os elementos que as

compõem.

Page 7: Responsive Web Design - Wireframe

Mobile - wireframeobjetivos do wireframe

● O resultado de pesquisas onde pode ser encontrados todos os elementos em cada tela e suas disposições e orientações

● O intuito é mostrar a hierarquia das informações, das telas e o fluxo de navegação que irá existir.

● O wireframe deve ser apresentado em tons de cinza

● O designer tem toda a liberdade de criar um layout diferente do wireframe desde que sejam respeitadas ar organizações textuais e hierárquicas das telas

Page 8: Responsive Web Design - Wireframe

Mobile - wireframeobjetivos do wireframe

Page 9: Responsive Web Design - Wireframe

Mobile - wireframeobjetivos do wireframe

● Fornece a estrutura que será usada pelo designer para construir o layout, bem como requisitos funcionais que serão usados pelo desenvolvedor.

● Deve ser simples, permitindo rápidas alterações; e informativo, permitindo que se façam testes com usuários.

Page 10: Responsive Web Design - Wireframe

Mobile - wireframefixed layout

Para layouts fixos (desktops) normalmente desenvolvemos um wireframe mestre e replicamos suas áreas "core" para demais

páginas (normalmente a home sofre grande variação de conteúdo)

Page 11: Responsive Web Design - Wireframe

Mobile - wireframefluid layout

Em projetos fluidos e adaptáveis cada página do site terá a quantidade de wireframes conforme a estratégia adotada para

quantas forem as adaptações planejadas em função das resoluções escolhidas como referência (pontos de adaptação).

Page 12: Responsive Web Design - Wireframe

Mobile - wireframefluid layout

Exemplo - Supondo um projeto de um blog com as seguintes resoluções:

Page 13: Responsive Web Design - Wireframe

Mobile - wireframefluid layout - adaptação front end home

Page 14: Responsive Web Design - Wireframe

Mobile - wireframefluid layout - adaptação front end home

Page 15: Responsive Web Design - Wireframe

Mobile - wireframefluid layout - adaptação front end home

Page 16: Responsive Web Design - Wireframe

Mobile - wireframefluid layout - adaptação front end home

Page 17: Responsive Web Design - Wireframe

Mobile - wireframefluid layout - adaptação front end home

Page 18: Responsive Web Design - Wireframe

Mobile - wireframefluid layout - adaptação front end home

Page 19: Responsive Web Design - Wireframe

Mobile - wireframefluid layout

Estratégia adotada pelo autor:

1º) O painel de destaques foi exibindo cada vez menos destaques na primeira tela, ou seja, o usuário precisará acionar a navegação para exibir os destaques escondidos.

2º) As imagens foram reduzindo seu tamanho proporcionalmente.

3º) Itens de interação considerados hierarquicamente inferiores foram omitidos para não “disputar” a atenção do usuário, como links de tags e mídias sociais.

Page 20: Responsive Web Design - Wireframe

Mobile - wireframefluid layout

Estratégia adotada pelo autor:

4º) O corpo do título e texto foram reduzidos juntamente com a entrelinha.

5º) Os Box models foram empilhados liberando o máximo possível a largura da tela para proporcionar uma melhor experiência na leitura.

Page 21: Responsive Web Design - Wireframe

Mobile - wireframefluid layout - adaptação post area

Page 22: Responsive Web Design - Wireframe

Mobile - wireframefluid layout - adaptação post area

Page 23: Responsive Web Design - Wireframe

Mobile - wireframefluid layout - adaptação post area

Page 24: Responsive Web Design - Wireframe

Mobile - wireframedicas para mobile wireframe

Faça o Planejamento das Visualizações do Site

- Cada aplicação é feita de uma série de páginas chamadas de points of views

- Considere quais elementos são vitais para a interface

- Crie uma forma amigável de navegação entre as páginas

- Crie uma lista genérica dos itens mais importantes de navegação

Page 25: Responsive Web Design - Wireframe

Mobile - wireframedicas para mobile wireframe

Rotas de navegação

- A partir da sua home crie a rota de navegação através de indicativos de setas

- Esta etapa de planejamento é fundamental para ter certeza de não deixar de fora todos os elementos da interface do usuário importantes.

Page 26: Responsive Web Design - Wireframe

Mobile - wireframedicas para mobile wireframe

Interação com o Usuário

- Como o usuário interage com seu site?

Pense em:

- Mensagens modais- Formulários- CTA

Page 27: Responsive Web Design - Wireframe

Mobile - wireframedicas para mobile wireframe

Exercício Wireframe - Mudando a forma de pensar:

Etapa 01:- Definir um site para reestruturar áreas uteis

- Acessar: http://wireframe.cc e criar as versões Desktop / iPhone - landscape - portrait

- Salvar o link e postar no grupo do Facebook explicando o porque do layout

- Data entrega: 15/03/2012

Page 28: Responsive Web Design - Wireframe

Mobile - wireframedicas para mobile wireframe

Exercício Wireframe - Redesenhando etapas:

- Acessar o site: http://www.vista.ind.br

- Criar o wireframe com as views e rotas de navegação para: iPad / Android / iPhone para acessar um produto

- Na mão...

- Início - 18/03 | Entrega: 19/03

Page 29: Responsive Web Design - Wireframe

Mobile - wireframedicas para mobile wireframe

Exemplo - Exercício 01

Desktophttp://wireframe.cc/uibehf

Landscapehttp://wireframe.cc/6Mg3Iu

Portraithttp://wireframe.cc/HUv05C