Aula lecionada sobre Responsive Web Design - Wireframe para nível técnico no SENAC por Renato Bongiorno.

1. mobile - wireframe
Renato Bongiorno

2. AI - Mobile
Atividades e conceitos da aula:
- Conceitos AI
- Wireframe
- Responsive Wireframe
- Atividade

3. Mobile - wireframe
Arquitetura 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.”

4. Mobile - wireframe
usabilidade
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

5. Mobile - wireframe
usabilidade
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.

6. Mobile - wireframe
objetivos 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.

7. Mobile - wireframe
objetivos 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

8. Mobile - wireframe
objetivos do wireframe

9. Mobile - wireframe
objetivos 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.

10. Mobile - wireframe
fixed 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)

11. Mobile - wireframe
fluid 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).

12. Mobile - wireframe
fluid layout
Exemplo - Supondo um projeto de um blog com as seguintes resoluções:

13. Mobile - wireframe
fluid layout - adaptação front end home

14. Mobile - wireframe
fluid layout - adaptação front end home

15. Mobile - wireframe
fluid layout - adaptação front end home

16. Mobile - wireframe
fluid layout - adaptação front end home

17. Mobile - wireframe
fluid layout - adaptação front end home

18. Mobile - wireframe
fluid layout - adaptação front end home

19. Mobile - wireframe
fluid 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.

20. Mobile - wireframe
fluid 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.

21. Mobile - wireframe
fluid layout - adaptação post area

22. Mobile - wireframe
fluid layout - adaptação post area

23. Mobile - wireframe
fluid layout - adaptação post area

24. Mobile - wireframe
dicas 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

25. Mobile - wireframe
dicas 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.

26. Mobile - wireframe
dicas para mobile wireframe
Interação com o Usuário
- Como o usuário interage com seu site?
Pense em:
- Mensagens modais
- Formulários
- CTA

27. Mobile - wireframe
dicas 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

28. Mobile - wireframe
dicas 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

29. Mobile - wireframe
dicas para mobile wireframe
Exemplo - Exercício 01
Desktop
http://wireframe.cc/uibehf
Landscape
http://wireframe.cc/6Mg3Iu
Portrait
http://wireframe.cc/HUv05C