SlideShare uma empresa Scribd logo
1 de 76
Baixar para ler offline
//UX.BLOG


Mobile First &

Responsive Design
//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
Inclusão Digital
Não.
Não.

http://www.youtube.com/watch?v=ndkIP7ec3O8
Existem 5 vezes mais telefones
celulares no mundo do que PCs.
!
http://slidesha.re/QAHdFU
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
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)
Cultura da Interface
Interface: zona entre o
meio e a mensagem
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
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
Projetar para
pessoas

Compartilhar
boas histórias

de
se
jo

us
ab
ili
da
de

<

<

Tríade da
Experiência
Digital

>

< utilidade >

>

Estimular os
sentidos
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)
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
Mobile First
http://www.abookapart.com/products/mobile-first
O excesso de informação em grande
parte dos sites se dá porque é
relativamente fácil adicionar conteúdo
na versão desktop.
Desenhe sua solução primeiro para mobile,
depois para desktop.
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.
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.
Responsive Design
Criar sites com layouts e conteúdos flexíveis e
adaptáveis a uma ampla variedade de
resoluções de tela e dispositivos.
http://alistapart.com/article/responsive-web-design
O que inspirou o
Responsive
Web Design?
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)
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
Layout Responsivo
★ Grids Fluidos
★ Design Adaptatívo e Conteúdo Flexível
★ Otimização de desempenho
Criando uma
Estrutura Fluida
Tamanho ÷ contexto = resultado
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
Estrutura Fluida: Fontes
h1 { font-size: 24px; }!
h1 span { font-size: 18px; }!
!
________________________________________________________________!
!
!
h1 { font-size: 1.5em; }!
/* 24 ÷ 16 = 1.5 */!
!
h1 span { font-size: 0.75em; }!
/* 18 ÷ 24 = 0.75 */!
Estrutura Fluida: Grid
width: 900px

20px
180px
360px
540px
720px
Estrutura Fluida: Grid
max-width: 900px; width: 90%;

2,222222%
20%
40%
60%
80%
Estrutura Fluida: Margin & Padding
800px
20px

40px

500px

40px

20px

margin: 5% (40 ÷ 800 = 0,05)

-

padding: 4% (20 ÷ 500 = 0,04)
Estrutura Fluida: Imagens
width: 45%

max-width: 100%
Criando um
Design Adaptável
Design Adaptável: Breakpoints
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
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
Otimização de
Desempenho
Renomeie ou remova elementos não-semânticos
do seu HTML, e remova seletores ineficientes do CSS.
Reduza o número de requisições do site,
principalmente de Javascript.
Otimize suas imagens com o uso de sprites, compressores,
Base64 encode, ou substituindo-as por CSS3.
http://browserdiet.com/pt/
https://developers.google.com/speed/pagespeed/insights?hl=pt-br
Design Responsivo não é apenas uma

questão tecnológica de adaptação para
diferentes dispositivos, mas sim uma
adaptação para diferentes contextos.
//UX.BLOG

Obrigado ;)
Edu Agni / Designer e Consultor
!
!

www.uxdesign.blog.br
www.twitter.com/eduagni
www.linkedin.com/in/eduagni

Mais conteúdo relacionado

Mais procurados

Desenvolvimento Centrado no Usuário
Desenvolvimento Centrado no UsuárioDesenvolvimento Centrado no Usuário
Desenvolvimento Centrado no UsuárioEdu Agni
 
Interfaces Naturais
Interfaces NaturaisInterfaces Naturais
Interfaces NaturaisEdu Agni
 
Simplificando o design digital
Simplificando o design digitalSimplificando o design digital
Simplificando o design digitalMarconi Pacheco
 
UX UI para Programadores
UX UI para Programadores UX UI para Programadores
UX UI para Programadores Monica Mesquita
 
UX é o novo SEO
UX é o novo SEOUX é o novo SEO
UX é o novo SEOEdu Agni
 
Programa-Ux-Ui-Design-lisboa-4
Programa-Ux-Ui-Design-lisboa-4Programa-Ux-Ui-Design-lisboa-4
Programa-Ux-Ui-Design-lisboa-4Greg Palmieri
 
UI e UX no Material Design
UI e UX no Material DesignUI e UX no Material Design
UI e UX no Material DesignGustavo Gobbi
 
Projetando com Lean UX
Projetando com Lean UXProjetando com Lean UX
Projetando com Lean UXEdu Agni
 
Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Renato Melo
 
Design Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalDesign Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalMarconi Pacheco
 
