Interview with Brad Frost on Atomic Design & Crafting Modern Websites

From building high-profile websites to lecturing or presenting at conferences, Brad has done a lot. He’s well known in the design community for covering a wide range of topics and co-hosting the Style Guide Podcast with Anna Debenham.

In this interview we get to learn more about Brad’s history as a web designer and developer. He shares tidbits about his work experience, info about his atomic design methodology, along with tips and helpful resources for web designers & developers building modern-day websites.

Q: Can you tell us about your history and how you got into web design? What initially attracted you towards the field?

Well I don’t think I can count making Dragon Ball Z Geocities websites as the start to my web design career.

I got into web design while attending James Madison University. I started out as a music major to learn about recording, live sound, and management. I ended up playing in a band that taught me those things and more. One of those “and more” things was to make and manage the band’s website.

Eventually I switched out of music and into a program called Media Arts and Design where I took a Photoshop/Illustrator class, Dreamweaver class, and a Flash class.

My attraction to the field is that it’s very much both an art as well as a discipline, just like music. My mom is an art teacher and my dad is an accountant, so I feel that web design strikes a healthy balance between right brain and left brain.

Q: When you were starting to learn how to build websites, what were some common mistakes you made along the way? Also how long did it take for you to grow from a novice to a competent designer/developer?

Oh jeez. I’m pretty sure I’m still making those same common mistakes, but I’ve probably outgrown a few. Right now my brother is working for me and I’m watching him relive a lot of the mistakes I made. Syntax issues, missing commas, approaching a problem a certain way and painting yourself into a corner, it’s all there.

I’d say I started getting over the hump when I moved to New York City and got a job at a small e-commerce agency. I was the only developer, so I had to roll up my sleeves and learn how to do things–fast.

Q: You’ve worked on a lot of big-name projects for companies like Verizon, MasterCard, and TechCrunch. Did they reach out to you or were you just on the right team at the right time? And do you have a preference for larger or smaller client work?

Well some of those projects for clients like Verizon, MasterCard, Nike, Tiffany & Co., etc were done while I was at an agency called R/GA. Those projects were really insightful as they involved a whole lot of moving parts, big budgets, and tons of people.

When I went out on my own at the beginning of 2013 I hooked up with Josh Clark and a constellation of other independent designers to work on a redesign of TechCrunch and Entertainment Weekly.

I really enjoyed these projects. I got a chance to work with some insanely smart, talented, autonomous people. These projects solidified my opinion that you don’t need millions of dollars and tons of people to do good work.

Q: Can you remember one of the hardest challenges you faced in your career & how you overcame it?

Hmmm, this is tough.

I’d have to say any time I’ve had to stop working with someone because things weren’t working out.

At one of my first jobs I had to fire someone, which was not at all a good experience. Those conversations are super challenging and you don’t feel good about it afterwards. I still don’t.

Q: When starting a new creative project how do you conceive ideas or devise a creative strategy? If you feel stuck with a creative block where do you look for inspiration?

I don’t think I’ve ever been at a loss when it comes to things to keep me busy. I have a ton of projects that are in varying stages of completeness, and a bunch of ideas(many of them terrible and/or nonsensical) that I’d love to pick up and run with one of these days.

Conceiving a new project is as simple as saying “it would be cool if [thing] existed” and laying out the steps to make it happen. Thinking too hard or intentionally seeking inspiration works against you, as I think for a lot of folks it leads to derivative work.

Q: Do you think college is a necessity to land a job as a web designer/developer? Or is it possible for someone to reach proficiency by studying on their own?

I don’t think attending university is necessary to land a job, but I do think university can be very helpful.

It’s wild how often I reference my philosophy 101, psychology 101, and physics classes in my work & throughout my life. I also think the social experience of attending a university can be really healthy for a lot of people.

But with respect to learning the craft of web design? No. I don’t think a 4-year institution is necessary.

There’s no substitute for rolling up your sleeves and doing the work, taking your blows, and learning from it. I’ve found a lot of universities to be lagging behind on the latest techniques, but to be honest it’s terribly difficult for anyone to keep up with it all.

The best thing a university can do is introduce students to a lot of ideas & technologies, get them excited, and support them as they pursue the stuff that turns them on.

