SlideShare uma empresa Scribd logo
1 de 72
Baixar para ler offline
Design Digital 
Dentro e fora da web
“Digite uma citação aqui.” 
–Jaime Silveira 
Who I am? 
Pedro Marques 
UI/UX Designer @ CI&T
tA 
Altamente Ácido
tA
SOBRINHO
PALESTRAS
tA Design old school
SENTA QUE LÁ 
VEM HISTÓRIA
DESIGN 
tA DigiWAT?
Quem Sou eu? 
O que faz o designer 
digital? 
Onde vive… 
O que come… 
Pedro Marques 
UI/UX Designer @ CI&T
Quem Sou eu? 
TODO DESIGNER 
Pedro Marques 
UI/UX Designer @ CI&T
I’M YOUR FATHER
Web
20
20
Design responsivo
Grids! <3
Interfaces Digitais
UX
User eXperience
Experiência do Usuário
Usuário
Cliente
Qualidade
20.000 
POR DIA
:) ou ;(
Enchant me. 
Simplify my life. 
Make me amazing. 
Android Team
DESIGN 
Fora da web
Device Pixel Ratio 
0.75 
1 
1.33 
1.5 
2 
3 
Low dpi 
normal, mdpi 
tvtdpi 
hdpi 
retina, xhdpi 
xxhdpi 
Tá, mas e trampo?
Device Pixel Ratio 
0.75 
1 
1.33 
1.5 
2 
3 
Low dpi 
normal, mdpi 
tvtdpi 
hdpi 
retina, xhdpi 
xxhdpi 
MERCADO
Device Pixel Ratio 
0.75 
1 
1.33 
1.5 
2 
3 
Low dpi 
normal, mdpi 
tvtdpi 
hdpi 
retina, xhdpi 
xxhdpi 
Carência
Device Pixel Ratio 
0.75 
1 
1.33 
1.5 
2 
3 
Low dpi 
normal, mdpi 
tvtdpi 
hdpi 
retina, xhdpi 
xxhdpi 
Portfólio
Device Pixel Ratio 
0.75 
1 
1.33 
1.5 
2 
3 
Low dpi 
normal, mdpi 
tvtdpi 
hdpi 
retina, xhdpi 
xxhdpi 
Como criar?
Device Pixel Ratio 
0.75 
1 
1.33 
1.5 
2 
3 
Low dpi 
normal, mdpi 
tvtdpi 
hdpi 
retina, xhdpi 
xxhdpi 
E outros tantos…
Device Pixel Ratio 
0.75 
1 
1.33 
1.5 
2 
3 
Low dpi 
normal, mdpi 
tvtdpi 
hdpi 
retina, xhdpi 
xxhdpi 
Boas práticas
Device Pixel Ratio 
0.75 
1 
1.33 
1.5 
2 
3 
Low dpi 
normal, mdpi 
tvtdpi 
hdpi 
retina, xhdpi 
xxhdpi 
Boas Práticas 
‣ Consistência 
‣ Projeto detalhado 
‣ Acadêmicos 
‣ Qualidade é melhor que quantidade 
‣ Projetos pessoais
O que estudar?
https://developers.google.com/web/fundamentals/
http://www.awwwards.com/
www.dzndigital.com.br
meetup.com/UX-Belo-Horizonte/
Crie experiências 
Não importa a tela
Crie experiências 
Não importa a tela Perguntas?
Crie experiências 
Não importa a tela 
Que a força esteja com vocês <3
Valeu Galera! 
“Digite uma citação aqui.” 
https://twitter.com/pedro_designer 
pedro@marksdesign.–Jaime Silveira 
com.br 
marksdesign.com.br

Mais conteúdo relacionado

Mais procurados

Programa-Ux-Ui-Design-lisboa-4
Programa-Ux-Ui-Design-lisboa-4Programa-Ux-Ui-Design-lisboa-4
Programa-Ux-Ui-Design-lisboa-4
Greg Palmieri
 

Mais procurados (20)

UX Samsung
UX SamsungUX Samsung
UX Samsung
 
Pensando em UX / UI com o material design
Pensando em UX / UI com o material designPensando em UX / UI com o material design
Pensando em UX / UI com o material design
 
Programa-Ux-Ui-Design-lisboa-4
Programa-Ux-Ui-Design-lisboa-4Programa-Ux-Ui-Design-lisboa-4
Programa-Ux-Ui-Design-lisboa-4
 
Mobile First & Responsive Design
Mobile First & Responsive DesignMobile First & Responsive Design
Mobile First & Responsive Design
 
Interação Homem-Computador - Interfaces naturais
Interação Homem-Computador - Interfaces naturaisInteração Homem-Computador - Interfaces naturais
Interação Homem-Computador - Interfaces naturais
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UX
 
Trabalho Pratico 1 - Introdução ao Design Digital
Trabalho Pratico 1 - Introdução ao Design DigitalTrabalho Pratico 1 - Introdução ao Design Digital
Trabalho Pratico 1 - Introdução ao Design Digital
 
UX para agências de publicidade
UX para agências de publicidadeUX para agências de publicidade
UX para agências de publicidade
 
Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)
 
