SlideShare uma empresa Scribd logo
1 de 37
Baixar para ler offline
Material Design
Dezembro 2015
Ana Paula Batista
Google Developer Expert - UX/UI
your
face
here
Ana Paula Batista
Amante do “coletivo”, viagens, vegetariana, 2 gatos, anda a pé ou de bicicleta.
- UX Designer
- 34 anos
- São Paulo - SP
Principais Características
- UXLead na B2W Digital
- Google Developer Expert em UX/UI
- Membro da Diretoria da UXPA-SP
- 14 anos de experiência no desenvolvimento e projetos de
interface
- Formação Multimídia Digital
- 6 anos de estudos em Ciências da Computação/
Sistemas de Informação
Objetivos e Necessidades
- Projetos com valores sociais
- Construção coletiva
Comportamento do Usuário
- Online todo o tempo
- Utiliza wear mas não tem um laptop
- Wakerboarder wannabe
- Não usa facebook
- Curiosity-Driven
200K+
40%+
Material Apps
Desde Lollipop
Crescendo em mundo material
“One of our guiding themes during the Material redesign
was simplicity, and we think this paid off nicely.”
- Hamid, Mobile Lead
- 10% aumento de sessões por usuário
por semana
- 42% mais boards criados por sessão
- 63% mais pessoas aderiram a boards,
por sessão
Aumento de engajamento da ação primária via Material: Trello
“Material design was a great way to start building our
Android app, it was like having a team of design experts,
helping you build the best product for an Android
device.”
- Jenny Davis, Product Designer
- 30% mais usuários iniciaram “hunts”
relativa a plataformas non-Material.
Incrementando o engajamento de novos usuários com FAB: The Hunt
“Material design has really paid off and made our app
much better..the reception we had was amazing. People
love it.”
- Philip Simpson, Co-founder & Android Developer
- 30% aumento nas vendas, desde o
redesign app em Material.
Incentivando vendas: Pocket Casts
- 5x aumento de vendas pelo
app desde o material design
update
- 700% aumento nas vendas
Surpreendendo usuários e aumentando as vendas pelo app: B&H Photo V
“Couldn’t be better, seriously this app has to be one of
the best apps I have ever used.”
“Better than the website - I use the app/retail store quite
often and this app is really helpful.
“Everything is very well organized so it makes it actually
fun just to look through the items in the app!”
Expresse sua marca
● Principalmente através do uso das cores
● Mais flexibilidade nos padrões de interface do usuário
Agrade seus usuários :)
● Mantem consistente com a linguagem natural do Android
● Possibilita uma melhor experiência multi-plataforma
Potencialize o aumento do crescimento e engajamento
● Acompanhe o sucesso de desenvolvedores que têm adotado
material
● Tornam-se elegíveis para os destaques da Play Store
Porquê usar Material?
Metáfora
substantivo feminino
estl ling ret designação de um objeto ou qualidade mediante uma palavra que designa outro objeto ou qualidade que tem com o
primeiro uma relação de semelhança (p.ex., ele tem uma vontade de ferro, para designar uma vontade forte, como o ferro)
Animação Bold, gráfico e
intencional
Superfícies e
sombras
Design adaptativo
Características
- Intuitivas e naturais,
- organizam espaço,
- racionalizam interfaces,
- conceito intrínseco do que está certo ( o que a mente trabalha menos?).
Superfícies e sombras
- 3D: 1dp
- Duas fontes de luz: ambiente e foco.
Superfícies e sombras
Ambiente
Foco Ambiente Foco e Ambiente
- sólido: elementos não podem transpassar uma superfície
- altura e largura podem mudar
- pode mudar de forma
- nunca dobra
- pode mover por qualquer eixo
- Z: interação do usuário
Superfícies e sombras
Propriedades
Superfícies e sombras
Elevação e sombra
Animação
- Reforça a ideia que o usuário é quem tem o
controle da interface,
- Objetos são iniciados e apresentados
mantendo a continuidade da experiência,
- Servem para focar a atenção do usuário,
- Tornam os feedbacks naturais.
Animação
Aceleração natural
- aceleração e desaceleração natural
Animação
Aceleração natural
- mudanças na aceleração e movimentos atraem atenção do usuário
Animação
Interações com feedback
- utilize animação para cada input do usuário,
- devem partir do ponto de interação
Superfície Material Radial
- como os objetos entram? como
saem? quais elementos são
mantidos?
- qual elemento é mais importante e
deve iniciar a animação?
- qual caminho eles devem seguir?
Animação
Transições com significado
Animação
Surpreenda nos detalhes
Bold, gráfico e intencional
- Estética baseada em impressos
- Grids, tipografias, gráficos, espaços, cores,
- Linguagem unificada,
- Cria hierarquia, significado, foco.
Bold, gráfico e intencional
Cores
- tons ousados, justapostos com
ambientes suaves, sombras
profundas, e os destaques
brilhantes.
- A cor deve ser inesperada e
vibrante.
Cor primária
Cor de apoio
- inspirado pelo tátil e qualidade
física do material.
- interage com a luz através de
destaques sutis e sombras
consistentes.
- simples, intuitivo, demonstra a ação
clara e consistente.
Bold, gráfico e intencional
Bold, gráfico e intencional
Ícones
Bold, gráfico e intencional
Imagens
- valoriza o contexto
- pessoal
- traduz informação
- constrói narrativas
- dá foco à intenção
esqueça fundos falsos, cenas confusas e
analogias indevidas.
Um único design adaptativo
- mesmo usuário ;)
- experiência consistente
- mesma linguagem de comunicação
- interface adaptada ao device
- menor custo de manutenção
Resources
- google.com/design
- Icons tool
- Devices tool
- Android Design Support
Library
Como?: updates Maio 2015
Spec Updates
- adaptive layouts
- elevation
- splash screens
- settings
- FAB expansion
- navigation
- empty states
Tips
Evite login ou cadastro obrigatório de cara.
Ofereça uma amostra interativa de conteúdo
público antes do usuário autenticar. Novos
usuários podem não conhecer as propostas
de valor do seu serviço e podem não querer
registrar antes de saber como são os
conteúdos e interações do seu app.
Dê uma “amostra grátis” de seu app
EasyTaxi
Evite pedir login usando apenas midias
sociais; apps devem oferecer um login por e-
mail como uma alternativa.
Não esqueça das minorias
Headspace
Quando uma coleção importante está vazia,
evite mostrar uma mensagem de erro
simples como “Sem itens.” Considere
oferecer maneiras de popular a coleção,
como mostrar itens recomendados ou
permitir que os usuários criem novos itens.
Aproveite todos os momentos
Submarino.com
● intermitente, idealmente deveria tentar
reconectar ou permitir que o usuário
possa tentar novamente.
● permanente, mostre um lembrete útil se
está em modo avião, em vez de um erro
de rede. Permita um timeout sensível
antes que o app decida que a perda de
conexão é permanente.
Verifique sua conexão e tente novamente
Skina
Quando apropriado, o app deve ter a ação chave na
tela usando um botão de ação flutuante (BAF). O
BAF é circular, de superfície elevada, assim deve ter
uma sombra. Ele deve ter uma cor brilhante. Deve
fazer a ação principal como criar, adicionar ou
buscar. Tem que flutuar sobre outras superfícies,
normalmente com 8dp de elevação.
Frequentemente aparece no canto inferior direito da
tela, ou centralizado na borda onde duas superfícies
se encontram.
Alow ação principal!
Evernote
A barra do app não deve incluir o ícone do
app (ao invés disto utilize a nova
apresentação de barras do app de acordo
com as diretrizes do material design). A cor e
a tipografia podem ser usadas da marca.
Identificação
Medisafe
O sidebar menu deve conter apenas
elementos de navegação primários. Evite
mostrar itens que seriam colocados como
ação em uma barra de ferramentas, como por
exemplo Buscar. Além disso, evite incluir itens
secundários como Sobre, Compartilhe este
App, ou Avalie este App - estes tipos de itens
devem aparecer na barra do App,
possivelmente agrupados na tela Sobre.
Sidebar menu
HD Wallpaper
Obrigada! :)
@anapaulazambuja
anapaulaazambuja@gmail.com

