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.

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
    michelle@marktimemedia.com
    @marktimemedia
    bit.ly/pixel-imperfect
    

    View Slide