SlideShare uma empresa Scribd logo
W E L C O M E
M O B I L E - F I R S T
N I N G U É M S A B E
Q U A N D O
S U R G I U ?
Primeiros esboços sobre o assunto em 2009
M O B I L E - F I R S T
L U K E WROBLEWSKI
Q U E M ?
Um dos primeiros a defender (com embasamento)
as melhores PRÁTICAS para desenvolvimento mobile.
Livro marco Mobile First: Luke Wroblewski
M O B I L E - F I R S T
S I M P L E S E O B J E T I V O
N A P R Á T I C A
Mobile-first nada mais é do que um conjunto de ideias voltadas para o
desenvolvimento mobile e focadas em conteúdo.
Alguns conceitos: Estratégia de conteúdo, responsive design,
performance, ergonomia e usabilidade (UX).
M O B I L E - F I R S T
C U S T O M E R - F I R S T
P O R Q U E
U T I L I Z A R ?
• Prioriza conteúdo;
• Parte da simplicidade;
• UX na veia;
• Tendências nascem aqui;
• Interação mais intensa;
• Progressive enhancement.
M O B I L E - F I R S T
N E M T U D O S Ã O F L O R E S
P R Ó S E C O N T R A S
PRÓS
• Foco no conteúdo;
• Objetividade;
• Performance;
• Estratégia;
• UX;
• Progressive enhancement;
• Manutenção acessível;
CONTRAS
• Tempo;
• Estratégia;
• UX;
• Requer paciência;
• Conhecimentos específicos;
• Pouca documentação;
• Limitação criativa;
• Quebra anos de padronizações;
M O B I L E - F I R S T
E P O R Q U E N Ã O U T I L I Z A R !
D E S K T O P - F I R S T
• O Processo de produção começa por telas maiores, melhores tecnologias e, após
o desenvolvimento, ajustes são realizados em devices menores e/ou browser
com maiores fatias de mercado.
• Exige menor tempo para concepção de projeto, porém exige muito tempo na
correção de bugs e gestão de dispositivos..
M O B I L E - F I R S T
E S T R A T É G I A É A C H A V E
D E S K T O P > M O B I L E
M O B I L E - F I R S T
P A R A A G R A D A R A T O D O S
E N T R E G A P O R
D E M A N D A S
M O B I L E - F I R S T
• A flexibilidade é umas das melhores características desse novo/velho paradigma
de desenvolvimento.
• Projetos podem ser fragmentados, onde uma estrutura geral é adotada,
desenvolvida para desktop, porém, blocos de maior complexidade são
apresentados separadamente.
M O B I L E - F I R S T
N U N C A F O I T Ã O F Á C I L !
F E R R A M E N T A S
M O B I L E - F I R S T
• Sketch
• Figma
• Adobe XD
• NINJAMOCK
• Justinmind
• Proto.io
• InvisionApp (2018)
O B R I G A D Z

Mais conteúdo relacionado

Semelhante a Mobile First | DZ Estúdio

Profissão: Designer de Interação
Profissão: Designer de InteraçãoProfissão: Designer de Interação
Profissão: Designer de Interação
Tersis Zonato
 
A evolução do ux nas empresas (e como promovê-la)
A evolução do ux nas empresas (e como promovê-la)A evolução do ux nas empresas (e como promovê-la)
A evolução do ux nas empresas (e como promovê-la)
Diogo Cosentino
 
A evolução do ux nas empresas (e como promovê-la)
A evolução do ux nas empresas (e como promovê-la)A evolução do ux nas empresas (e como promovê-la)
A evolução do ux nas empresas (e como promovê-la)
Coletivo Mola
 
Agile Product Development Toolbox 2.0
Agile Product Development Toolbox 2.0Agile Product Development Toolbox 2.0
Agile Product Development Toolbox 2.0
Alberto Caeiro, CSPO, CSM, PMP
 
SCRUM.pptx
SCRUM.pptxSCRUM.pptx
SCRUM.pptx
Ricardo Santos
 
Como não ferrar com a user experience - Campus Party 2012
Como não ferrar com a user experience - Campus Party 2012 Como não ferrar com a user experience - Campus Party 2012
Como não ferrar com a user experience - Campus Party 2012
Juliana Gaiba
 
Prototipagem e MVP para startups
Prototipagem e MVP para startupsPrototipagem e MVP para startups
Prototipagem e MVP para startups
Jennifer Payne
 