Mais conteúdo relacionado

Mais procurados

Ux design como estrategia conquistar clientes impactar negocios
Ux design como estrategia conquistar clientes impactar negociosUx design como estrategia conquistar clientes impactar negocios
Ux design como estrategia conquistar clientes impactar negociostdc-globalcode
 
UX Design: desenvolver experiências positivas - #8 Industry Sessions by EDIT....
UX Design: desenvolver experiências positivas - #8 Industry Sessions by EDIT....UX Design: desenvolver experiências positivas - #8 Industry Sessions by EDIT....
UX Design: desenvolver experiências positivas - #8 Industry Sessions by EDIT....EDIT. - Disruptive Digital Education
 
[Palestra UNICAP] UX Design - Projetando Soluções e Experiências
[Palestra UNICAP] UX Design - Projetando Soluções e Experiências[Palestra UNICAP] UX Design - Projetando Soluções e Experiências
[Palestra UNICAP] UX Design - Projetando Soluções e ExperiênciasAndreza Godoy
 
De Arquiteto a Detetive da Informação
De Arquiteto a Detetive da InformaçãoDe Arquiteto a Detetive da Informação
De Arquiteto a Detetive da InformaçãoAna Paula Batista
 
Ux design/Experiência do Usuário - Conexão KingHost 2015
Ux design/Experiência do Usuário - Conexão KingHost 2015Ux design/Experiência do Usuário - Conexão KingHost 2015
Ux design/Experiência do Usuário - Conexão KingHost 2015Luisa Ambros
 
