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

Pixel Imperfect: A Practical Approach To Responsive Design

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.

Michelle Schulp Hunt

February 04, 2017
Tweet

More Decks by Michelle Schulp Hunt

Other Decks in Design

Transcript

  1. PIXEL
    IMPERFECT
    a practical
    approach to
    responsive
    design
    Photo credits: Unsplashed and Flickr Creative Commons

    View Slide

  2. @marktimemedia
    I
    Design
    THINGS.
    USUALLY
    WORDPRESS.
    HI, I’M
    MICHELLE.

    View Slide

  3. @marktimemedia
    THE
    OLD WAY

    View Slide

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

    View Slide

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

    View Slide

  6. @marktimemedia
    PAINTINGS
    OF WEBSITES

    View Slide

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

    View Slide

  8. @marktimemedia
    UNSUSTAINABLE

    View Slide

  9. @marktimemedia
    NON-
    TRADITIONAL
    INTERFACES?

    View Slide

  10. @marktimemedia
    CONVERSATIONAL
    INTERFACES?

    View Slide

  11. @marktimemedia
    DESIGN IS NOT
    JUST ABOUT
    AESTHETICS

    View Slide

  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.”

    View Slide

  13. @marktimemedia
    DEFINE PROBLEM
    FIND SOLUTIONS

    View Slide

  14. @marktimemedia
    ESTABLISHING
    PATTERNS &
    HIERARCHY

    View Slide

  15. @marktimemedia
    STOP THINKING
    ABOUT PAGES

    View Slide

  16. @marktimemedia
    DESIGNING
    SYSTEMS

    View Slide

  17. @marktimemedia
    ATOMIC DESIGN
    Brad Frost

    View Slide

  18. @marktimemedia
    ATOMS
    THE SMALLEST PIECE

    View Slide

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

    View Slide

  20. @marktimemedia
    MOLECULES
    UNIQUE COMBINATIONS OF ATOMS

    View Slide

  21. @marktimemedia

    View Slide

  22. @marktimemedia
    ORGANISMS
    MOLECULES COMING TOGETHER
    ALLOW ACTION

    View Slide

  23. @marktimemedia

    View Slide

  24. @marktimemedia
    TEMPLATES
    ORGANISMS TOGETHER BECOME
    LAYOUTS

    View Slide

  25. @marktimemedia

    View Slide

  26. @marktimemedia
    PAGES
    TEMPLATES WITH SPECIFIC CONTENT

    View Slide

  27. @marktimemedia
    NOT A
    LINEAR
    PROCESS

    View Slide

  28. @marktimemedia
    BREAK IT
    BEFORE YOU
    BUILD IT

    View Slide

  29. @marktimemedia
    DESIGN FOR THE
    WEB IS BECOMING
    BORING

    View Slide

  30. @marktimemedia
    CLARITY
    VS CREATIVITY

    View Slide

  31. @marktimemedia
    GOOD DESIGN
    GETS OUT OF
    THE WAY

    View Slide

  32. @marktimemedia
    DESIGNING
    WAYFINDING

    View Slide

  33. @marktimemedia
    ESTABLISHING
    PATTERNS
    DOES NOT PREVENT
    CREATIVTY

    View Slide

  34. @marktimemedia
    DESIGN
    FOR YOUR
    AUDIENCE

    View Slide

  35. @marktimemedia
    WHAT IS THE
    END GOAL?

    View Slide

  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.”

    View Slide

  37. @marktimemedia
    ENABLE
    GOOD
    DESIGN
    CHOICES

    View Slide

  38. @marktimemedia
    CROSS-DISCIPLINARY
    COLLABORATION

    View Slide

  39. @marktimemedia
    NO SPECIAL
    SNOWFLAKES

    View Slide

  40. @marktimemedia
    PRESENTING
    PATTERNS

    View Slide

  41. @marktimemedia
    SELLING THE
    METHODOLOGY

    View Slide

  42. @marktimemedia
    PERFORM
    UI AUDITS

    View Slide

  43. @marktimemedia
    REDUNDANCIES
    SIMILARITIES

    View Slide

  44. @marktimemedia
    NAMING YOUR
    ELEMENTS

    View Slide

  45. @marktimemedia
    MOOD BOARDS
    & STYLE TILES

    View Slide

  46. @marktimemedia

    View Slide

  47. @marktimemedia

    View Slide

  48. @marktimemedia
    WIREFRAMES &
    PROTOTYPES

    View Slide

  49. @marktimemedia
    Low-fi

    View Slide

  50. @marktimemedia
    “MID-FI”?

    View Slide

  51. @marktimemedia

    View Slide

  52. @marktimemedia
    MODULE
    DESIGNS

    View Slide

  53. @marktimemedia

    View Slide

  54. @marktimemedia
    STYLE
    GUIDES

    View Slide

  55. @marktimemedia

    View Slide

  56. @marktimemedia

    View Slide

  57. @marktimemedia
    PATTERN
    LIBRARY

    View Slide

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

    View Slide

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

    View Slide

  60. @marktimemedia

    View Slide

  61. @marktimemedia
    INCLUDE
    CONTEXT

    View Slide

  62. @marktimemedia
    KEEP IT
    UPDATED

    View Slide

  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/

    View Slide

  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/

    View Slide

  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

    View Slide

  66. @marktimemedia
    QUESTIONS?
    Michelle Schulp
    [email protected]
    @marktimemedia
    bit.ly/pixel-imperfect

    View Slide