Pixel Imperfect: A Practical Approach To Responsive Design

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

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

@marktimemedia THE OLD WAY

@marktimemedia PRINT DESIGN “DESIGN WHAT YOU SEE”

@marktimemedia WEB DESIGN V1 “DESIGN FOR THE DESKTOP”

@marktimemedia PAINTINGS OF WEBSITES

@marktimemedia WEB DESIGN V2 “DESIGN FOR DEVICES”

@marktimemedia UNSUSTAINABLE

@marktimemedia NON- TRADITIONAL INTERFACES?

@marktimemedia CONVERSATIONAL INTERFACES?

@marktimemedia DESIGN IS NOT JUST ABOUT AESTHETICS

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

@marktimemedia DEFINE PROBLEM FIND SOLUTIONS

@marktimemedia ESTABLISHING PATTERNS & HIERARCHY

@marktimemedia STOP THINKING ABOUT PAGES

@marktimemedia DESIGNING SYSTEMS

@marktimemedia ATOMIC DESIGN Brad Frost

@marktimemedia ATOMS THE SMALLEST PIECE

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

@marktimemedia MOLECULES UNIQUE COMBINATIONS OF ATOMS

@marktimemedia

@marktimemedia ORGANISMS MOLECULES COMING TOGETHER ALLOW ACTION

@marktimemedia

@marktimemedia TEMPLATES ORGANISMS TOGETHER BECOME LAYOUTS

@marktimemedia

@marktimemedia PAGES TEMPLATES WITH SPECIFIC CONTENT

@marktimemedia NOT A LINEAR PROCESS

@marktimemedia BREAK IT BEFORE YOU BUILD IT

@marktimemedia DESIGN FOR THE WEB IS BECOMING BORING

@marktimemedia CLARITY VS CREATIVITY

@marktimemedia GOOD DESIGN GETS OUT OF THE WAY

@marktimemedia DESIGNING WAYFINDING

@marktimemedia ESTABLISHING PATTERNS DOES NOT PREVENT CREATIVTY

@marktimemedia DESIGN FOR YOUR AUDIENCE

@marktimemedia WHAT IS THE END GOAL?

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

@marktimemedia ENABLE GOOD DESIGN CHOICES

@marktimemedia CROSS-DISCIPLINARY COLLABORATION

@marktimemedia NO SPECIAL SNOWFLAKES

@marktimemedia PRESENTING PATTERNS

@marktimemedia SELLING THE METHODOLOGY

@marktimemedia PERFORM UI AUDITS

@marktimemedia REDUNDANCIES SIMILARITIES

@marktimemedia NAMING YOUR ELEMENTS

@marktimemedia MOOD BOARDS & STYLE TILES

@marktimemedia

@marktimemedia WIREFRAMES & PROTOTYPES

@marktimemedia Low-fi

@marktimemedia “MID-FI”?

@marktimemedia

@marktimemedia MODULE DESIGNS

@marktimemedia

@marktimemedia STYLE GUIDES

@marktimemedia

@marktimemedia PATTERN LIBRARY

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

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

@marktimemedia

@marktimemedia INCLUDE CONTEXT

@marktimemedia KEEP IT UPDATED

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

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

@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

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

Pixel Imperfect: A Practical Approach To Respon...

Pixel Imperfect: A Practical Approach To Responsive Design

More Decks by Michelle Schulp Hunt

Other Decks in Design

Featured

Transcript