UX UI para Programadores
UX UI para Programadores UX UI para Programadores
UX UI para Programadores Monica Mesquita
 
UX Design como estratégia para conquistar mais clientes e impactar negócios
UX Design como estratégia para conquistar mais clientes e impactar negóciosUX Design como estratégia para conquistar mais clientes e impactar negócios
UX Design como estratégia para conquistar mais clientes e impactar negóciosCatarinas Design de Interação
 
UX Design para Desenvolvedores
UX Design para DesenvolvedoresUX Design para Desenvolvedores
UX Design para DesenvolvedoresAnderson Façanha
 
JoinCommunity 2 - Projetando um novo app usando user centered design
JoinCommunity 2 - Projetando um novo app usando user centered designJoinCommunity 2 - Projetando um novo app usando user centered design
JoinCommunity 2 - Projetando um novo app usando user centered designFernando Camargo
 
UX e UI - Experiência e Interface aplicada no usuário
UX e UI - Experiência e Interface aplicada no usuárioUX e UI - Experiência e Interface aplicada no usuário
UX e UI - Experiência e Interface aplicada no usuárioRenato Melo
 
apresentação 21212 Aceleradora — Lean UX Workshop
apresentação 21212 Aceleradora — Lean UX Workshopapresentação 21212 Aceleradora — Lean UX Workshop
apresentação 21212 Aceleradora — Lean UX WorkshopPaulo Floriano
 
Testes de usabilidade - Webdesign 2021-02
Testes de usabilidade - Webdesign 2021-02Testes de usabilidade - Webdesign 2021-02
Testes de usabilidade - Webdesign 2021-02Renato Melo
 
Interaction South America 2015 - Concepção de um framework para definição em ...
Interaction South America 2015 - Concepção de um framework para definição em ...Interaction South America 2015 - Concepção de um framework para definição em ...
Interaction South America 2015 - Concepção de um framework para definição em ...Catarinas Design de Interação
 
Design antecipatório para projetos zero interface - Campus Party 2017
Design antecipatório para projetos zero interface - Campus Party 2017Design antecipatório para projetos zero interface - Campus Party 2017
Design antecipatório para projetos zero interface - Campus Party 2017Catarinas Design de Interação
 
Usabilidade em Aplicativos - Webdesign - 2021-02
Usabilidade em Aplicativos - Webdesign - 2021-02Usabilidade em Aplicativos - Webdesign - 2021-02
Usabilidade em Aplicativos - Webdesign - 2021-02Renato Melo
 
LEAN UX - Campus Party 2014
LEAN UX - Campus Party 2014LEAN UX - Campus Party 2014
LEAN UX - Campus Party 2014Horácio Soares
 
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óciosPriscilla Albuquerque
 
User Experience: O que sua empresa pode ganhar com isso - Versão 2.0
User Experience: O que sua empresa pode ganhar com isso - Versão 2.0User Experience: O que sua empresa pode ganhar com isso - Versão 2.0
User Experience: O que sua empresa pode ganhar com isso - Versão 2.0Catarinas Design de Interação
 
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 UXEdu Agni
 

