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
0
290

Realistic responsive design - Awwwards 2016

Awwwards conference, Amsterdam, 28 January 2016
Avatar for Inayaili de León

Inayaili de León

January 28, 2016
Tweet

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
77
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
330

Other Decks in Design

See All in Design
富山デザイン勉強会_デザイントレンド2025.pdf
Avatar for keita keita_yoshikawa
0
250
The Very Small Creatures - dressing up warm sequence
Avatar for Lizzie lizziestoryboards
0
310
Starry | Storyboards | Scene 1-21
Avatar for Gio Fortunato giofortuna_story
0
180
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
Avatar for 株式会社ログラス loglass2019
0
180
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
Avatar for YurufuwaKiyoshi kiyoshifuwa
0
270
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
Avatar for Takehiro KAWASE tkhr_kws
3
320
AIネイティブな時代におけるUXデザインの在り方とは
Avatar for Kunimitsu Toshiki kuni29
0
1.4k
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
Avatar for r.aoki u_ri_ta
2
180
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
Avatar for Shota Ikeyatsu ikeyatsu
2
1.6k
Fem tips om ux-text • WSA-dagen 29 jan 2025
Avatar for Jonas Söderström jonas_blind_hen
PRO
0
160
Generating Momentum | Yasuhiro Yokota
Avatar for Yasuhiro Yokota | 横田泰広 yasuhiroyokota
1
320
Saudade typeface
Avatar for Tiago Porto tiagoporto
0
280

Featured

See All Featured
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
344
40k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
78
6.3k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
60k
Scaling GitHub
Avatar for Zach Holman holman
459
140k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
85
4.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
30
2.3k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
42
7.5k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.2k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
29
920

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