Atomic Design – How To Make Web and UI Design Easier

Godaddy videos and tutorials just for you.
Lightning fast hosting for a shockingly low price! 50% off GoDaddy Hosting plans



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:
http://bit.ly/FramerXDesignSystems

‘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:
http://bit.ly/DesignSystemsHub

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: https://goo.gl/F2AEbk

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:
https://goo.gl/bRt5qd


Love the content? Become a sustaining member for $5/mo today.
https://goo.gl/nwekfL

Our BOOKLIST:
https://goo.gl/onrdxr

Kits & Proposals:
https://goo.gl/mSjuWQ

Visit our website:
https://www.thefutur.com

FREE resources:
https://goo.gl/Qh6gHr

Mandarin (Chinese) Subtitles on UiiUii
https://uiiiuiii.com/?s=the+futur


OUR AFFILIATE LINKS
Skillshare: https://goo.gl/YCo2uT
Amazon: http://a.co/7abg3DD
Creative Market: https://goo.gl/g4jlTE
Artlist: http://bit.ly/2uWdna7


Futur Podcast on iTunes: 🎙
https://itunes.apple.com/us/podcast/the-futur/id1209219220?mt=2


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 http://www.adamsanborne.com
Typefaces: Futura, Din, Helvetica Neue
Futur theme song— Adam Sanborne

source

31 thoughts on “Atomic Design – How To Make Web and UI Design Easier”

  1. Hope you guys got value out of this one! Atomic Design is such a fantastic way to approach really comprehensive digital product and web designs. I encourage you to try this on your next project. If you liked this, hit the like button and be sure to subscribe – see you next time!

  2. Fantastic! I'm going to work on implementing this into my website design business. The trick will be taking the visual aspect of atomic design and translating it into code/WordPress. Would love to see a deeper dive of atomic design from the Futur.

  3. I don't think this talk solves anything. This guy explains how most designers work anyway. Usually I never start with atoms. I start with a frame, just like your house is built. Foundation, frame, drywall, and the rest of the details. I always start with a homepage. Once the whole page is built with all its components, color, typography….etc, then it becomes easier to recognize all the bits and pieces that were used to put the page together. Then using these same components, sections, color, and typography, I start to build other pages.

  4. I know this is unrelated to this video but I am very interested in a coaching session with you, Ben! I know you would like to see some clarified goals before you take someone on but what if one of my struggles is just that – figuring out what my goals are? Is that something you could help me with too? I've felt really stuck for a long time and I'm not even sure what I'm shooting for anymore. I think I'm stuck between doing what I love and thinking I should be doing what will get my bills paid. Thanks so much!

  5. Hey MrBenBurns! This is really cool man. Maybe not even related, but as an idea it would be cool to know your guys thoughts about design platforms in a video like "Framer vs/or Sketch" you know, something like that. I've been right on the fence about to switching or not to Framer. Great video again. Cheers!

  6. Great video, always love hearing about this inside info from you guys. Will definitely give atomic design a shot on my next project, I feel it will greatly benefit my productivity. 🙂
    Thanks for this Ben!

  7. First of all, thank you for the great content, guys. I would love to hear Chris' take on #3, how to sell it. This reminds me of an interview Chris had with Brian Collins.

    Here he talks about branding systems, and I wonder how you could make Atomic Design work in conjunction with end-user-friendly design systems. Could this be the holy grail?

  8. I knew I wasn't crazy or paranoid. Glad to see that this is becoming a standard in the UI design process. I always ship out a component library to my development team so they don't worry about coming up with new styles when user interaction begins to occur. But then, when working with a large team of designers, it'll definitely be productive to have atom sized components that form larger components and handle issues of non-conformity in the UI design.

Leave a Reply

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