Mais procurados (20)

Ux design como estrategia conquistar clientes impactar negocios
Ux design como estrategia conquistar clientes impactar negociosUx design como estrategia conquistar clientes impactar negocios
Ux design como estrategia conquistar clientes impactar negocios
 
UX Design: desenvolver experiências positivas - #8 Industry Sessions by EDIT....
UX Design: desenvolver experiências positivas - #8 Industry Sessions by EDIT....UX Design: desenvolver experiências positivas - #8 Industry Sessions by EDIT....
UX Design: desenvolver experiências positivas - #8 Industry Sessions by EDIT....
 
[Palestra UNICAP] UX Design - Projetando Soluções e Experiências
[Palestra UNICAP] UX Design - Projetando Soluções e Experiências[Palestra UNICAP] UX Design - Projetando Soluções e Experiências
[Palestra UNICAP] UX Design - Projetando Soluções e Experiências
 
De Arquiteto a Detetive da Informação
De Arquiteto a Detetive da InformaçãoDe Arquiteto a Detetive da Informação
De Arquiteto a Detetive da Informação
 
Ux design/Experiência do Usuário - Conexão KingHost 2015
Ux design/Experiência do Usuário - Conexão KingHost 2015Ux design/Experiência do Usuário - Conexão KingHost 2015
Ux design/Experiência do Usuário - Conexão KingHost 2015
 
UX Design
UX DesignUX Design
UX Design
 
UX UI para Programadores
UX UI para Programadores UX UI para Programadores
UX UI para Programadores
 
UX Design como estratégia para conquistar mais clientes e impactar negócios
UX Design como estratégia para conquistar mais clientes e impactar negóciosUX Design como estratégia para conquistar mais clientes e impactar negócios
UX Design como estratégia para conquistar mais clientes e impactar negócios
 
UX Design para Desenvolvedores
UX Design para DesenvolvedoresUX Design para Desenvolvedores
UX Design para Desenvolvedores
 
JoinCommunity 2 - Projetando um novo app usando user centered design
JoinCommunity 2 - Projetando um novo app usando user centered designJoinCommunity 2 - Projetando um novo app usando user centered design
JoinCommunity 2 - Projetando um novo app usando user centered design
 
UX e UI - Experiência e Interface aplicada no usuário
UX e UI - Experiência e Interface aplicada no usuárioUX e UI - Experiência e Interface aplicada no usuário
UX e UI - Experiência e Interface aplicada no usuário
 
apresentação 21212 Aceleradora — Lean UX Workshop
apresentação 21212 Aceleradora — Lean UX Workshopapresentação 21212 Aceleradora — Lean UX Workshop
apresentação 21212 Aceleradora — Lean UX Workshop
 
Testes de usabilidade - Webdesign 2021-02
Testes de usabilidade - Webdesign 2021-02Testes de usabilidade - Webdesign 2021-02
Testes de usabilidade - Webdesign 2021-02
 
Interaction South America 2015 - Concepção de um framework para definição em ...
Interaction South America 2015 - Concepção de um framework para definição em ...Interaction South America 2015 - Concepção de um framework para definição em ...
Interaction South America 2015 - Concepção de um framework para definição em ...
 
Design antecipatório para projetos zero interface - Campus Party 2017
Design antecipatório para projetos zero interface - Campus Party 2017Design antecipatório para projetos zero interface - Campus Party 2017
Design antecipatório para projetos zero interface - Campus Party 2017
 
Usabilidade em Aplicativos - Webdesign - 2021-02
Usabilidade em Aplicativos - Webdesign - 2021-02Usabilidade em Aplicativos - Webdesign - 2021-02
Usabilidade em Aplicativos - Webdesign - 2021-02
 
LEAN UX - Campus Party 2014
LEAN UX - Campus Party 2014LEAN UX - Campus Party 2014
LEAN UX - Campus Party 2014
 
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
 
User Experience: O que sua empresa pode ganhar com isso - Versão 2.0
User Experience: O que sua empresa pode ganhar com isso - Versão 2.0User Experience: O que sua empresa pode ganhar com isso - Versão 2.0
User Experience: O que sua empresa pode ganhar com isso - Versão 2.0
 
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
 

Semelhante a Material Design em 2015

