A brief 20 minute interview with the infamous web designer, writer and speaker Brad Frost.
Brad is, besides being a cool guy, a figurehead in web design with a core focus and interest in responsive design and what he calls ‘atomic design'; more on this later. Talking with him riff about atomic design and the workflow and system involved within creating an efficient and effective end product was really interesting.

Summary

How did you become a web designer and what interests you most about it?

Brad started off at University as a music major as he had a core interest in, well, playing the bass but also  a preference in the business side of the music industry. Upon deciding where his time would be more efficiently spent, chose a route of majoring in media, arts and design and only taking some music classes as a minor. This was obviously a very wise decision as it led him on to the path that he’s on today.

Naturally Brad starting making websites with the skills that he learnt for friends and family but it wasn’t until some alumni came in from AOL and started discussing the process of web design that things really changed. In Brad’s words “everything I knew until that point was wrong”. They recommended a book call “Designing with Web Standards” by Jeffrey Zeldman which Brad proceeded to buy off Amazon – the rest is History.

Is was really the mix between the creative and the logical that Brad got interested in this topic; the left brain / right brain balance and he mentions that’s what he loves most about web design as a concept.


Brad is a responsive design advocate and therefore at the forefront of it’s process and workflow.

He got into mobile web design a couple of years before it became imperative and took his ‘bumps and bruises’ in this testing period. Brad is a strong believer that the tools for responsive design, the more technical side of matters, will ultimately ‘sort themselves out'; this being responsive images, flexbox, grid layouts and so forth. The real challenge, however, is to do with people and the process and workflow of how those people interact and create something that is both efficient and effective. What are the techniques and tools to have designers, developers and stakeholders all thinking the right way and collaborating together? This is what led Brad to advocate style guides, pattern libraries and other organisational type elements to create and generate his theory of atomic design.

Atomic design breaks interfaces into smaller components, or atomic elements, we’re able to look at each element in isolation and ask “well, how does our primary navigation scale on small screens, large screens and everything in between?”. We’re able to hone in on a specific component and discuss the different responsive consideration for that element. A more focused approach than simply asking “how long will the homepage take” is asking “what goes on the homepage” and looking at each element in isolation.


What is atomic design? Are there any challenges that come with it as a theory in practice?

I raised this question as I have had experience of atomic design in a working environment and the challenges I’ve had are more from the design end where designers, by nature, find it difficult to design elements in isolation.

Brad believes that feeling is totally justified and atomic design isn’t advocating designing a button in isolation, crossing your fingers hoping that it works well. Atomic design is much more than that and he goes on to explain the difference in atoms, molecules, organisms, templates and pages involved in the workflow.

Atomic Design allows you to simultaneously develop the whole as well as the parts of the whole. There are no steps involved, we’re creating a final product or, how Brad puts it focusing on “how it all jives together”. It allows you to create an underlying system for reuse, consistency and extensibility over time. In it’s simplest terms, it’s a methodology of creating an interface design system that consists of 5 distinct layers of which you can read more about those layers and how they work together in his upcoming book – first chapter available here. 


Listen to the full interview here

I’d love to hear your thoughts on this discussion please feel free to email me at davidleemannheim@gmail.com


References