Using Atomic Design to Create Responsive Interfaces
Watch Brad's Workshop Trailer
Brad Frost
Only seats left.
Establish a practical foundation so your design team can make flexible, adaptive UIs. Design future-friendly experiences based on layout, image, and navigation patterns.
Morning
Creating responsive, adaptive interfaces
- The what, why, and when of responsive web design
- Trends in mobile growth for responsive sites, apps, and social media channels
- Foundations of responsive and principles of adaptive design
Establishing flexible design systems
- The role of Atomic Design and design systems in building future-friendly interfaces
- How to adapt design systems over time as content and devices change
- Which tools, resources, and analogies to use when talking about mobile with your team
Afternoon
Using layout and navigation patterns
- The relationships among content hierarchies, columns, and breakpoints
- Different approaches to designing effective media queries
- When to use complex navigation patterns (like mega-menus) or simple ones
Designing with image and interaction patterns
- Best Practices in dealing with responsive images, including resizing, text, and load times
- When to use lightboxes, data tables, accordions, carousels, and fixed positioning
- A bit on how it works together, from browser support to CSS
Make Mobile-first Work
Bridge development gaps
If you haven’t designed for each step in the flow—like an error message—who will? Help front-end developers and others move faster while improving your org’s mobile UX.
Speak the "right" language
Don’t be scared. Understand what’s involved with building responsive interfaces so you can better communicate with your technical team and with business or marketing folks.
Focus on the content
Everyone has an opinion. Keeping conversations and design decisions oriented on content needs will keep projects moving forward and teams happier, too.
You’ll learn how to:
- Construct interfaces from their “atomic” elements
- Create better website mapping experiences for small screens
- Avoid common desktop tricks that don’t translate to mobile
- Decide what to put on a page so it works in any environment
- Conditionally load auxiliary and secondary content
- Design for touch in ways that support UX across devices
4 Practical Takeaways from Brad’s Workshop
An entire toolkit of design patterns that work
Create future-friendly interfaces and interactions without reinventing the UX wheel.
Examples of orgs who’ve “Been there, done that”
Draw on lessons learned from Starbucks, Disney, The Boston Globe, BBC, and TIME.
The words and workflows to go responsive
Talk more confidently by understanding why, when, and how responsive design works.
Interfaces that work well across every screen
Take a systematic approach to mobile-first design using progressive enhancement.
This workshop is great for designers of all skill levels
Whether you’re new to responsive or a veteran designer, you’ll find endless amounts of practical tidbits in this workshop. And come prepared to take notes, because although you won’t be doing any hands-on exercises, you will be drinking from the responsive-design firehose that is Brad Frost’s brain.
Brad Frost, The Atomic Man
@brad_frost on Twitter
If you’ve ever seen Brad Frost onstage, then you’ll know his passion and enthusiasm for responsive design is matched only by his practical working knowledge for the subject.
But if you haven’t yet seen him, then get ready—he’s a coach, vocal leader, and partial comedian who makes learning fun and functional.
Brad is known for his work in designing responsive sites for huge content sites such as Entertainment Weekly and TechCrunch. He’s also the creator of the super-popular resources This is Responsive, Pattern Lab, and WTFMobileWeb.
So if your team talks about designing mobile-first, content-first, responsively, adaptively, or progressively… well, it’s time to decipher what all of those mean in practice and process alike.
And Brad is the best guide you could hope to have.