Atomic Design – How To Make Web and UI Design Easier

Like Don't move Unlike
 
1

What is Atomic Design? What are design systems? How can you speed up your web design process?

Ever set out on a website or interface design project and wind up buried under hundreds of screens? Do your prototypes grow out of control and overwhelm your clients? Want to know how to get a website or project approved without designing every. single. screen?

Ben Burns (@mrbenburns) has the answer you’ve been looking for.

Special thanks to Framer X for sponsoring this video! Start your design system in Framer X today:

‘Design Systems for the Future’ is a collection contributed by designers working on teams at Slack, Dropbox and Facebook, all curated by the team at Framer:

In the past few years, we’ve seen tremendous improvement in screen/interface design tools. Designing for screens has never been easier.

With this change, we’ve seen our prototypes grow to be extremely unwieldy – 50, 100, 150 pages that are designed, usually by multiple designers, sometimes across different countries. We spent a lot of time establishing standards, and quality checking everybody’s work. This significantly drained the creative director’s and art director’s time.

There HAD to be a better way.

Enter: Atomic Design. Atomic Design is a series of visual building blocks that start out very basic and become more complex as you move up the food chain. These visual building blocks are organized by complexity into different buckets: Atoms, Molecules, Organisms, Templates, and Pages. Each element type builds upon the previous in order to create fully fleshed out digital products.

I remember first hearing about all this, and I have to say it was all a little confusing. If you’re like me, you might want to watch this video a few times – no shame here.

But many of you are probably like, whoa, wait, how do I even start this? It’s pretty simple. As long as you remember one thing:

Atomic design isn’t meant to be linear! This means we don’t expect you to start creating atoms right away. How boring would that be? Making button… after button… after button…

Instead, we start by designing a page or two. Or three. And we do a few variations of pages. Sometimes we’ll explore 10-20 ways to design something as simple as a home page or a product page.

Once we’re finished with the page design… or designs… we look for patterns. After identifying these patterns, we start extracting the elements, standardizing them, and adding each element to its own library as a reusable component.

👉Subscribe:

We love getting your letters. Send it here:
The Futur
c/o Chris Do
1702 Olympic Blvd.
Santa Monica, CA 90404
USA

Want a deeper dive? Typography, Lettering, Sales & Marketing, Social Media and The Business of Design courses available here:


Love the content? Become a sustaining member for $5/mo today.

BOOKLIST –
Essential Reading for Creative Professionals:
Essential Design Books:

Kits & Proposals:

Visit our website:

FREE resources:

Mandarin (Chinese) Subtitles on UiiUii


AFFILIATE LINKS*

🙏 Support The Futur but purchasing through our affiliate links:
Amazon:
Webflow:
Retro Supply Co.:
Creative Market:
Design Cuts:

✍️ Sharpen your skills by taking a course, using our affiliate links:
Skillshare:
School of Motion:
Bring Your Own Laptop Tutorials:

🎧 Do you like the music? Check out the music libraries we use in our affiliate links below:
Epidemic Sound:
Musicbed:
Artlist:


Futur Podcast on iTunes: 🎙


Host– Ben Burns
Cinematography– Aaron Szekely, Mark Contreras, Ricky Lucas
Live Editor– Jona Garcia
Editor– Stewart Schuster, Mark Contreras, Aaron Szekely
Futur Theme Music – Adam Sanborne
Typefaces: Futura, Din, Helvetica Neue
Futur theme song— Adam Sanborne

===
*By making a purchase through any of our affiliate links, we receive a very small commission at no extra cost to you. This helps us on our mission to provide quality education to you. Thank you.

Check Price & Availability

the author

quanrel

Find solutions to increase the user experience and engagement without compromising the business mission and vision for future growth of the product.

Leave a Reply

Your email address will not be published. Required fields are marked *