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