O papel e a carreira do arquiteto de software
O papel e a carreira do arquiteto de softwareO papel e a carreira do arquiteto de software
O papel e a carreira do arquiteto de software
Leonardo Zanivan
 
Sistemas sustentáveis
Sistemas sustentáveisSistemas sustentáveis
Sistemas sustentáveis
Hugo Corbucci
 
Lidando com Equipes de Desenvolvimento
Lidando com Equipes de DesenvolvimentoLidando com Equipes de Desenvolvimento
Lidando com Equipes de Desenvolvimento
4Soft
 
AGILE UX: Projetando a User Experience no Mundo Ágil
AGILE UX: Projetando a User Experience no Mundo ÁgilAGILE UX: Projetando a User Experience no Mundo Ágil
AGILE UX: Projetando a User Experience no Mundo Ágil
Diogo Riker
 
Ux para software
Ux para softwareUx para software
Ux para software
Viviane Delvequio
 
UX Talks | Desafios na Prática de UX Design
UX Talks | Desafios na Prática de UX DesignUX Talks | Desafios na Prática de UX Design
UX Talks | Desafios na Prática de UX Design
Lara Brito
 
User Experience Boot Camp
User Experience Boot CampUser Experience Boot Camp
User Experience Boot Camp
UTFPR
 
XP & Scrum from the trenches @ LeroyMerlin Brazil
XP & Scrum from the trenches @ LeroyMerlin BrazilXP & Scrum from the trenches @ LeroyMerlin Brazil
XP & Scrum from the trenches @ LeroyMerlin Brazil
Gaëtan Belbéoc'h
 
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
 
Laboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
Laboratório Web 2013-2014 - Etapas na Produção: Análise e PesquisaLaboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
Laboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
Ricardo Pereira Rodrigues
 
Eduardo Rocha - Criando produtos invisíveis
Eduardo Rocha - Criando produtos invisíveis   Eduardo Rocha - Criando produtos invisíveis
Eduardo Rocha - Criando produtos invisíveis
Agile Trends
 
Fatores que influenciam na longevidade de um Software
Fatores que influenciam na longevidade de um SoftwareFatores que influenciam na longevidade de um Software
Fatores que influenciam na longevidade de um Software
Pablo Dall'Oglio
 
Como encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-endComo encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-end
Jean Carlo Emer
 

Semelhante a Mobile First | DZ Estúdio (20)

Profissão: Designer de Interação
Profissão: Designer de InteraçãoProfissão: Designer de Interação
Profissão: Designer de Interação
 
A evolução do ux nas empresas (e como promovê-la)
A evolução do ux nas empresas (e como promovê-la)A evolução do ux nas empresas (e como promovê-la)
A evolução do ux nas empresas (e como promovê-la)
 
A evolução do ux nas empresas (e como promovê-la)
A evolução do ux nas empresas (e como promovê-la)A evolução do ux nas empresas (e como promovê-la)
A evolução do ux nas empresas (e como promovê-la)
 
Agile Product Development Toolbox 2.0
Agile Product Development Toolbox 2.0Agile Product Development Toolbox 2.0
Agile Product Development Toolbox 2.0
 
SCRUM.pptx
SCRUM.pptxSCRUM.pptx
SCRUM.pptx
 
Como não ferrar com a user experience - Campus Party 2012
Como não ferrar com a user experience - Campus Party 2012 Como não ferrar com a user experience - Campus Party 2012
Como não ferrar com a user experience - Campus Party 2012
 
Prototipagem e MVP para startups
Prototipagem e MVP para startupsPrototipagem e MVP para startups
Prototipagem e MVP para startups
 
O papel e a carreira do arquiteto de software
O papel e a carreira do arquiteto de softwareO papel e a carreira do arquiteto de software
O papel e a carreira do arquiteto de software
 
Sistemas sustentáveis
Sistemas sustentáveisSistemas sustentáveis
Sistemas sustentáveis
 
Lidando com Equipes de Desenvolvimento
Lidando com Equipes de DesenvolvimentoLidando com Equipes de Desenvolvimento
Lidando com Equipes de Desenvolvimento
 
AGILE UX: Projetando a User Experience no Mundo Ágil
AGILE UX: Projetando a User Experience no Mundo ÁgilAGILE UX: Projetando a User Experience no Mundo Ágil
AGILE UX: Projetando a User Experience no Mundo Ágil
 
Ux para software
Ux para softwareUx para software
Ux para software
 
