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
Realistic responsive design - Awwwards 2016
Search
Inayaili de León
January 28, 2016
Design
0
290
Realistic responsive design - Awwwards 2016
Awwwards conference, Amsterdam, 28 January 2016
Inayaili de León
January 28, 2016
Tweet
Share
More Decks by Inayaili de León
See All by Inayaili de León
8 things I learned from building a pattern library
yaili
0
83
Realistic responsive design - Responsive Day Out 2014
yaili
7
610
The most important part of your job
yaili
0
330
Other Decks in Design
See All in Design
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
190
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
130
Findyのプロデチームの 歩みとこれから
satty9556
0
290
Installing and Running decksh/pdfdeck
ajstarks
1
860
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
700
harutaka Vision Deck
zenkigenforrecruit
0
260
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
root_recruit
PRO
0
100
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
390
#Dubois Challenge 2025: Economics
ajstarks
1
190
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
goodpatch
1
750
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか?
fuwarisprit
3
1.5k
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
140
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
BBQ
matthewcrist
89
9.8k
Documentation Writing (for coders)
carmenintech
75
5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
Transcript
Realistic responsive design by Inayaili de León Persson Awwwards, Amsterdam,
2016
1. Define a project leader
flic.kr/p/8JJDer
2. Buy lots of sticky notes
None
3. Involve all the right people
flic.kr/p/dMpken
4. Make a wishlist and plan from there
flic.kr/p/oRsPbM
5. Deprioritise other projects
flic.kr/p/oepoQQ
6. Aim for a date, but be flexible
flic.kr/p/odGXUV
7. Prioritise what you want to do first
None
8. Write down everything you will NOT do
flic.kr/p/a3KRS4
9. List all your pages
None
10. Allow plenty of time for device testing
flic.kr/p/bu2gfG
11. Get test devices based on analytics
14% APPLE IPHONE 11% APPLE IPAD 2% MICROSOFT SURFACE 1%
GOOGLE NEXUS 5 1% GOOGLE NEXUS 7 1% SONY READER PRS-T1 1% SAMSUNG GALAXY S5 …
12. Create a document with initial rules
flic.kr/p/65C7c3
13. Make a component inventory
None
14. Have a style guide
None
15. Clean up your CSS
flic.kr/p/ovrq1Y
16. Have a solid grid
https://flic.kr/p/do6BHg
17. Convert grid to percentages
None
18. Evolve instead of change
flic.kr/p/oeJcBM
19. Don’t be afraid to copy
None
20. Don’t use everyone at once, and use everyone at
once
flic.kr/p/xNXbL1
21. Show your prototypes
flic.kr/p/bB7EAF
22. Quick and dirty UX
None
23. Experiment on smaller projects
None
24. What can we do in 1 hour?
flic.kr/p/oy4MFD
25. Make an image inventory
None
26. Optimise your images
flic.kr/p/5ZU8DZ
27. Adjust type based on real devices
flic.kr/p/uCVKGp
28. Don't keep two code bases for longer than you
need to
flic.kr/p/i6PjYM
29. Keep a record of all decisions
None
30. Talk and write about it
flic.kr/p/9MhxcX
Read more at design.canonical.com
Thank you. @yaili bit.ly/viewsource2015