Evolução do design digital
Evolução do design digitalEvolução do design digital
Evolução do design digitalMarconi Pacheco
 
UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?Marconi Pacheco
 
Usabilidade, User Experience e Design Emocional no E-commerce
Usabilidade, User Experience e Design Emocional no E-commerceUsabilidade, User Experience e Design Emocional no E-commerce
Usabilidade, User Experience e Design Emocional no E-commerceEdu Agni
 
Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuárioBruno Biagioni Neto
 
Experiência do usuário
Experiência do usuárioExperiência do usuário
Experiência do usuárioVictor Rubens
 
Palestra UX e AI
Palestra UX e AIPalestra UX e AI
Palestra UX e AIklaibert
 

Mais procurados (20)

Desenvolvimento Centrado no Usuário
Desenvolvimento Centrado no UsuárioDesenvolvimento Centrado no Usuário
Desenvolvimento Centrado no Usuário
 
Ux vs Ui
Ux vs UiUx vs Ui
Ux vs Ui
 
Interfaces Naturais
Interfaces NaturaisInterfaces Naturais
Interfaces Naturais
 
Simplificando o design digital
Simplificando o design digitalSimplificando o design digital
Simplificando o design digital
 
UX UI para Programadores
UX UI para Programadores UX UI para Programadores
UX UI para Programadores
 
Ux design - Conceitos Básicos
Ux design - Conceitos BásicosUx design - Conceitos Básicos
Ux design - Conceitos Básicos
 
UX é o novo SEO
UX é o novo SEOUX é o novo SEO
UX é o novo SEO
 
Programa-Ux-Ui-Design-lisboa-4
Programa-Ux-Ui-Design-lisboa-4Programa-Ux-Ui-Design-lisboa-4
Programa-Ux-Ui-Design-lisboa-4
 
UI e UX no Material Design
UI e UX no Material DesignUI e UX no Material Design
UI e UX no Material Design
 
Projetando com Lean UX
Projetando com Lean UXProjetando com Lean UX
Projetando com Lean UX
 
Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07
 
Design Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalDesign Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface Digital
 
UX Design
UX DesignUX Design
UX Design
 
Evolução do design digital
Evolução do design digitalEvolução do design digital
Evolução do design digital
 
style guide ui
style guide uistyle guide ui
style guide ui
 
UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?
 
Usabilidade, User Experience e Design Emocional no E-commerce
Usabilidade, User Experience e Design Emocional no E-commerceUsabilidade, User Experience e Design Emocional no E-commerce
Usabilidade, User Experience e Design Emocional no E-commerce
 
Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuário
 
Experiência do usuário
Experiência do usuárioExperiência do usuário
Experiência do usuário
 
Palestra UX e AI
Palestra UX e AIPalestra UX e AI
Palestra UX e AI
 

Destaque

Arquitetura da informação
Arquitetura da informação Arquitetura da informação
Arquitetura da informação Leonardo Foletto
 
Jornada do Consumidor no E-commerce
Jornada do Consumidor no E-commerceJornada do Consumidor no E-commerce
Jornada do Consumidor no E-commerceEdu Agni
 
A evolução da internet e os cuidados necessários
A evolução da internet e os cuidados necessáriosA evolução da internet e os cuidados necessários
A evolução da internet e os cuidados necessáriosEdu Agni
 
Design Emocional e a Experiência Digital
Design Emocional e a Experiência DigitalDesign Emocional e a Experiência Digital
Design Emocional e a Experiência DigitalEdu Agni
 
Gamificando a Experiência Digital
Gamificando a Experiência DigitalGamificando a Experiência Digital
Gamificando a Experiência DigitalEdu Agni
 
A imersão na experiência digital
A imersão na experiência digitalA imersão na experiência digital
A imersão na experiência digitalEdu Agni
 
Pesquisa de Campo e a Entrevista Semi-Estruturada
Pesquisa de Campo e a Entrevista Semi-EstruturadaPesquisa de Campo e a Entrevista Semi-Estruturada
Pesquisa de Campo e a Entrevista Semi-EstruturadaEdu Agni
 

Destaque (7)

Arquitetura da informação
Arquitetura da informação Arquitetura da informação
Arquitetura da informação
 
Jornada do Consumidor no E-commerce
Jornada do Consumidor no E-commerceJornada do Consumidor no E-commerce
Jornada do Consumidor no E-commerce
 
A evolução da internet e os cuidados necessários
A evolução da internet e os cuidados necessáriosA evolução da internet e os cuidados necessários
A evolução da internet e os cuidados necessários
 
