O documento discute os princípios do Mobile First e do Design Responsivo. Ele explica que o Mobile First força o foco no conteúdo essencial e nas melhores práticas de UX, enquanto o Design Responsivo cria layouts e conteúdos flexíveis para diferentes telas. O autor argumenta que o Design Responsivo não é apenas uma questão técnica, mas de adaptação a diferentes contextos.
2. //UX.BLOG
Edu Agni / Designer e Consultor
Trabalha há nove anos com projetos nas áreas de
direção de arte, usabilidade, design de interfaces e
front-end. Criador e editor do UX.BLOG e curador da
área de Design da Campus Party Brasil.
www.uxdesign.blog.br
www.twitter.com/eduagni
www.linkedin.com/in/eduagni
11. Existem 5 vezes mais telefones
celulares no mundo do que PCs.
!
http://slidesha.re/QAHdFU
12.
13.
14. Há 6,8 bilhões de pessoas no planeta.
4 bilhões delas usam telefone celular.
3,5 bilhões delas usam uma escova de dentes.
!
http://bit.ly/o03mRg
15.
16.
17.
18.
19.
20.
21.
22. O número total de pessoas acessando a
web através de dispositivos móveis irá
superar o acesso via desktop em 2015.
!
International Data Corporation (http://bit.ly/nLrEdy)
25. Designing Natural Interfaces
Darren David & Nathan Moody, 2008
Interface Gráfica do Usuário
•
•
Interface de linha de comando
•
Gráfica
Indireta
Mouse / Ponteiro
Interface Natural do Usuário
•
•
•
http://bit.ly/H2rZtl
Textual
Abstrata
Teclado QWERTY
•
•
•
Física
Direta
Gestual
26. Designing Natural Interfaces
Darren David & Nathan Moody, 2008
Interface Gráfica do Usuário
Interface Natural do Usuário
1. Controle mediado;
1. Manipulação direta;
2. Maior precisão, menor imersão;
2. Menor precisão, maior imersão;
3. Aproveita a familiaridade e
experiência computacional;
3. Aproveita as suposições do
usuário e conclusões lógicas;
4. Associações emocionais com o
trabalho;
4. Associações emocionais com o
entretenimento;
5. Perfeito para produtividade e
eficiência nas tarefas;
5. Perfeito para tarefas sociais e
colaborativas;
6. A interface é visível e gráfica.
6. A interface é física e invisível.
http://bit.ly/H2rZtl
29. Essas metaformas, esses mapeamentos
de bits virão para ocupar praticamente
todas as facetas da sociedade
contemporânea: trabalho, divertimento,
amor, família, arte elevada, cultura
popular, política.
(Cultura da Interface, de Steven Johnson)
30. Essas metaformas, esses mapeamentos
de bits virão para ocupar praticamente
todas as facetas da sociedade
contemporânea: trabalho, divertimento,
amor, família, arte elevada, cultura
popular, política.
(Cultura da Interface, de Steven Johnson)
http://youtu.be/6Cf7IL_eZ38
39. O mobile não deixa espaço para nenhum
conteúdo de relevância duvidosa. Você precisa
saber o que realmente importa. Para fazer isso
você precisa conhecer bem os seus usuários e
o seu mercado.
40.
41. Mobile First
!
★
A versão mobile te força a ter foco. Afinal, são
apenas 320 pixels de largura para você brincar.
★
A atenção em áreas como Arquitetura de
Informação, Usabilidade e Acessibilidade é
aumentada.
★
Mobile expande suas capacidades técnicas:
GPS, user orientation, multi-touch,
acelerômetro etc.
47. Arquitetura Responsiva
Condições do espaço e ambientes podem mudar e
se adaptar a condições pre-definidas ou
desejáveis , por meio de sensores, alterando as
características de forma, cores, espaços e todos os
elementos que compõem o espaço arquitetônico de
modo responsivo. (Wikipedia)
48. Arquitetura Responsiva
Condições do espaço e ambientes podem mudar e
se adaptar a condições pre-definidas ou
desejáveis , por meio de sensores, alterando as
características de forma, cores, espaços e todos os
elementos que compõem o espaço arquitetônico de
modo responsivo. (Wikipedia)
http://www.youtube.com/watch?v=WwzCfKvFxRQ
49.
50. Layout Responsivo
★ Grids Fluidos
★ Design Adaptatívo e Conteúdo Flexível
★ Otimização de desempenho
53. Estrutura Fluida: Fontes
★ O tamanho padrão da fonte na maioria em praticamente
todos os sites é de 16px
★ As medidas devem ser convertidas de medidas
absolutas (px) para medidas relativas (em)
★ Utilizamos para essa conversão a formula
tamanho ÷ contexto = resultado
61. Arquitetura de Informação
★ Estabelecer uma escala
hierárquica de importância das
informações textuais e gráficas
do site
★ Repensar a pertinência de
apresentação dessas
informações em diferentes
contextos e dispositivos
62.
63.
64.
65.
66.
67. Design Adaptável: Media Queries
Expressões condicionais para aplicar diferentes regras CSS
dependendo da largura do viewport, orientação da tela e/
ou aspect ratio:
★ @media screen and (max-width:480px)
(resolução máxima no viewport de 480px)
★ @media all and (orientation:landscape)
Orientação “paisagem”
★ @media screen and (device-aspect-ratio: 16/9)
Monitores 16:9 (ex.: resolução de 1280 x 720px)
★ @media screen and (min-width: 400px) and (max-width: 700px)
Tela com resolução mínima de 400px e máxima de 700px