Deep Dive Material Design, e um pouquinho sobre mobile UX
Deep Dive Material Design, e um pouquinho sobre mobile UXDeep Dive Material Design, e um pouquinho sobre mobile UX
Deep Dive Material Design, e um pouquinho sobre mobile UXNelson Vasconcelos
 
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...Nelson Vasconcelos
 
Principles and best practices of Product Design
Principles and best practices of Product DesignPrinciples and best practices of Product Design
Principles and best practices of Product DesignProduct School
 
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
 
Sequencia didática sobre texto publicitário interface de arte com língua po...
Sequencia didática sobre texto publicitário   interface de arte com língua po...Sequencia didática sobre texto publicitário   interface de arte com língua po...
Sequencia didática sobre texto publicitário interface de arte com língua po...Fabiola Oliveira
 
User Experience Boot Camp
User Experience Boot CampUser Experience Boot Camp
User Experience Boot CampUTFPR
 
12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)maumoreira
 
Plataformas digitais
Plataformas digitaisPlataformas digitais
Plataformas digitaisMake it Loyal
 
Aulas 7. IHC – Projeto de Interface com o Usuário
Aulas 7. IHC – Projeto de Interface com o UsuárioAulas 7. IHC – Projeto de Interface com o Usuário
Aulas 7. IHC – Projeto de Interface com o UsuárioSilvia Dotta
 
Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.Jane Vita
 
Projetando Mobile
Projetando MobileProjetando Mobile
Projetando MobiledevMob
 
InovaSession - Design Thinking 2012
InovaSession - Design Thinking 2012InovaSession - Design Thinking 2012
InovaSession - Design Thinking 2012rcmello13
 
Design Customizado
Design CustomizadoDesign Customizado
Design Customizadobernardolm
 
Desenvolvimento de Software: Navegando em Águas Misteriosas
Desenvolvimento de Software: Navegando em Águas MisteriosasDesenvolvimento de Software: Navegando em Águas Misteriosas
Desenvolvimento de Software: Navegando em Águas MisteriosasNícolas Iensen
 
O que é UX? Introdução, Ferramentas e Experiências
O que é UX? Introdução, Ferramentas e ExperiênciasO que é UX? Introdução, Ferramentas e Experiências
O que é UX? Introdução, Ferramentas e ExperiênciasUXPA São Paulo
 
Prototipe mais, (re)trabalhe menos
Prototipe mais, (re)trabalhe menosPrototipe mais, (re)trabalhe menos
Prototipe mais, (re)trabalhe menosCarlos Rosemberg
 
Workshop - Personas
Workshop - PersonasWorkshop - Personas
Workshop - PersonasVoël
 

Semelhante a Material Design em 2015 (20)

Deep Dive Material Design, e um pouquinho sobre mobile UX
Deep Dive Material Design, e um pouquinho sobre mobile UXDeep Dive Material Design, e um pouquinho sobre mobile UX
Deep Dive Material Design, e um pouquinho sobre mobile UX
 
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...
 
Principles and best practices of Product Design
Principles and best practices of Product DesignPrinciples and best practices of Product Design
Principles and best practices of Product Design
 
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
 
Sequencia didática sobre texto publicitário interface de arte com língua po...
Sequencia didática sobre texto publicitário   interface de arte com língua po...Sequencia didática sobre texto publicitário   interface de arte com língua po...
Sequencia didática sobre texto publicitário interface de arte com língua po...
 
Material Design
Material DesignMaterial Design
Material Design
 
User Experience Boot Camp
User Experience Boot CampUser Experience Boot Camp
User Experience Boot Camp
 
12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)
 
Plataformas digitais
Plataformas digitaisPlataformas digitais
Plataformas digitais
 
Aulas 7. IHC – Projeto de Interface com o Usuário
Aulas 7. IHC – Projeto de Interface com o UsuárioAulas 7. IHC – Projeto de Interface com o Usuário
Aulas 7. IHC – Projeto de Interface com o Usuário
 
Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.
 
Projetando Mobile
Projetando MobileProjetando Mobile
Projetando Mobile
 
InovaSession - Design Thinking 2012
InovaSession - Design Thinking 2012InovaSession - Design Thinking 2012
InovaSession - Design Thinking 2012
 
Design Customizado
Design CustomizadoDesign Customizado
Design Customizado
 
