responsive web design - wireframe
TRANSCRIPT
![Page 1: Responsive Web Design - Wireframe](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/1.jpg)
mobile - wireframe
Renato Bongiorno
![Page 2: Responsive Web Design - Wireframe](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/2.jpg)
AI - Mobile
Atividades e conceitos da aula:
- Conceitos AI
- Wireframe
- Responsive Wireframe
- Atividade
![Page 3: Responsive Web Design - Wireframe](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/3.jpg)
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](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/4.jpg)
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](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/5.jpg)
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](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/6.jpg)
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](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/7.jpg)
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](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/8.jpg)
Mobile - wireframeobjetivos do wireframe
![Page 9: Responsive Web Design - Wireframe](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/9.jpg)
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](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/10.jpg)
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](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/11.jpg)
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](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/12.jpg)
Mobile - wireframefluid layout
Exemplo - Supondo um projeto de um blog com as seguintes resoluções:
![Page 13: Responsive Web Design - Wireframe](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/13.jpg)
Mobile - wireframefluid layout - adaptação front end home
![Page 14: Responsive Web Design - Wireframe](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/14.jpg)
Mobile - wireframefluid layout - adaptação front end home
![Page 15: Responsive Web Design - Wireframe](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/15.jpg)
Mobile - wireframefluid layout - adaptação front end home
![Page 16: Responsive Web Design - Wireframe](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/16.jpg)
Mobile - wireframefluid layout - adaptação front end home
![Page 17: Responsive Web Design - Wireframe](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/17.jpg)
Mobile - wireframefluid layout - adaptação front end home
![Page 18: Responsive Web Design - Wireframe](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/18.jpg)
Mobile - wireframefluid layout - adaptação front end home
![Page 19: Responsive Web Design - Wireframe](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/19.jpg)
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](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/20.jpg)
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](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/21.jpg)
Mobile - wireframefluid layout - adaptação post area
![Page 22: Responsive Web Design - Wireframe](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/22.jpg)
Mobile - wireframefluid layout - adaptação post area
![Page 23: Responsive Web Design - Wireframe](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/23.jpg)
Mobile - wireframefluid layout - adaptação post area
![Page 24: Responsive Web Design - Wireframe](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/24.jpg)
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](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/25.jpg)
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](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/26.jpg)
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](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/27.jpg)
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](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/28.jpg)
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](https://reader030.vdocuments.pub/reader030/viewer/2022020116/55ac51a11a28abf0118b4742/html5/thumbnails/29.jpg)
Mobile - wireframedicas para mobile wireframe
Exemplo - Exercício 01
Desktophttp://wireframe.cc/uibehf
Landscapehttp://wireframe.cc/6Mg3Iu
Portraithttp://wireframe.cc/HUv05C