Interfaces Naturais
Interfaces NaturaisInterfaces Naturais
Interfaces Naturais
 
Workshop • UX design •
Workshop • UX design •  Workshop • UX design •
Workshop • UX design •
 
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
 
style guide ui
style guide uistyle guide ui
style guide ui
 
Experiência do usuário
Experiência do usuárioExperiência do usuário
Experiência do usuário
 
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
 
Usabilidade e Experiencia do Usuario
Usabilidade e Experiencia do UsuarioUsabilidade e Experiencia do Usuario
Usabilidade e Experiencia do Usuario
 
UX Design
UX DesignUX Design
UX Design
 
UX como estratégia para conquistar clientes e impactar negócios
UX como estratégia para conquistar clientes e impactar negóciosUX como estratégia para conquistar clientes e impactar negócios
UX como estratégia para conquistar clientes e impactar negócios
 
Design Android para Desenvolvedores
Design Android para DesenvolvedoresDesign Android para Desenvolvedores
Design Android para Desenvolvedores
 
Interfaces Naturais
Interfaces NaturaisInterfaces Naturais
Interfaces Naturais
 

Destaque

MW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationMW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentation
Charlie Moad
 

Destaque (20)

Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
 
Design Digital como Estratégia de Negócio
Design Digital como Estratégia de NegócioDesign Digital como Estratégia de Negócio
Design Digital como Estratégia de Negócio
 
Grid Design in Web
Grid Design in WebGrid Design in Web
Grid Design in Web
 
MW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationMW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentation
 
Responsive Web Design - UX/UI
Responsive Web Design - UX/UIResponsive Web Design - UX/UI
Responsive Web Design - UX/UI
 
Responsive Web Design - Wireframe
Responsive Web Design - WireframeResponsive Web Design - Wireframe
Responsive Web Design - Wireframe
 
Carey Jenkins: Building the Team that Builds the Product - Seattle Interactiv...
Carey Jenkins: Building the Team that Builds the Product - Seattle Interactiv...Carey Jenkins: Building the Team that Builds the Product - Seattle Interactiv...
Carey Jenkins: Building the Team that Builds the Product - Seattle Interactiv...
 
Ashley Faus - How to Add Live-streaming to Your Marketing Mix - Seattle Inter...
Ashley Faus - How to Add Live-streaming to Your Marketing Mix - Seattle Inter...Ashley Faus - How to Add Live-streaming to Your Marketing Mix - Seattle Inter...
Ashley Faus - How to Add Live-streaming to Your Marketing Mix - Seattle Inter...
 
Scilla Andreen - To Hurt, to Triumph and to Be Human: Expressing Our Humanity...
Scilla Andreen - To Hurt, to Triumph and to Be Human: Expressing Our Humanity...Scilla Andreen - To Hurt, to Triumph and to Be Human: Expressing Our Humanity...
Scilla Andreen - To Hurt, to Triumph and to Be Human: Expressing Our Humanity...
 