Desenvolvimento de Software: Navegando em Águas Misteriosas
Desenvolvimento de Software: Navegando em Águas MisteriosasDesenvolvimento de Software: Navegando em Águas Misteriosas
Desenvolvimento de Software: Navegando em Águas Misteriosas
 
O que é UX? Introdução, Ferramentas e Experiências
O que é UX? Introdução, Ferramentas e ExperiênciasO que é UX? Introdução, Ferramentas e Experiências
O que é UX? Introdução, Ferramentas e Experiências
 
Prototipe mais, (re)trabalhe menos
Prototipe mais, (re)trabalhe menosPrototipe mais, (re)trabalhe menos
Prototipe mais, (re)trabalhe menos
 
Apresentação plenarinho
Apresentação plenarinhoApresentação plenarinho
Apresentação plenarinho
 
Workshop - Personas
Workshop - PersonasWorkshop - Personas
Workshop - Personas
 
Workshop Design Thinking
Workshop Design ThinkingWorkshop Design Thinking
Workshop Design Thinking
 

Mais de Ana Paula Batista

Construindo um produto - da ideia ao desenvolvimento
Construindo um produto - da ideia ao desenvolvimentoConstruindo um produto - da ideia ao desenvolvimento
Construindo um produto - da ideia ao desenvolvimentoAna Paula Batista
 
Melhorando a experiência de uso através de micro-interações
Melhorando a experiência de uso através de micro-interaçõesMelhorando a experiência de uso através de micro-interações
Melhorando a experiência de uso através de micro-interaçõesAna Paula Batista
 
Desconstruindo o Design Sprint
Desconstruindo o Design SprintDesconstruindo o Design Sprint
Desconstruindo o Design SprintAna Paula Batista
 
Hack2B - Design Sprint Workshop
Hack2B - Design Sprint WorkshopHack2B - Design Sprint Workshop
Hack2B - Design Sprint WorkshopAna Paula Batista
 
Design Sprint - Lecciones Aprendidas (Meetup Lima - Ago/2016)
Design Sprint - Lecciones Aprendidas (Meetup Lima - Ago/2016)Design Sprint - Lecciones Aprendidas (Meetup Lima - Ago/2016)
Design Sprint - Lecciones Aprendidas (Meetup Lima - Ago/2016)Ana Paula Batista
 
Design Sprint: seu MLP em até 5 dias.
Design Sprint: seu MLP em até 5 dias.Design Sprint: seu MLP em até 5 dias.
Design Sprint: seu MLP em até 5 dias.Ana Paula Batista
 

Mais de Ana Paula Batista (9)

Community Sprint
Community SprintCommunity Sprint
Community Sprint
 
Construindo um produto - da ideia ao desenvolvimento
Construindo um produto - da ideia ao desenvolvimentoConstruindo um produto - da ideia ao desenvolvimento
Construindo um produto - da ideia ao desenvolvimento
 
Melhorando a experiência de uso através de micro-interações
Melhorando a experiência de uso através de micro-interaçõesMelhorando a experiência de uso através de micro-interações
Melhorando a experiência de uso através de micro-interações
 
Desconstruindo o Design Sprint
Desconstruindo o Design SprintDesconstruindo o Design Sprint
Desconstruindo o Design Sprint
 
Hack2B - Design Sprint Workshop
Hack2B - Design Sprint WorkshopHack2B - Design Sprint Workshop
Hack2B - Design Sprint Workshop
 
Design Sprint - Lecciones Aprendidas (Meetup Lima - Ago/2016)
Design Sprint - Lecciones Aprendidas (Meetup Lima - Ago/2016)Design Sprint - Lecciones Aprendidas (Meetup Lima - Ago/2016)
Design Sprint - Lecciones Aprendidas (Meetup Lima - Ago/2016)
 
Design Sprint: seu MLP em até 5 dias.
Design Sprint: seu MLP em até 5 dias.Design Sprint: seu MLP em até 5 dias.
Design Sprint: seu MLP em até 5 dias.
 
Workshop de Surveys
Workshop de SurveysWorkshop de Surveys
Workshop de Surveys
 
Como mimar seus usuários
Como mimar seus usuáriosComo mimar seus usuários
Como mimar seus usuários
 

