$30 off During Our Annual Pro Sale. View Details »

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
86
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
Shaolin_Showdown
Avatar for Sol Metts solmetts
0
190
「自分の仕事はどこまで？」と問い続けたら。デザイナーの「視座」を考える
Avatar for Takeru Mukai mukai_takeru
0
270
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
320
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
130
Diverse Design Team Deck
Avatar for Diverse diverse
0
230
公開スライド）熊本市様-電子申請中級編
Avatar for @Garyuten garyuten
0
590
Correspondence：共に生成していく過程
Avatar for Akira Motomura akiramotomura
0
170
AIエージェントが対話的なUIを返す！MCP−UIで変わるユーザ体験
Avatar for daitasu daitasu
1
110
Spectrum Tokyo_ デザイナーが事業責任者になってみた
Avatar for Woo seop Shin shin_2
0
180
The Spring Festival
Avatar for Jisun jisun
0
120
2026年、デザイナーはなにに賭ける？
Avatar for Kazuhiro Tobita 0b1tk
0
400
アイデアを加速させる！Firefly ボードで発想の幅を広げよう
Avatar for コネクリ connecre
1
240

Featured

See All Featured
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
0
250
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.9k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
73
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
130
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
550
How to make the Groovebox
Avatar for あそなす asonas
2
1.8k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
0
100
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
1.8k

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