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

Pixel Imperfect: A Practical Approach To Responsive Design

E195ae45320d9202eaa01c9f1d31a416?s=47 Michelle Schulp
February 04, 2017

Pixel Imperfect: A Practical Approach To Responsive Design

With seemingly endless new ways to browse the web, we know that responsive design is here to stay. But how do we adapt the traditional design process to flexible screen sizes, device-based restrictions, and multiple use-cases without feeling like we’re giving up all control to the great unknown? We’ll learn how to use our Problem Solving Superpowers to move away from creating endless mockups, and into crafting Design Systems. You’ll learn actionable methods to transform how you design for the web, and workable ways to present these designs to your team or your client.

E195ae45320d9202eaa01c9f1d31a416?s=128

Michelle Schulp

February 04, 2017
Tweet

Transcript

  1. PIXEL IMPERFECT a practical approach to responsive design Photo credits:

    Unsplashed and Flickr Creative Commons
  2. @marktimemedia I Design THINGS. USUALLY WORDPRESS. HI, I’M MICHELLE.

  3. @marktimemedia THE OLD WAY

  4. @marktimemedia PRINT DESIGN “DESIGN WHAT YOU SEE”

  5. @marktimemedia WEB DESIGN V1 “DESIGN FOR THE DESKTOP”

  6. @marktimemedia PAINTINGS OF WEBSITES

  7. @marktimemedia WEB DESIGN V2 “DESIGN FOR DEVICES”

  8. @marktimemedia UNSUSTAINABLE

  9. @marktimemedia NON- TRADITIONAL INTERFACES?

  10. @marktimemedia CONVERSATIONAL INTERFACES?

  11. @marktimemedia DESIGN IS NOT JUST ABOUT AESTHETICS

  12. @marktimemedia From ATOMIC DESIGN “...the bidirectional and interactive nature of

    the web adds many more dimensions to what constitutes good design. Speed, screen size, environment, technological capabilities, form- factor, ergonomics, usability, accessibility, context, and user preferences must be considered if we want to create great work for this brave new digital world.”
  13. @marktimemedia DEFINE PROBLEM FIND SOLUTIONS

  14. @marktimemedia ESTABLISHING PATTERNS & HIERARCHY

  15. @marktimemedia STOP THINKING ABOUT PAGES

  16. @marktimemedia DESIGNING SYSTEMS

  17. @marktimemedia ATOMIC DESIGN Brad Frost

  18. @marktimemedia ATOMS THE SMALLEST PIECE

  19. @marktimemedia http://zqsmm.qiniucdn.com/data/20110511083224/index.html

  20. @marktimemedia MOLECULES UNIQUE COMBINATIONS OF ATOMS

  21. @marktimemedia

  22. @marktimemedia ORGANISMS MOLECULES COMING TOGETHER ALLOW ACTION

  23. @marktimemedia

  24. @marktimemedia TEMPLATES ORGANISMS TOGETHER BECOME LAYOUTS

  25. @marktimemedia

  26. @marktimemedia PAGES TEMPLATES WITH SPECIFIC CONTENT

  27. @marktimemedia NOT A LINEAR PROCESS

  28. @marktimemedia BREAK IT BEFORE YOU BUILD IT

  29. @marktimemedia DESIGN FOR THE WEB IS BECOMING BORING

  30. @marktimemedia CLARITY VS CREATIVITY

  31. @marktimemedia GOOD DESIGN GETS OUT OF THE WAY

  32. @marktimemedia DESIGNING WAYFINDING

  33. @marktimemedia ESTABLISHING PATTERNS DOES NOT PREVENT CREATIVTY

  34. @marktimemedia DESIGN FOR YOUR AUDIENCE

  35. @marktimemedia WHAT IS THE END GOAL?

  36. @marktimemedia From ATOMIC DESIGN “Users perceive your brand as a

    singular entity and don’t care about your organizational structure, tech stack, or anything else that might cause disparities in the UI.”
  37. @marktimemedia ENABLE GOOD DESIGN CHOICES

  38. @marktimemedia CROSS-DISCIPLINARY COLLABORATION

  39. @marktimemedia NO SPECIAL SNOWFLAKES

  40. @marktimemedia PRESENTING PATTERNS

  41. @marktimemedia SELLING THE METHODOLOGY

  42. @marktimemedia PERFORM UI AUDITS

  43. @marktimemedia REDUNDANCIES SIMILARITIES

  44. @marktimemedia NAMING YOUR ELEMENTS

  45. @marktimemedia MOOD BOARDS & STYLE TILES

  46. @marktimemedia

  47. @marktimemedia

  48. @marktimemedia WIREFRAMES & PROTOTYPES

  49. @marktimemedia Low-fi

  50. @marktimemedia “MID-FI”?

  51. @marktimemedia

  52. @marktimemedia MODULE DESIGNS

  53. @marktimemedia

  54. @marktimemedia STYLE GUIDES

  55. @marktimemedia

  56. @marktimemedia

  57. @marktimemedia PATTERN LIBRARY

  58. @marktimemedia DAVE RUPERT “A Tiny Bootstrap for Every Client”

  59. @marktimemedia PATTERN LAB http://patternlab.io/

  60. @marktimemedia

  61. @marktimemedia INCLUDE CONTEXT

  62. @marktimemedia KEEP IT UPDATED

  63. @marktimemedia NEW HOTNESS • A List Apart: Container Queries http://alistapart.com/article/container-queries-once-more-

    unto-the-breach • CSS Round Queries https://drafts.csswg.org/css-round-display/
  64. @marktimemedia DEEP THOUGHTS • How To Make Sense Of Any

    Mess http://abbytheia.com/makesense/ • The Web’s Grain http://www.frankchimero.com/writing/the-webs-grain/ • A List Apart: Language of Modular Design http://alistapart.com/article/language-of-modular-design • Ethan Marcotte: Pattern Patter https://ethanmarcotte.com/wrote/pattern-patter/ • AIGA Eye On Design http://eyeondesign.aiga.org/why-design-is-not-problem- solving-design-thinking-isnt-always-the-answer/
  65. @marktimemedia PRACTICAL RESOURCES • Atomic Design http://atomicdesign.bradfrost.com/ • Style Guides

    http://styleguides.io/tools.html • Style Prototype http://sparkbox.github.io/style-prototype/ • “Ish” variable viewport tool http://bradfrost.com/demo/ish/ • HTML Elements http://zqsmm.qiniucdn.com/data/20110511083224/index.html
  66. @marktimemedia QUESTIONS? Michelle Schulp michelle@marktimemedia.com @marktimemedia bit.ly/pixel-imperfect