Q: What’s your opinion on specialization vs. generalization? Do you think a developer is better off learning full-stack or focusing specifically on either frontend/backend code?

I recently gave a talk about this, and I think it’s extremely important to develop a healthy T-shaped skillset.

Let’s be honest: it’s literally impossible to know everything about this field. You simply can’t do it all.

But I also think it’s important to understand all that goes into creating and maintaining a web experience. I’d say a mixture of breadth and depth is key to a successful career in web design & development.

Q: Do you have a favorite activity between writing, consulting, speaking, and building websites? Are there any tasks or projects you love to work on more than anything else?

I love helping people. So long as I’m able to help people, I’ll continue to be happy.

Helping people takes a lot of different forms: giving workshops, consulting with organizations, making resource websites, tweeting, answering interview questions(hi there!), or grabbing a coffee with someone.

I don’t feel any pressure to do one thing more than another. And I think that’s more than OK.

Q: What do you feel is the primary benefit of attending a design/dev conference? Is it to meet other designers, try to find work, to learn new things?

There are tons of benefits from attending a conference.

Yeah, hopefully you’ll learn some new tips and tricks that’ll make you better at your job. But hopefully you’ll also come away invigorated from being around kindred spirits for a couple days.

The Web community is amazingly passionate and helpful. I think we need to ensure that conferences continue to be places which embrace the spirit of the community.

Q: How did you come up with the methodology of “atomic design”? Do you think it’s a concept that every web designer/developer should internalize?

I loved the idea of thinking of UIs as patterns, and was really excited to see more pattern libraries being released out into the world. And while these things were tremendously insightful and aesthetically pleasing, they were also sort of loosely categorized(if there was any organization at all).

That’s what led me to think “maybe there’s a way to deliberately construct these UIs”. That’s what led to what I call atomic design, which consists of five distinct stages(atoms, molecules, organisms, templates, and pages) all working together to create effective design languages.

While I’d like to selfishly say every designer and developer should take atomic design to heart, I don’t think I would get all religious with it. I’ve found it to be a tremendously helpful mental model for me and has forever changed the way I approach my work.

But I’d say so long as designers and developers are thinking modularly, they’re doing a good job.

Q: What got you interested to write the book Atomic Design? Can you share a little about its contents and perhaps when it might be released?

So I came up with atomic design as a concept over two years ago. And since then I’ve been applying it to my projects, talking about it at conferences, and solidifying the concept as well as Pattern Lab, the tool I created with Dave Olsento create atomic design systems.

Now that the methodology has matured and has been tested time and again in the field, I think it’s a good idea to write it all down and encapsulate it in a book.

The book covers a few topics:

  • The importance of design systems
  • The atomic design methodology
  • Tools for creating effective pattern libraries
  • How to establish a pattern-based design and development workflow

I’m writing the book in the open so you can actually read it in it’s current state right now.

I’m hoping to have the manuscript done soon, and then I’ll move on to getting the book printed. If you want to support the project you can preorder the e-book for 10 bucks. It’s a bit like Kickstarter-without-Kickstarter I guess!

Q: Do you have any favorite books, videos, or resources that you think could be valuable to every designer?

Oh jeez, yeah there are tons.

Some of my favorite sites to learn new things are:

  • Smashing Magazine
  • CSS Tricks
  • A List Apart
  • Sidebar.io

Q: Who are some of your favorite designers or developers from anywhere in the world?

Oh man. Uh. There’s a ton of designers and developers I have a great deal of respect for, and I’m so thankful I can call many of them my friends. I started typing out names, then realized I could go on for hours naming people.

All I’ll say is, if you read something from somebody or use their tool(s), reach out to them and tell them you appreciate their work. It means a lot.

Q: And finally do you have any parting advice for young designers/developers just starting their career journey?

Work hard. Don’t be an asshole. Share what you know.


I’d like to extend my sincerest gratitude to Brad Frost for taking the time to provide these amazing answers. If you’d like to learn more about him you can follow him on Twitter @brad_frost or visit his website bradfrost.com.

Author: Jake Rocheleau

Collect by: uxfree.com

Top