Material Design em 2015

  • 1. Material Design Dezembro 2015 Ana Paula Batista Google Developer Expert - UX/UI your face here
  • 2. Ana Paula Batista Amante do “coletivo”, viagens, vegetariana, 2 gatos, anda a pé ou de bicicleta. - UX Designer - 34 anos - São Paulo - SP Principais Características - UXLead na B2W Digital - Google Developer Expert em UX/UI - Membro da Diretoria da UXPA-SP - 14 anos de experiência no desenvolvimento e projetos de interface - Formação Multimídia Digital - 6 anos de estudos em Ciências da Computação/ Sistemas de Informação Objetivos e Necessidades - Projetos com valores sociais - Construção coletiva Comportamento do Usuário - Online todo o tempo - Utiliza wear mas não tem um laptop - Wakerboarder wannabe - Não usa facebook - Curiosity-Driven
  • 4. “One of our guiding themes during the Material redesign was simplicity, and we think this paid off nicely.” - Hamid, Mobile Lead - 10% aumento de sessões por usuário por semana - 42% mais boards criados por sessão - 63% mais pessoas aderiram a boards, por sessão Aumento de engajamento da ação primária via Material: Trello
  • 5. “Material design was a great way to start building our Android app, it was like having a team of design experts, helping you build the best product for an Android device.” - Jenny Davis, Product Designer - 30% mais usuários iniciaram “hunts” relativa a plataformas non-Material. Incrementando o engajamento de novos usuários com FAB: The Hunt
  • 6. “Material design has really paid off and made our app much better..the reception we had was amazing. People love it.” - Philip Simpson, Co-founder & Android Developer - 30% aumento nas vendas, desde o redesign app em Material. Incentivando vendas: Pocket Casts
  • 7. - 5x aumento de vendas pelo app desde o material design update - 700% aumento nas vendas Surpreendendo usuários e aumentando as vendas pelo app: B&H Photo V “Couldn’t be better, seriously this app has to be one of the best apps I have ever used.” “Better than the website - I use the app/retail store quite often and this app is really helpful. “Everything is very well organized so it makes it actually fun just to look through the items in the app!”
  • 8. Expresse sua marca ● Principalmente através do uso das cores ● Mais flexibilidade nos padrões de interface do usuário Agrade seus usuários :) ● Mantem consistente com a linguagem natural do Android ● Possibilita uma melhor experiência multi-plataforma Potencialize o aumento do crescimento e engajamento ● Acompanhe o sucesso de desenvolvedores que têm adotado material ● Tornam-se elegíveis para os destaques da Play Store Porquê usar Material?
  • 9. Metáfora substantivo feminino estl ling ret designação de um objeto ou qualidade mediante uma palavra que designa outro objeto ou qualidade que tem com o primeiro uma relação de semelhança (p.ex., ele tem uma vontade de ferro, para designar uma vontade forte, como o ferro)
  • 10. Animação Bold, gráfico e intencional Superfícies e sombras Design adaptativo Características
  • 11. - Intuitivas e naturais, - organizam espaço, - racionalizam interfaces, - conceito intrínseco do que está certo ( o que a mente trabalha menos?). Superfícies e sombras
  • 12. - 3D: 1dp - Duas fontes de luz: ambiente e foco. Superfícies e sombras Ambiente Foco Ambiente Foco e Ambiente
  • 13. - sólido: elementos não podem transpassar uma superfície - altura e largura podem mudar - pode mudar de forma - nunca dobra - pode mover por qualquer eixo - Z: interação do usuário Superfícies e sombras Propriedades
  • 15. Animação - Reforça a ideia que o usuário é quem tem o controle da interface, - Objetos são iniciados e apresentados mantendo a continuidade da experiência, - Servem para focar a atenção do usuário, - Tornam os feedbacks naturais.
  • 17. Animação Aceleração natural - mudanças na aceleração e movimentos atraem atenção do usuário
  • 18. Animação Interações com feedback - utilize animação para cada input do usuário, - devem partir do ponto de interação Superfície Material Radial
  • 19. - como os objetos entram? como saem? quais elementos são mantidos? - qual elemento é mais importante e deve iniciar a animação? - qual caminho eles devem seguir? Animação Transições com significado
  • 21. Bold, gráfico e intencional - Estética baseada em impressos - Grids, tipografias, gráficos, espaços, cores, - Linguagem unificada, - Cria hierarquia, significado, foco.
  • 22. Bold, gráfico e intencional Cores - tons ousados, justapostos com ambientes suaves, sombras profundas, e os destaques brilhantes. - A cor deve ser inesperada e vibrante. Cor primária Cor de apoio
  • 23. - inspirado pelo tátil e qualidade física do material. - interage com a luz através de destaques sutis e sombras consistentes. - simples, intuitivo, demonstra a ação clara e consistente. Bold, gráfico e intencional Bold, gráfico e intencional Ícones
  • 24. Bold, gráfico e intencional Imagens - valoriza o contexto - pessoal - traduz informação - constrói narrativas - dá foco à intenção esqueça fundos falsos, cenas confusas e analogias indevidas.
  • 25. Um único design adaptativo - mesmo usuário ;) - experiência consistente - mesma linguagem de comunicação - interface adaptada ao device - menor custo de manutenção
  • 26.
  • 27.
  • 28. Resources - google.com/design - Icons tool - Devices tool - Android Design Support Library Como?: updates Maio 2015 Spec Updates - adaptive layouts - elevation - splash screens - settings - FAB expansion - navigation - empty states
  • 29. Tips
  • 30. Evite login ou cadastro obrigatório de cara. Ofereça uma amostra interativa de conteúdo público antes do usuário autenticar. Novos usuários podem não conhecer as propostas de valor do seu serviço e podem não querer registrar antes de saber como são os conteúdos e interações do seu app. Dê uma “amostra grátis” de seu app EasyTaxi
  • 31. Evite pedir login usando apenas midias sociais; apps devem oferecer um login por e- mail como uma alternativa. Não esqueça das minorias Headspace
  • 32. Quando uma coleção importante está vazia, evite mostrar uma mensagem de erro simples como “Sem itens.” Considere oferecer maneiras de popular a coleção, como mostrar itens recomendados ou permitir que os usuários criem novos itens. Aproveite todos os momentos Submarino.com
  • 33. ● intermitente, idealmente deveria tentar reconectar ou permitir que o usuário possa tentar novamente. ● permanente, mostre um lembrete útil se está em modo avião, em vez de um erro de rede. Permita um timeout sensível antes que o app decida que a perda de conexão é permanente. Verifique sua conexão e tente novamente Skina
  • 34. Quando apropriado, o app deve ter a ação chave na tela usando um botão de ação flutuante (BAF). O BAF é circular, de superfície elevada, assim deve ter uma sombra. Ele deve ter uma cor brilhante. Deve fazer a ação principal como criar, adicionar ou buscar. Tem que flutuar sobre outras superfícies, normalmente com 8dp de elevação. Frequentemente aparece no canto inferior direito da tela, ou centralizado na borda onde duas superfícies se encontram. Alow ação principal! Evernote
  • 35. A barra do app não deve incluir o ícone do app (ao invés disto utilize a nova apresentação de barras do app de acordo com as diretrizes do material design). A cor e a tipografia podem ser usadas da marca. Identificação Medisafe
  • 36. O sidebar menu deve conter apenas elementos de navegação primários. Evite mostrar itens que seriam colocados como ação em uma barra de ferramentas, como por exemplo Buscar. Além disso, evite incluir itens secundários como Sobre, Compartilhe este App, ou Avalie este App - estes tipos de itens devem aparecer na barra do App, possivelmente agrupados na tela Sobre. Sidebar menu HD Wallpaper

Notas do Editor

  1. We’re seeing more and more developers adopt Material, especially since the launch of Lollipop and the announcements at Google I/O 2015. We’ll share some developer case studies highlighting the benefits early adopters have seen.
  2. Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics. The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts. Within the material environment, virtual lights illuminate the scene. Key lights create directional shadows, while ambient light creates soft shadows from all angles. Shadows in the material environment are cast by these two light sources. In Android development, shadows occur when light sources are blocked by sheets of material at various positions along the z-axis. On the web, shadows are depicted by manipulating the y-axis only. The following example shows the card with a height of 6dp.
  3. https://github.com/chrisbanes/cheesesquare https://halfthought.wordpress.com https://github.com/googlesamples/android-topeka https://androiddesignpatterns.com https://materialdesignicons.com https://materialpalette.com https://materialup.com