Getting Nuclear with Your Website Branding and Design
Style guides demonstrate to clients, stakeholders, and other disciplines that there’s a lot of really thoughtful work going into a website’s design and development beyond just “Hey, let’s make a new website.” — Brad Frost
Every Thursday, Isovera hosts a lively lunchtime book club discussion. The conversation always moves quickly from examples on the page to specific issues about our own projects. Thoughts about the books percolate into other discussions, even weeks later.
Every book selection we’ve made has impacted the culture at Isovera in some way, but Brad Frost’s Atomic Design has been the biggest paradigm shifter for us when it comes to collaborative work at Isovera.
What’s Atomic Design?
The basic idea behind Atomic Design is building bigger things out of smaller things.
- Atoms are the smallest elements — basic HTML elements that can’t be broken down any smaller, like labels and form fields.
- Molecules are simple groups of elements that function as one unit. for example, a label, form field, and button make up a search form molecule.
- Organisms are complex groups of elements making up part of an interface. A page header could include a logo, primary navigation, and search form molecules.
- Templates are page-level objects that place components into a layout.
- Pages are specific instances of templates that show what a UI looks like with actual content. (credit: http://atomicdesign.bradfrost.com/chapter-2/#the-atomic-design-methodology)
Simple, right?
Sure, but that’s almost never how our clients think about web design. They instinctively want to see a “comp” — a pretty image of an entire web page — that they can sign off on.
And, if we are being honest, it’s really pretty easy for us to think like our clients do. Designers often start thinking about big design elements before honing down the little details. Developers want to see the whole picture before they start building things out.
Thinking atomically requires a bit of a mind shift for everybody on the team… but it’s worth it. Breaking the parts of a site down into the smallest possible pieces is a more economic way to work — for everyone. Here’s why.
- It makes sense to build new patterns out of existing parts, rather than building something entirely new each time.
- It’s much easier to rearrange a layout consisting of discrete elements. Iteration accelerates when you can quickly mix and match these clearly defined components.
- Updates to a component are carried across to all other instances across the site, again speeding up the development cycle.
Bringing In Pattern Lab
Once we were sold on the Atomic Design mental model, we looked to begin applying these concepts to our daily work.
Pattern Lab is a static site generator co-created by Brad Frost and Dave Olsen, based on Atomic Design’s methodology.
The Pattern Lab serves as a living style guide for the entire site. It documents all of a site’s components — both their look and feel, and the used markup to create them. Its focus on mobile-first design allows us to resize and test each pattern, from molecules on up, as we build them.
We couldn’t wait to start using it!
Wins For the Project
We quickly found that Pattern Lab streamlined our development efforts tremendously.
- It gives us a library of common components to kickstart projects with.
- Building from smallest parts up reduces the number of design decisions we need to make on any given project.
- Reusing the same base elements ensures consistent styling and markup across the site.
- Consistent codebase allows developers to work on a project simultaneously while maintaining uniform best practices
- Pattern lab provides a more collaborative workflow between designers and developers.
Wins For the Team
The last point is extremely popular at Isovera. Instead of the typical siloed work environment that still exists in many agencies, design and development becomes a team effort.
“My favorite thing about working in PatternLab is the common language that evolves through the nomenclature of each pattern. It becomes super easy to talk to a developer about organism X, comprised of molecules Y and Z, and to know you are on exactly the same page — because it’s all laid out for everyone to see.” — Caitlin Mailly, Isovera Designer
Collaboration — essential for quick development — is at the core of Atomic Design and Pattern Lab. Getting designs into a browser as soon as possible allows us to test and iterate on sample content, responsiveness, usability, and tons of other factors. If something doesn’t work, we can fix it quickly in Pattern Lab, before it ever makes its way into the site.
Wins for the Client
Best of all, our clients are on the journey with us, so they see the patterns as they are built up, and they appreciate the underlying system used to create the interface.
Our shared language and understanding of the elements of the site saves time and keeps us from eating up budget with iterations based on misunderstandings or misdirection. Instead, our iterations become meaningful and focused. We can spend our billable hours on tasks that move the project ahead by leaps and bounds, rather than in fits and starts. If a picture is worth a thousand words, a pattern might just be worth a thousand bucks.
This article was originally posted by Kellie Walton on our Isovera blog.