Design Emocional e a Experiência Digital
Design Emocional e a Experiência DigitalDesign Emocional e a Experiência Digital
Design Emocional e a Experiência Digital
 
Gamificando a Experiência Digital
Gamificando a Experiência DigitalGamificando a Experiência Digital
Gamificando a Experiência Digital
 
A imersão na experiência digital
A imersão na experiência digitalA imersão na experiência digital
A imersão na experiência digital
 
Pesquisa de Campo e a Entrevista Semi-Estruturada
Pesquisa de Campo e a Entrevista Semi-EstruturadaPesquisa de Campo e a Entrevista Semi-Estruturada
Pesquisa de Campo e a Entrevista Semi-Estruturada
 

Semelhante a Mobile First Design Blog

Dica fundao-sites-responsivos-140528101304-phpapp02
Dica fundao-sites-responsivos-140528101304-phpapp02Dica fundao-sites-responsivos-140528101304-phpapp02
Dica fundao-sites-responsivos-140528101304-phpapp02Bruno da Silva
 
Mobile: web & aplicativos [dicas práticas]
Mobile: web & aplicativos [dicas práticas]Mobile: web & aplicativos [dicas práticas]
Mobile: web & aplicativos [dicas práticas]Ana Laura Gomes
 
Responsive Web Design - Entregando a informação da melhor maneiro possível
Responsive Web Design - Entregando a informação da melhor maneiro possívelResponsive Web Design - Entregando a informação da melhor maneiro possível
Responsive Web Design - Entregando a informação da melhor maneiro possívelSérgio Lima
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Cristofer Sousa
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design ResponsivoVictor Melo
 
Introdução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivoIntrodução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivoRégis Eduardo Weizenmann Gregol
 
Mobile Marketing & A D V E R T I S I N G Nov. 2008
Mobile Marketing & A D V E R T I S I N G  Nov. 2008Mobile Marketing & A D V E R T I S I N G  Nov. 2008
Mobile Marketing & A D V E R T I S I N G Nov. 2008Wesley Carraro
 
Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!Cristofer Sousa
 
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...Augusto César Albuquerque
 
Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...
Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...
Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...Dhiego Bicudo
 
Interatividade gerando Resultados
Interatividade gerando ResultadosInteratividade gerando Resultados
Interatividade gerando ResultadosWillie Taminato
 

Semelhante a Mobile First Design Blog (20)

Dica fundao-sites-responsivos-140528101304-phpapp02
Dica fundao-sites-responsivos-140528101304-phpapp02Dica fundao-sites-responsivos-140528101304-phpapp02
Dica fundao-sites-responsivos-140528101304-phpapp02
 
Sites responsivos
Sites responsivosSites responsivos
Sites responsivos
 
Mobile: web & aplicativos [dicas práticas]
Mobile: web & aplicativos [dicas práticas]Mobile: web & aplicativos [dicas práticas]
Mobile: web & aplicativos [dicas práticas]
 
Responsive Web Design - Entregando a informação da melhor maneiro possível
Responsive Web Design - Entregando a informação da melhor maneiro possívelResponsive Web Design - Entregando a informação da melhor maneiro possível
Responsive Web Design - Entregando a informação da melhor maneiro possível
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
 
Mobile
MobileMobile
Mobile
 
Responsive wordpress
Responsive wordpressResponsive wordpress
Responsive wordpress
 
Curso Marketing Digital Ana Paula Coelho
Curso Marketing Digital Ana Paula CoelhoCurso Marketing Digital Ana Paula Coelho
Curso Marketing Digital Ana Paula Coelho
 
O que é Web Designer?
O que é Web Designer?O que é Web Designer?
O que é Web Designer?
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
Slide 1.pdf
Slide 1.pdfSlide 1.pdf
Slide 1.pdf
 
Ap iii
Ap iiiAp iii
Ap iii
 
Introdução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivoIntrodução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivo
 
Mobile Marketing & A D V E R T I S I N G Nov. 2008
Mobile Marketing & A D V E R T I S I N G  Nov. 2008Mobile Marketing & A D V E R T I S I N G  Nov. 2008
Mobile Marketing & A D V E R T I S I N G Nov. 2008
 
Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!
 
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
 
Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...
Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...
Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...
 
Capitulo1
Capitulo1Capitulo1
Capitulo1
 
Mobile, Adobe & Cia
Mobile, Adobe & CiaMobile, Adobe & Cia
Mobile, Adobe & Cia
 
