Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Anotomia do design responsivo
Search
Alda Rocha
September 18, 2015
Design
3
280
Anotomia do design responsivo
Uma abordagem sobre o que é responsivo, como e onde devemos usar.
Alda Rocha
September 18, 2015
Tweet
Share
More Decks by Alda Rocha
See All by Alda Rocha
Como viés influencia o que desenvolvemos
mjcoffeeholick
3
200
Viés
mjcoffeeholick
3
140
Os clichês de UX
mjcoffeeholick
0
150
Viés e UX
mjcoffeeholick
1
180
UXD: a manopla do infinito do design
mjcoffeeholick
0
93
Raio X de UX
mjcoffeeholick
1
910
UXD: Manopla do infinito do design
mjcoffeeholick
6
300
Qual é a história que seu produto conta?
mjcoffeeholick
3
91
Como ter uma comunidade mais inclusiva
mjcoffeeholick
1
120
Other Decks in Design
See All in Design
モデル・デザイン入門
akitsugu7935
0
480
SUKEDACHI DESIGN NIGHT発表スライド
sugiyama_sukedachi
0
240
Web 組版の課題とその解法
yamatoiizuka
0
110
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.2k
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
310
デザインをみんなのものに 「デザインの脱植民地化」を日本の文脈で考える
mayunak
7
4.1k
Métricas de UX - Reflexões sobre o uso de dados numéricos no contexto de UX
videlvequio
0
160
Designship 2023|想いを可視化するデザインの力
weddingpark
0
250
B/43プラスカードができるまで
putchomsmartbank
0
490
The Fight
euralisw
0
120
Goodpatch Tour💙 / We are hiring!
goodpatch
28
700k
noteのアクセシビリティ これまでのプロダクト・組織へのアプローチとこれからのこと
tatsuyasawanobori
1
1.1k
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
Practical Orchestrator
shlominoach
183
9.7k
Git: the NoSQL Database
bkeepers
PRO
423
63k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Web development in the modern age
philhawksworth
203
10k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
7
3.4k
Unsuck your backbone
ammeep
663
57k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
1.9k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
Transcript
None
Alda Rocha - UX/UI @mjcoffeeholick WebDeveloper/WebDesigner/Google Dev. Groups/Woman Techmakers #GDGSP
#GDGDrops #365cafes & Astrônoma Amadora
ENTENDENDO O RESPONSIVO
O que é RESPONSIVO?
RESPONSIVO (Adjetivo masculino singular) Flexível, Ajustável
O layout responsivo surgiu da necessidade de adaptações de um
template para outras resoluções de tela.
LARGURA X ALTURA
MENOR X MAIOR
MENOR X MAIOR
Qual a sua importância?
DADOS (O cenário geral)
DADOS métricas e números = +1
Celular Smartphone ON LINE 0 25 50 75 100 MOBILE
<3 mobile vem do mobile 0 25 50 75 100
COMPRA ON LINE
Lêem ¬¬" </3 0 25 50 75 100 E-MAILS
Uma pessoa checa seu celular em média 150 vezes ao
longo do dia.
USUÁRIOS EXCLUSIVAMENTE MOBILE
Pontos positivos
RAPIDEZ E PRATICIDADE
SEM DOUBLE TAPPING
CALL TO ACTION
FLEXÍVEL Automático. O pastel mais pedido!
UX e SEO
O que precisa ter?
MOBILE FIRST APPROACH
VANTAGENS
LAYOUT SIMPLES
DEFINA BREAKPOINTS
O QUE MUDA?
FLEXIBILIDADE
ESTICA E PUXA
BLOGPOST
None
Onde os problemas começam
None
SIM!
SIM! :(
Exemplos de problemas:
UM CLÁSSICO (Intervenções e imposições)
“O concorrente usa!” “Ta na moda”
BRIEFING ESPECIFICAÇÃO (Incompleto ou errado)
“O que o cliente precisa afinal?”
Necessidade X Estratégia
PERGUNTE! (Perguntas são necessárias)
“Quem é o público alvo? " “O que o usuário
espera fazer quando ele clica em um botão?” “Qual o contexto? "
A. De que jeito? Com que abordagem? Com
que importância de hierarquia de conteúdo?
a. b. c. d.
BOAS PRÁTICAS (Sempre é bom, né?)
A. Menos é mais! Fácil de usar.
Intuitivo: com uma boa consistência e continuidade.
Facetas reais do responsivo
3 Tipos (Cada caso é um caso)
FLEXÍVEL Automático. O pastel mais pedido!
ESPECÍFICO Versão mobile do seu site.
ADAPTÁVEL Se ajusta, se adapta.
None
Para decidir considere alguns pontos
TEMPO
Ok! Quanto tempo?
Menos que 1 mês Específico
Menos que 2 meses Adaptável
Mais que 2 meses Adaptável
TIME (Equipe)
TIME ¬¬”
TIME -_-“
MAPEAMENTO DE DEVICES USADOS
MULTITELAS
POR FIM
FAÇA UMA ANÁLISE (Qual o responsivo ideal?)
Pense em uma estratégia para mobile e não apenas no
estica e puxa do conteúdo.
:3
@mjcoffeeholick
[email protected]
https://medium.com/@mjcoffeeholick
Conhece uma mulher que queira palestrar? www.facebook.com/convideumamulher
Por que faltam mulheres no campo tecnologia ? http://programaria.org
GDG DROPS OUT - GDGSP @GDGSaoPaulo
OCUPAR O MASP #PaulistaHack 23 SET - 19:00
DEVFEST SP NOV - GDGSP @GDGSaoPaulo
None
None