UX Talks | Desafios na Prática de UX Design
UX Talks | Desafios na Prática de UX DesignUX Talks | Desafios na Prática de UX Design
UX Talks | Desafios na Prática de UX Design
 
User Experience Boot Camp
User Experience Boot CampUser Experience Boot Camp
User Experience Boot Camp
 
XP & Scrum from the trenches @ LeroyMerlin Brazil
XP & Scrum from the trenches @ LeroyMerlin BrazilXP & Scrum from the trenches @ LeroyMerlin Brazil
XP & Scrum from the trenches @ LeroyMerlin Brazil
 
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ç...
 
Laboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
Laboratório Web 2013-2014 - Etapas na Produção: Análise e PesquisaLaboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
Laboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
 
Eduardo Rocha - Criando produtos invisíveis
Eduardo Rocha - Criando produtos invisíveis   Eduardo Rocha - Criando produtos invisíveis
Eduardo Rocha - Criando produtos invisíveis
 
Fatores que influenciam na longevidade de um Software
Fatores que influenciam na longevidade de um SoftwareFatores que influenciam na longevidade de um Software
Fatores que influenciam na longevidade de um Software
 
Como encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-endComo encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-end
 

Mais de DZ Estúdio

O livro verde | DZ Estúdio
O livro verde | DZ EstúdioO livro verde | DZ Estúdio
O livro verde | DZ Estúdio
DZ Estúdio
 
Gestão de Projetos | DZ Estúdio
Gestão de Projetos | DZ EstúdioGestão de Projetos | DZ Estúdio
Gestão de Projetos | DZ Estúdio
DZ Estúdio
 
SEO | DZ Estúdio
SEO | DZ EstúdioSEO | DZ Estúdio
SEO | DZ Estúdio
DZ Estúdio
 
Humor na Internet Brasileira | DZ Estúdio
Humor na Internet Brasileira | DZ EstúdioHumor na Internet Brasileira | DZ Estúdio
Humor na Internet Brasileira | DZ Estúdio
DZ Estúdio
 
URL Tracking | DZ Estúdio
URL Tracking | DZ EstúdioURL Tracking | DZ Estúdio
URL Tracking | DZ Estúdio
DZ Estúdio
 
Reuniões produtivas | DZ Estúdio
Reuniões produtivas | DZ EstúdioReuniões produtivas | DZ Estúdio
Reuniões produtivas | DZ Estúdio
DZ Estúdio
 
Análise de Dados x Cases | DZ Estúdio
Análise de Dados x Cases | DZ EstúdioAnálise de Dados x Cases | DZ Estúdio
Análise de Dados x Cases | DZ Estúdio
DZ Estúdio
 
DZ Partner for Change
DZ Partner for ChangeDZ Partner for Change
DZ Partner for Change
DZ Estúdio
 
Estratégia Digital - a importância de pensar dentro da caixa
Estratégia Digital - a importância de pensar dentro da caixaEstratégia Digital - a importância de pensar dentro da caixa
Estratégia Digital - a importância de pensar dentro da caixa
DZ Estúdio
 
Sac 2.0: um guia de como atender (bem) o consumidor nas redes sociais
Sac 2.0: um guia de como atender (bem) o consumidor nas redes sociaisSac 2.0: um guia de como atender (bem) o consumidor nas redes sociais
Sac 2.0: um guia de como atender (bem) o consumidor nas redes sociais
DZ Estúdio
 
O livro verde: 10 lições smart / simple para projetos digitais
O livro verde: 10 lições smart / simple para projetos digitaisO livro verde: 10 lições smart / simple para projetos digitais
O livro verde: 10 lições smart / simple para projetos digitais
DZ Estúdio
 

Mais de DZ Estúdio (11)

O livro verde | DZ Estúdio
O livro verde | DZ EstúdioO livro verde | DZ Estúdio
O livro verde | DZ Estúdio
 
Gestão de Projetos | DZ Estúdio
Gestão de Projetos | DZ EstúdioGestão de Projetos | DZ Estúdio
Gestão de Projetos | DZ Estúdio
 
SEO | DZ Estúdio
SEO | DZ EstúdioSEO | DZ Estúdio
SEO | DZ Estúdio
 
Humor na Internet Brasileira | DZ Estúdio
Humor na Internet Brasileira | DZ EstúdioHumor na Internet Brasileira | DZ Estúdio
Humor na Internet Brasileira | DZ Estúdio
 
