as media queries são só um detalhe!
Post on 21-Jan-2017
5.377 Views
Preview:
TRANSCRIPT
As Media Queries são só um detalhe
…não, pera!
Associar os esforços para o desenvolvimento de uma interface responsiva a etapa de Front-End é um dos maiores equívocos atuais do desenvolvimento web.
http://alistapart.com/article/responsive-web-design
Responsive Design Workflow
Responsive Design Workflow
1. Pesquisa com usuários
2. Estratégia de conteúdo
3. Design de Interação
4. Design Visual
5. Implementação
Pesquisacom usuários1
Compreender o contexto de uso
Contexto Desktop (Interface Gráfica de Usuário)
1. Atenção elevada
2. Tela grande e controle mediado
3. Maior precisão, menor imersão
4. Produtividade e eficiência nas tarefas
5. Conexão rápida
6. Posição estática
Contexto Mobile (Interface Natural de Usuário)
1. Pouca atenção
2. Tela pequena e manipulação direta
3. Menor precisão, maior imersão
4. Tarefas sociais e colaborativas
3. Conexão lenta
4. Posição dinâmica
Design Centrado no Usuário é o processo onde mantemos o foco nas necessidades, desejos e limitações dos usuários durante todo o projeto, a cada tomada de decisão, desde a concepção até o lançamento do produto.
Estratégiade conteúdo2
Estabelecer uma escala hierárquica de importância das informações textuais e gráficas do site.
Repensar a hierarquia e a pertinência de apresentação dessas informações em diferentes contextos e dispositivos.
# Conteúdo Site atual Novo site
1 Links úteis √ √2 Informações de Perfil √ √3 Navegação Primária √ √4 Botão de Login √ √5 Meus Eventos √ √6 Minhas tarefas √ √7 Publicidade √ √8 Qualificações √ √9 Áreas de destaque √ √
10 Informações de mercado √ X11 Arquivos para Download √ X12 Rodapé √ √13 Atividades Recentes X √
1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3 4
5 67
8
9 10
11
12
1
2
3 4
5
6
7
8
9
12
Design de Interação3
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
5mm 7mm 10mm
#sqn
5mm 7mm 10mm
Mínimo
5mm 7mm 10mm
Ideal
Crie Protótipos Navegáveis. Eles ajudam a simular a experiência de navegação, a detalhar o fluxo de tarefas e a dimensionar o projeto de maneira mais eficiente.
Brad Frost “Repeat after me: Mobile Users will do
anything and everything desktop users will do, provided it's presented in a usable way.”
Design Visual4
Designing in the Browser
Style Tiles
HTML Style Guides
Implementação Front-End5
https://dribbble.com/shots/978949-Responsive-Wireframe-Templates-GIF
https://dribbble.com/shots/978949-Responsive-Wireframe-Templates-GIF
https://dribbble.com/shots/978949-Responsive-Wireframe-Templates-GIF
Ethan Marcotte “Fluid grids, flexible images, and media queries
are the three technical ingredients for responsive web design, but it also requires a
different way of thinking.”
Obrigado! Edu Agni é consultor especialista em Experiência do Usuário. Possui 12 anos de experiência nas áreas de
design e usabilidade, e criador do UX.BLOG.
top related