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
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
89
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
350

Other Decks in Design

See All in Design
ISO 9241-171:2025っていうのがあってな
Avatar for Shoji Ohashi shosira
1
190
UI生成の鍵は要件整理 -デザインプロセスのエッセンスを プロンプト作成に取り入れよう-
Avatar for 都村　美帆 abokadotyann
4
880
デザインとフロントエンドの境界が融ける Claude Code × Figma
Avatar for littlebusters littlebusters
1
2.9k
社長の宿題への回答 「新卒×AI」が生み出す価値
Avatar for さき saki822
2
150
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
Avatar for koyaman koyaman
1
1.9k
20260309_3月ICTデザイン勉強会_地域創生2.0
Avatar for Kimura Atsunobu a2k
0
130
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
830
公開スライド）熊本市様-電子申請中級編
Avatar for @Garyuten garyuten
0
1.3k
空間アプリ開発のフィードバックをCodexにするための抽象的なデザインツールの模索
Avatar for kazuhiro hara karad
0
140
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
930
Drawing for Animation
Avatar for Mandalyn Teo lynteo
2
300
Accelerating performance improvement based on a software review evaluation matrix
Avatar for kitanosirokuma kitanosirokuma
0
240

Featured

See All Featured
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
790
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
34k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.5k
Abbi's Birthday
Avatar for Violet Bock coloredviolet
2
8k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.7k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
240
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
830
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.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