responsive web design - wireframe
Post on 20-Jul-2015
306 Views
Preview:
TRANSCRIPT
mobile - wireframe
Renato Bongiorno
AI - Mobile
Atividades e conceitos da aula:
- Conceitos AI
- Wireframe
- Responsive Wireframe
- Atividade
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.”
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
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.
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.
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
Mobile - wireframeobjetivos do 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.
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)
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).
Mobile - wireframefluid layout
Exemplo - Supondo um projeto de um blog com as seguintes resoluções:
Mobile - wireframefluid layout - adaptação front end home
Mobile - wireframefluid layout - adaptação front end home
Mobile - wireframefluid layout - adaptação front end home
Mobile - wireframefluid layout - adaptação front end home
Mobile - wireframefluid layout - adaptação front end home
Mobile - wireframefluid layout - adaptação front end home
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.
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.
Mobile - wireframefluid layout - adaptação post area
Mobile - wireframefluid layout - adaptação post area
Mobile - wireframefluid layout - adaptação post area
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
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.
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
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
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
Mobile - wireframedicas para mobile wireframe
Exemplo - Exercício 01
Desktophttp://wireframe.cc/uibehf
Landscapehttp://wireframe.cc/6Mg3Iu
Portraithttp://wireframe.cc/HUv05C
top related