URL Tracking | DZ Estúdio
URL Tracking | DZ EstúdioURL Tracking | DZ Estúdio
URL Tracking | DZ Estúdio
 
Reuniões produtivas | DZ Estúdio
Reuniões produtivas | DZ EstúdioReuniões produtivas | DZ Estúdio
Reuniões produtivas | DZ Estúdio
 
Análise de Dados x Cases | DZ Estúdio
Análise de Dados x Cases | DZ EstúdioAnálise de Dados x Cases | DZ Estúdio
Análise de Dados x Cases | DZ Estúdio
 
DZ Partner for Change
DZ Partner for ChangeDZ Partner for Change
DZ Partner for Change
 
Estratégia Digital - a importância de pensar dentro da caixa
Estratégia Digital - a importância de pensar dentro da caixaEstratégia Digital - a importância de pensar dentro da caixa
Estratégia Digital - a importância de pensar dentro da caixa
 
Sac 2.0: um guia de como atender (bem) o consumidor nas redes sociais
Sac 2.0: um guia de como atender (bem) o consumidor nas redes sociaisSac 2.0: um guia de como atender (bem) o consumidor nas redes sociais
Sac 2.0: um guia de como atender (bem) o consumidor nas redes sociais
 
O livro verde: 10 lições smart / simple para projetos digitais
O livro verde: 10 lições smart / simple para projetos digitaisO livro verde: 10 lições smart / simple para projetos digitais
O livro verde: 10 lições smart / simple para projetos digitais
 

Mobile First | DZ Estúdio

  • 1.
  • 2. W E L C O M E M O B I L E - F I R S T
  • 3. N I N G U É M S A B E Q U A N D O S U R G I U ? Primeiros esboços sobre o assunto em 2009 M O B I L E - F I R S T
  • 4. L U K E WROBLEWSKI Q U E M ? Um dos primeiros a defender (com embasamento) as melhores PRÁTICAS para desenvolvimento mobile. Livro marco Mobile First: Luke Wroblewski M O B I L E - F I R S T
  • 5. S I M P L E S E O B J E T I V O N A P R Á T I C A Mobile-first nada mais é do que um conjunto de ideias voltadas para o desenvolvimento mobile e focadas em conteúdo. Alguns conceitos: Estratégia de conteúdo, responsive design, performance, ergonomia e usabilidade (UX). M O B I L E - F I R S T
  • 6. C U S T O M E R - F I R S T P O R Q U E U T I L I Z A R ? • Prioriza conteúdo; • Parte da simplicidade; • UX na veia; • Tendências nascem aqui; • Interação mais intensa; • Progressive enhancement. M O B I L E - F I R S T
  • 7. N E M T U D O S Ã O F L O R E S P R Ó S E C O N T R A S PRÓS • Foco no conteúdo; • Objetividade; • Performance; • Estratégia; • UX; • Progressive enhancement; • Manutenção acessível; CONTRAS • Tempo; • Estratégia; • UX; • Requer paciência; • Conhecimentos específicos; • Pouca documentação; • Limitação criativa; • Quebra anos de padronizações; M O B I L E - F I R S T
  • 8. E P O R Q U E N Ã O U T I L I Z A R ! D E S K T O P - F I R S T • O Processo de produção começa por telas maiores, melhores tecnologias e, após o desenvolvimento, ajustes são realizados em devices menores e/ou browser com maiores fatias de mercado. • Exige menor tempo para concepção de projeto, porém exige muito tempo na correção de bugs e gestão de dispositivos.. M O B I L E - F I R S T
  • 9. E S T R A T É G I A É A C H A V E D E S K T O P > M O B I L E M O B I L E - F I R S T
  • 10. P A R A A G R A D A R A T O D O S E N T R E G A P O R D E M A N D A S M O B I L E - F I R S T • A flexibilidade é umas das melhores características desse novo/velho paradigma de desenvolvimento. • Projetos podem ser fragmentados, onde uma estrutura geral é adotada, desenvolvida para desktop, porém, blocos de maior complexidade são apresentados separadamente.
  • 11. M O B I L E - F I R S T
  • 12. N U N C A F O I T Ã O F Á C I L ! F E R R A M E N T A S M O B I L E - F I R S T • Sketch • Figma • Adobe XD • NINJAMOCK • Justinmind • Proto.io • InvisionApp (2018)
  • 13. O B R I G A D Z