In his Atomic Design presentation at An Event Apart in Chicago 2013, Brad Frost (inspirationskälla) introduces atomic design, a methodology for creating robust design systems. He covered how to apply atomic design to implement your very own design system in order to set you, your organization and clients up for success. Here’s my notes from his talk: Atomic Design
- The concept of pages have been around for a long time. It worked until now. But pixel perfection and designing the same experience for all devices is not possible. Now we also have to deal with experiences that haven’t been invented yet.
- Phones, tablets, and laptops are not the same. Designing for today’s Web doesn’t mean just making things work on iPhones, iPads, and Cinema Displays.
- Concept of Design systems, Style tilesStyle tiles in the browser
- What is an interface made off?
- Foundation, Frameworks as Boostrap are great for prototyping and proof of concept. But they are all the same.
- Framework potential pitfall: one size fits all, lookalike issues, potential for bloat/unneeded stuff, Might not do everything you need, compatibility with existing sites, subscribe to someone else’s structure naming, style
- Anna Debanham: Front end style guides: Makes easier to test, better workflow, creates shared vocabulary, useful references
- Tools to use to help us make robust design systems: Rock hammer
- But these tools are time consuming to create: Time consuming, treated as auxiliary project, often too abstract, seen only as designer/developer tool, often created after project launched, often incomplete/ only serving present cases, lacking a clear methodology.
- The periodic table of Html Elements: joshduck.com
The basic methodology of Atomic Design
- Atomic design provides a methodology for crafting an effective design system
- Easily traverse from abstract to concrete
- Promotes consistency and cohesion
- Assembles rather than deconstructs
- This is nothing new. A lot of people have been talking about this before
- Basic building blocks of an interface
- Can’t be broken down any further without losing their meaning
- Often not too useful on their own
- Good as an at-a-glance reference
- See all your global styles laid out at once
- Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.
- Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations.
- Like atoms in nature they’re fairly abstract and often not terribly useful on their own. However, they’re good as a reference in the context of a pattern library as you can see all your global styles laid out at a glance.
- Group of atoms bonded together
- Smallest fundamental units of a compound
- More concrete than atoms
- Encourages a “do one thing and do it well” philosophy
- Molecules take on their own properties and serve as the backbone of our design systems.
- For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.
- Building up to molecules from atoms encourages a “do one thing and do it well” mentality. While molecules can be complex, as a rule of thumb they are relatively simple combinations of atoms built for reuse.
- Molecules give us some building blocks to work with, and we can now combine them together to form organisms. Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.
- Group of molecules joined together to form a distinct section
- Complex molecules
- Can consist of similar and/or different molecule types
- Encourages creating standalone, portable, reusable component
- You can create good experiences without knowing the content. What you can’t do is create good experiences without knowing your content structure. What is your content made from, not what your content is. -Mark Boulton
- Mostly comprised of organisms
- Begin life as HTML wireframes, increase fidelity over time
- Client-facing and concrete
- Focus on content types and rules
- Eventually becomes the deliverable/production code
- At the template stage, we break our chemistry analogy to get into language that makes more sense to our clients and our final output. Templates consist mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and start seeing things like layout in action.
- Templates are very concrete and provide context to all these relatively abstract molecules and organisms.
- Templates are also where clients start seeing the final design in place.
- Specific instance of a template. Placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see.
- Pages are the highest level of fidelity and because they’re the most tangible, it’s typically where most people in the process spend most of their time and what most reviews revolve around.
- The page stage is essential as it’s where we test the effectiveness of the design system. Viewing everything in context allows us to loop back to modify our molecules, organisms, and templates to better address the real context of the design.
- The hub for most people involved in the process
- Pages are also the place to test variations in templates.
- Demonstrate variations in templates: design/ content tweaks, include/exclude organisms, etc.
Why Atomic Design
- In a lot of ways, this is how we’ve been doing things all along, even if we haven’t been consciously thinking about it in this specific way.
- Atomic design provides a clear methodology for crafting design systems. Clients and team members are able to better appreciate the concept of design systems by actually seeing the steps laid out in front of them.
- Atomic design gives us the ability to traverse from abstract to concrete. Because of this, we can create systems that promote consistency and scalability while simultaneously showing things in their final context. And by assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking patterns after the fact.
Pattern lab (create design systems with atomic design)
- a collection of tools to help you create your design systems
- creating your own design system
- Will help you craft designs across the board
- A comprehensive custom component library
- A pattern starter kit
- A design system builder
- A practical viewport resizer
- A design annotation tool
What pattern lab isn’t
- a UI framework
- Language, library, or style dependent
- Incredibly rigid
- Use the right tool at the right time
- The post-PSD era: How do we use the tools?
- Viewpoert reziser: Ish, pixel to em conversion tool, disco mode. The tool will help you see how your site will look like across the whole screen spectrums
- Hay mode: Start with the small screen first, then expand until it looks like shit. Time for a breakpoint! -Stephen Ha
- stylifyme.com online style guide generator
Why pattern lab
- Serves as a hub for the entire design process
- Useful tool for everyone: information architects, designers, developers, clients
- Fills the post-PSD void
- Can easily traverse from abstract to concrete
- Write and name HTML/CSS/JS as you please.
- Start with a system first rather than deconstruct later
- Encourages flexibility
- Extensible and scalable
- Document your interface
- Promote consistency
- Establish which elements will be challenging to translate into a responsive environment
- Lay the groundwork for a future style guide/pattern library