Mary Rauzi + Kate Matsudaira - Responsive Branding: Making Your Brand Interac...
Mary Rauzi + Kate Matsudaira - Responsive Branding: Making Your Brand Interac...Mary Rauzi + Kate Matsudaira - Responsive Branding: Making Your Brand Interac...
Mary Rauzi + Kate Matsudaira - Responsive Branding: Making Your Brand Interac...
 
Dr. Augustine Fou - The Lowdown on Ad Fraud for Advertisers - Seattle Interac...
Dr. Augustine Fou - The Lowdown on Ad Fraud for Advertisers - Seattle Interac...Dr. Augustine Fou - The Lowdown on Ad Fraud for Advertisers - Seattle Interac...
Dr. Augustine Fou - The Lowdown on Ad Fraud for Advertisers - Seattle Interac...
 
Branden Miller - Fifty First Dates: How to Choose Strategic Partners - Seattl...
Branden Miller - Fifty First Dates: How to Choose Strategic Partners - Seattl...Branden Miller - Fifty First Dates: How to Choose Strategic Partners - Seattl...
Branden Miller - Fifty First Dates: How to Choose Strategic Partners - Seattl...
 
Chris Dancy - Designing for Wisdom: Designing Contemplative Systems for Extra...
Chris Dancy - Designing for Wisdom: Designing Contemplative Systems for Extra...Chris Dancy - Designing for Wisdom: Designing Contemplative Systems for Extra...
Chris Dancy - Designing for Wisdom: Designing Contemplative Systems for Extra...
 
Michael Huang - Brand New Old Skool - Seattle Interactive 2016
Michael Huang - Brand New Old Skool - Seattle Interactive 2016Michael Huang - Brand New Old Skool - Seattle Interactive 2016
Michael Huang - Brand New Old Skool - Seattle Interactive 2016
 
George Scaff: Revolutionizing Consumer Engagement in the Digital World - Seat...
George Scaff: Revolutionizing Consumer Engagement in the Digital World - Seat...George Scaff: Revolutionizing Consumer Engagement in the Digital World - Seat...
George Scaff: Revolutionizing Consumer Engagement in the Digital World - Seat...
 
A/B Testing - In data we trust
A/B Testing - In data we trustA/B Testing - In data we trust
A/B Testing - In data we trust
 
Jane Mauser, Ross Reynolds, Jesse Schubert, Brian Gower - Changing the World ...
Jane Mauser, Ross Reynolds, Jesse Schubert, Brian Gower - Changing the World ...Jane Mauser, Ross Reynolds, Jesse Schubert, Brian Gower - Changing the World ...
Jane Mauser, Ross Reynolds, Jesse Schubert, Brian Gower - Changing the World ...
 
Michael Ellsworth - Death, Drugs and Disasters - Seattle Interactive 2016
Michael Ellsworth - Death, Drugs and Disasters - Seattle Interactive 2016Michael Ellsworth - Death, Drugs and Disasters - Seattle Interactive 2016
Michael Ellsworth - Death, Drugs and Disasters - Seattle Interactive 2016
 
Benjamin Shown - Rich Content, Malleable Mediums, and Wicked Problems - Seatt...
Benjamin Shown - Rich Content, Malleable Mediums, and Wicked Problems - Seatt...Benjamin Shown - Rich Content, Malleable Mediums, and Wicked Problems - Seatt...
Benjamin Shown - Rich Content, Malleable Mediums, and Wicked Problems - Seatt...
 
Dave Curry + Jonathan Faunce - Virtual, Augmented, and Mixed: The “Reality” O...
Dave Curry + Jonathan Faunce - Virtual, Augmented, and Mixed: The “Reality” O...Dave Curry + Jonathan Faunce - Virtual, Augmented, and Mixed: The “Reality” O...
Dave Curry + Jonathan Faunce - Virtual, Augmented, and Mixed: The “Reality” O...
 

Semelhante a Design Digital - Dentro e Fora da Web

