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

Realistic responsive design - Awwwards 2016

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

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
77
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
セブンデックス カルチャーブック
sevendex
1
8.8k
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
130
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
290
東急URBAN HACKSのデザイナーって何やってるの？ 〜Designer Night #1〜
tak073
0
310
デザイナーとPMの両ロール_３つのポイント
toy1618
1
270
portfolio_YumiYasuda
yum0418
0
220
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
300
Cards | Storyboards
giofortuna_story
0
130
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
jct
1
180
Echoes Boomerang
artcloudyu
PRO
0
140
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
210
The Golden Whitney
ohtristanart
PRO
0
140

Featured

See All Featured
How STYLIGHT went responsive
nonsquared
99
5.5k
Building an army of robots
kneath
304
45k
Testing 201, or: Great Expectations
jmmastey
42
7.4k
Why Our Code Smells
bkeepers
PRO
336
57k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Language of Interfaces
destraynor
157
24k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.4k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Building Applications with DynamoDB
mza
94
6.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k

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