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
280

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
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
エムスリー株式会社　デザイングループ紹介資料 / m3design-team-profile
m3designer
0
3.9k
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
200
【Designship 2024｜10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
490
20241019-CUD友の会「困った！を解決するデザイン改訂版」交流会
majimasachi
0
240
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
1
1.8k
ZKK_001.pdf
nicholaspegu
0
830
TUNAG BOOK 2024
stmn
0
290
開発チームの中心で心理的安全性をつくる、UXデザイナーの問いかけ方
takuto_yonemichi
1
480
Карта реализации историй — убийца USM
ashapiro
0
160
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
230
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
180
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.1k

Featured

See All Featured
Fireside Chat
paigeccino
32
3k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Happy Clients
brianwarren
97
6.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
A designer walks into a library…
pauljervisheath
202
24k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
Building Your Own Lightsaber
phodgson
102
6k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Embracing the Ebb and Flow
colly
84
4.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k

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