Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Realistic responsive design - Awwwards 2016

Avatar for Inayaili de León Inayaili de León
January 28, 2016
Design
300
0

Realistic responsive design - Awwwards 2016

Awwwards conference, Amsterdam, 28 January 2016

Avatar for Inayaili de León

Inayaili de León

January 28, 2016

More Decks by Inayaili de León

See All by Inayaili de León
8 things I learned from building a pattern library
Avatar for Inayaili de León yaili
0
89
Realistic responsive design - Responsive Day Out 2014
Avatar for Inayaili de León yaili
7
610
The most important part of your job
Avatar for Inayaili de León yaili
0
350

Other Decks in Design

See All in Design
保育現場にAIを 〜人と技術に橋を架けるデザインで考えてきたこと〜 uiuxcamp2026-hoiku-ai-design
Avatar for Takahiro Yamaguchi hiro93n
1
290
Build for the Web, Build on the Web, Build With the Web
Avatar for Harry Roberts csswizardry
0
430
AI時代、デザイナーの価値はどこに？
Avatar for Ryotaro Takahashi tararira
2
1.5k
Connpass-Xperia_Camera_App_by_HCD.pdf
Avatar for ソニー株式会社 sony
1
660
UI/UX & Web Design Portfolio 2025｜Madoka Kumagai
Avatar for Madoka madoka_portfolio
4
250
Storyboard Exercise: Chase Sequence
Avatar for Mandalyn Teo lynteo
1
320
test deck title
Avatar for Shota Matsuo shotamatsuo
0
1.5k
hicard_credential_202601
Avatar for hicard hicard
0
250
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
Avatar for mewmo mewmo
0
260
速く作れるかではなく、速く学べるか ― 学習ループを回すパイロットの途中報告
Avatar for Sho Nagata nagata03
0
480
Техники структурирования беседы с собой, заказчиком и командо
Avatar for Andrew Shapiro ashapiro
0
170
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
Avatar for yamamoto-yuta yamamotoyuta
3
860

Featured

See All Featured
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.7k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.3k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
160
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
52k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
200
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
140
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
220

Transcript

  1. Realistic responsive design by Inayaili de León Persson Awwwards, Amsterdam,

    2016

  2. 1. Define a project leader

  3. flic.kr/p/8JJDer

  4. 2. Buy lots of sticky notes

  5. None

  6. 3. Involve all the right people

  7. flic.kr/p/dMpken

  8. 4. Make a wishlist and plan from there

  9. flic.kr/p/oRsPbM

  10. 5. Deprioritise other projects

  11. flic.kr/p/oepoQQ

  12. 6. Aim for a date, but be flexible

  13. flic.kr/p/odGXUV

  14. 7. Prioritise what you want to do first

  15. None

  16. 8. Write down everything you will NOT do

  17. flic.kr/p/a3KRS4

  18. 9. List all your pages

  19. None

  20. 10. Allow plenty of time for device testing

  21. flic.kr/p/bu2gfG

  22. 11. Get test devices based on analytics

  23. 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 …

  24. 12. Create a document with initial rules

  25. flic.kr/p/65C7c3

  26. 13. Make a component inventory

  27. None

  28. 14. Have a style guide

  29. None

  30. 15. Clean up your CSS

  31. flic.kr/p/ovrq1Y

  32. 16. Have a solid grid

  33. https://flic.kr/p/do6BHg

  34. 17. Convert grid to percentages

  35. None

  36. 18. Evolve instead of change

  37. flic.kr/p/oeJcBM

  38. 19. Don’t be afraid to copy

  39. None

  40. 20. Don’t use everyone at once,
 and use everyone at

    once

  41. flic.kr/p/xNXbL1

  42. 21. Show your prototypes

  43. flic.kr/p/bB7EAF

  44. 22. Quick and dirty UX

  45. None

  46. 23. Experiment on smaller projects

  47. None

  48. 24. What can we do in 1 hour?

  49. flic.kr/p/oy4MFD

  50. 25. Make an image inventory

  51. None

  52. 26. Optimise your images

  53. flic.kr/p/5ZU8DZ

  54. 27. Adjust type based on real devices

  55. flic.kr/p/uCVKGp

  56. 28. Don't keep two code bases for longer than you

    need to

  57. flic.kr/p/i6PjYM

  58. 29. Keep a record of all decisions

  59. None

  60. 30. Talk and write about it

  61. flic.kr/p/9MhxcX

  62. Read more at design.canonical.com

  63. Thank you.
 @yaili bit.ly/viewsource2015