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
290
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
240
Viés
mjcoffeeholick
3
150
Os clichês de UX
mjcoffeeholick
0
170
Viés e UX
mjcoffeeholick
1
210
UXD: a manopla do infinito do design
mjcoffeeholick
0
120
Raio X de UX
mjcoffeeholick
1
1.2k
UXD: Manopla do infinito do design
mjcoffeeholick
6
340
Qual é a história que seu produto conta?
mjcoffeeholick
3
120
Como ter uma comunidade mais inclusiva
mjcoffeeholick
1
150
Other Decks in Design
See All in Design
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
0
190
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.2k
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
520
アクセシビリティに取り組むメリット
magi1125
1
240
harutaka Vision Deck
zenkigenforrecruit
0
190
UX & Accessibilité cognitive : et si vous simplifiiez vraiment l’expérience utilisateur ?
marietournelle35
0
120
The Spectacular Lies of Maps
axbom
PRO
1
240
今日から意識できるアクセシビリティ
fumiko
0
290
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
360
Findyのプロデチームの 歩みとこれから
satty9556
0
240
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
740
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.6k
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
GitHub's CSS Performance
jonrohan
1031
460k
Practical Orchestrator
shlominoach
190
11k
Speed Design
sergeychernyshev
32
1.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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