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

Realistic responsive design - Awwwards 2016

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
88
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
340

Other Decks in Design

See All in Design
CULTURE DECK／Marketing Director
Avatar for M-HAND,Inc. mhand01
0
1.2k
OJTで学んだ 「心を動かす」ファシリテーション
Avatar for さき saki822
1
300
はじめての演奏会フライヤーデザイン
Avatar for Kaito Kikuchi chorkaichan
1
290
Accelerating performance improvement based on a software review evaluation matrix
Avatar for kitanosirokuma kitanosirokuma
0
230
Franks Myth
Avatar for George Frank Hayford-Taylor gfht1
2
470
TUNAG BOOK 2024
Avatar for 株式会社スタメン stmn
PRO
0
1.5k
「バイブコーディングって何？」から始まった、 AIとの一年間と、その先のこと
Avatar for 瀬戸英晴 seto
0
510
Crisp Code inc.｜ブランドガイドライン - Brand guidelines
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
370
大企業インハウスデザイン組織における DesignOps改革の現在地 / DesignOps at Scale: Navigating Transformation in Large Enterprises
Avatar for NTT docomo Business nttcom
0
600
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
Avatar for mewmo mewmo
0
230
セブンデックス プロジェクト事例 / innovation Scenes
Avatar for セブンデックス sevendex
1
680
設計と制作 意図を形に表す / Design and Making: Intent Made Form
Avatar for usagimaru usagimaru
3
1.8k

Featured

See All Featured
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
360
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
220
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
510
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.8k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.1k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
110
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
190
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.1k
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.2k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k

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