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
75
Realistic responsive design - Responsive Day Out 2014
yaili
7
600
The most important part of your job
yaili
0
330
Other Decks in Design
See All in Design
【Designship 2024|10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
780
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
140
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
66k
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
870
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
270
Dinosaur Mayhem
storyartist
0
140
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
430
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.5k
LLMによるRAG評価用合成テストデータの生成
licux
6
660
横断組織デザイナーの働き方
mixi_design
PRO
0
330
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
780
界隈からの逃走–デザイン初め新年会2025
sekiguchiy
3
980
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
13k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
It's Worth the Effort
3n
184
28k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Site-Speed That Sticks
csswizardry
3
370
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Scaling GitHub
holman
459
140k
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