Semelhante a Design Digital - Dentro e Fora da Web (20)

Produtividade
ProdutividadeProdutividade
Produtividade
 
UX Design em 7 Passos - Daniel Werle, Fórum Web Adventista
UX Design em 7 Passos - Daniel Werle, Fórum Web AdventistaUX Design em 7 Passos - Daniel Werle, Fórum Web Adventista
UX Design em 7 Passos - Daniel Werle, Fórum Web Adventista
 
Do código à produção com Gitlab (mundo python)
Do código à produção com Gitlab (mundo python)Do código à produção com Gitlab (mundo python)
Do código à produção com Gitlab (mundo python)
 
Design & Código - Palestra Oi Futuro - Jul/2010
Design & Código - Palestra Oi Futuro - Jul/2010Design & Código - Palestra Oi Futuro - Jul/2010
Design & Código - Palestra Oi Futuro - Jul/2010
 
Qmeeting SP - Design para Business Intelligence
Qmeeting SP - Design para Business IntelligenceQmeeting SP - Design para Business Intelligence
Qmeeting SP - Design para Business Intelligence
 
Webinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerceWebinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerce
 
Desenvolvendo Produtos para Internet das Coisas
Desenvolvendo Produtos para Internet das CoisasDesenvolvendo Produtos para Internet das Coisas
Desenvolvendo Produtos para Internet das Coisas
 
Eduardo Rocha - Criando produtos invisíveis
Eduardo Rocha - Criando produtos invisíveis   Eduardo Rocha - Criando produtos invisíveis
Eduardo Rocha - Criando produtos invisíveis
 
Criando software para o futuro com DDD, Arquitetura, Patterns, e Atitude
Criando software para o futuro com DDD, Arquitetura, Patterns, e AtitudeCriando software para o futuro com DDD, Arquitetura, Patterns, e Atitude
Criando software para o futuro com DDD, Arquitetura, Patterns, e Atitude
 
Designer vs programador
Designer vs programadorDesigner vs programador
Designer vs programador
 
[GUTS-RS] MBehavior, um framework de automação de testes multiplataforma para...
[GUTS-RS] MBehavior, um framework de automação de testes multiplataforma para...[GUTS-RS] MBehavior, um framework de automação de testes multiplataforma para...
[GUTS-RS] MBehavior, um framework de automação de testes multiplataforma para...
 
Phonegap
PhonegapPhonegap
Phonegap
 
Realidade Aumentada
Realidade AumentadaRealidade Aumentada
Realidade Aumentada
 
Apresentacao_2S_Vidyo_v5
Apresentacao_2S_Vidyo_v5Apresentacao_2S_Vidyo_v5
Apresentacao_2S_Vidyo_v5
 
[qCon Rio 2015] Arquitetura Incremental
[qCon Rio 2015] Arquitetura Incremental[qCon Rio 2015] Arquitetura Incremental
[qCon Rio 2015] Arquitetura Incremental
 
Técnicas avançadas de implementação do Google Analytics com GAS
Técnicas avançadas de implementação do Google Analytics com GASTécnicas avançadas de implementação do Google Analytics com GAS
Técnicas avançadas de implementação do Google Analytics com GAS
 
Android: Projetando e Pensando em Design
Android: Projetando e Pensando em DesignAndroid: Projetando e Pensando em Design
Android: Projetando e Pensando em Design
 
A 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignA 3ª Área do Design: Web Design
A 3ª Área do Design: Web Design
 
TDC2018FLN | Trilha Python - Do código à produção em projetos Python usando G...
TDC2018FLN | Trilha Python - Do código à produção em projetos Python usando G...TDC2018FLN | Trilha Python - Do código à produção em projetos Python usando G...
TDC2018FLN | Trilha Python - Do código à produção em projetos Python usando G...
 
Como construir uma boa realidade aumentada
Como construir uma boa realidade aumentadaComo construir uma boa realidade aumentada
Como construir uma boa realidade aumentada
 

Design Digital - Dentro e Fora da Web