Interatividade gerando Resultados
Interatividade gerando ResultadosInteratividade gerando Resultados
Interatividade gerando Resultados
 

Mais de Edu Agni

Emancipação pelo Aprendizado do Design
Emancipação pelo Aprendizado do DesignEmancipação pelo Aprendizado do Design
Emancipação pelo Aprendizado do DesignEdu Agni
 
Ensino do design em tempos de quarentena
Ensino do design em tempos de quarentenaEnsino do design em tempos de quarentena
Ensino do design em tempos de quarentenaEdu Agni
 
Inovação e User Experience
Inovação e User ExperienceInovação e User Experience
Inovação e User ExperienceEdu Agni
 
UX Maturity
UX MaturityUX Maturity
UX MaturityEdu Agni
 
Design Emocional
Design EmocionalDesign Emocional
Design EmocionalEdu Agni
 
Social interface Design: projetando interações entre pessoas
Social interface Design: projetando interações entre pessoasSocial interface Design: projetando interações entre pessoas
Social interface Design: projetando interações entre pessoasEdu Agni
 

Mais de Edu Agni (6)

Emancipação pelo Aprendizado do Design
Emancipação pelo Aprendizado do DesignEmancipação pelo Aprendizado do Design
Emancipação pelo Aprendizado do Design
 
Ensino do design em tempos de quarentena
Ensino do design em tempos de quarentenaEnsino do design em tempos de quarentena
Ensino do design em tempos de quarentena
 
Inovação e User Experience
Inovação e User ExperienceInovação e User Experience
Inovação e User Experience
 
UX Maturity
UX MaturityUX Maturity
UX Maturity
 
Design Emocional
Design EmocionalDesign Emocional
Design Emocional
 
Social interface Design: projetando interações entre pessoas
Social interface Design: projetando interações entre pessoasSocial interface Design: projetando interações entre pessoas
Social interface Design: projetando interações entre pessoas
 

Mobile First Design Blog

  • 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
  • 4.
  • 5.
  • 8.
  • 9.
  • 10.
  • 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)
  • 24. Interface: zona entre o meio e a mensagem
  • 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
  • 27.
  • 28. Projetar para pessoas Compartilhar boas histórias de se jo us ab ili da de < < Tríade da Experiência Digital > < utilidade > > Estimular os sentidos
  • 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
  • 33.
  • 34. O excesso de informação em grande parte dos sites se dá porque é relativamente fácil adicionar conteúdo na versão desktop.
  • 35.
  • 36. Desenhe sua solução primeiro para mobile, depois para desktop.
  • 37.
  • 38.
  • 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.
  • 43.
  • 44. Criar sites com layouts e conteúdos flexíveis e adaptáveis a uma ampla variedade de resoluções de tela e dispositivos.
  • 46. O que inspirou o Responsive Web Design?
  • 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
  • 52. Tamanho ÷ contexto = resultado
  • 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
  • 54. Estrutura Fluida: Fontes h1 { font-size: 24px; }! h1 span { font-size: 18px; }! ! ________________________________________________________________! ! ! h1 { font-size: 1.5em; }! /* 24 ÷ 16 = 1.5 */! ! h1 span { font-size: 0.75em; }! /* 18 ÷ 24 = 0.75 */!
  • 55. Estrutura Fluida: Grid width: 900px 20px 180px 360px 540px 720px
  • 56. Estrutura Fluida: Grid max-width: 900px; width: 90%; 2,222222% 20% 40% 60% 80%
  • 57. Estrutura Fluida: Margin & Padding 800px 20px 40px 500px 40px 20px margin: 5% (40 ÷ 800 = 0,05) - padding: 4% (20 ÷ 500 = 0,04)
  • 58. Estrutura Fluida: Imagens width: 45% max-width: 100%
  • 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
  • 69. Renomeie ou remova elementos não-semânticos do seu HTML, e remova seletores ineficientes do CSS.
  • 70. Reduza o número de requisições do site, principalmente de Javascript.
  • 71. Otimize suas imagens com o uso de sprites, compressores, Base64 encode, ou substituindo-as por CSS3.
  • 74.
  • 75. Design Responsivo não é apenas uma
 questão tecnológica de adaptação para diferentes dispositivos, mas sim uma adaptação para diferentes contextos.
  • 76. //UX.BLOG Obrigado ;) Edu Agni / Designer e Consultor ! ! www.uxdesign.blog.br www.twitter.com/eduagni www.linkedin.com/in/eduagni