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

Realistic responsive design - Awwwards 2016

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
Ralph Penel Portfolio
Avatar for ralphpenel ralphpenel
PRO
0
260
Storyboard Assignment: Storyboard from Comic Strip
Avatar for Mandalyn Teo lynteo
3
180
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
Avatar for 弁護士ドットコム bengo4com
1
1.4k
Mandalyn_DT5001_FinalAssignment.pdf
Avatar for Mandalyn Teo lynteo
0
140
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
790
デザインするために「多様性」について考える
Avatar for なつ iflection
0
190
デザイナーがAIを使い倒して爆速プロダクト開発！社内ハッカソンでの取り組み紹介
Avatar for 都村　美帆 abokadotyann
9
3k
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
Avatar for ため tame
1
370
maki setoguchi
Avatar for Maki / Web Designer maki_setoguchi
0
660
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
Avatar for Hiromi Morikawa hiromitsuuuuu
1
1.3k
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
Avatar for ぽん designer_no_pon
0
1.2k
Franks Myth
Avatar for George Frank Hayford-Taylor gfht1
1
410

Featured

See All Featured
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.3k
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
0
260
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
730
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.3k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
4.9k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
60
42k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
32k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
54
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
62
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.7k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
1
56

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