Atomic Design - How To Make Web and UI Design Easier

[@mrbenburns]

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!

[@TheLopezjohn]

I am product designer. I can be interview to give my perspective how this changes the modality of concept development and execution in my department.

[@benjamin4990]

Hey, instead of spitting through the comments to know what subject to discuss next. You can insert a poll and you'll easily see what to talk about! :)

[@mrbenburns]

@@TheLopezjohn Shoot me a DM on Instagram :)

[@Tman634]

That was a great video, i honestly think you should do a deeper dive into Atomic design and then follow it up with the other ideas, but there is still so much to discuss based on watching Brad Frost's presentation. Thank you so much.

[@adammatossian7938]

If you think about it. It's like CSS for design. (Mind Blown)

[@SugamAnand]

Finally Futur has picked up this topic. Designs systems have come a long way. Many organisations are using this and it has been super helpful for big design teams. Would love to discuss more about how we, the product designers, use and manage the design systems in large organisations.

[@mrbenburns]

Sugam Anand it’s a game changer for sure

[@SugamAnand]

MrBenBurns I agree and today it goes beyond just design components. Many organisations also create code components as part of the system that developers can use directly. It’s an interesting time for designers 😊 FramerX is still very limited for practical use. Maybe you can also share about sketch’s nested symbols and shared libraries. It provides a powerful way to build design components.

[@tanmaypanadi1414]

I have seen this method for coding and also shown in compression algorithm to keep tracks of various strings of data

[@Cubannerd]

@@mrbenburns Invision has a very comprehensive handbook dedicated to design systems. I highly recommend it. designbetter.co/design-systems-handbook

[@clarasofiafrancamandujano8812]

Next month I am going to be a UI/UX design intern and my company told me to search about Atomic Design. Your explanation is amazing! thanks!

[@armcezar8106]

Great video! I’d personally like to see a full fledged UI/UX course. Pretty much the entire process. From research to ui design. More focused on freelancers since they also have to do the research on their own.

[@mrbenburns]

ARM Cezar that’d be cool

[@AnthonyRosas]

I can vouch for an intensive overview course put on by Nielson Norman Group specifically, by Bruce Tognazzini (Tog), he developed the Mac's UI www.nngroup.com/courses/interaction-design-3-day-course/

[@ruslanuchan8880]

I'm not a designer, but this video had taught me the design process goes into the UI of a web. Thinking in components sounds like how a React developer would code the web UI.

[@mrbenburns]

Ruslan Uchan yep - there is a lot to learn from engineers

[@DarrenbyDesign]

Usually designers and engineers are working together to create the design system so that makes sense

[@anissat-tech]

That's my reaction... I didn't feel like this was anything new because that's the way I've approached my coding for decades... :/

[@helloroman]

Atomic design is a great approach to create a web app - recently i was working on app built in Vue.js framework and we went with atomic design approach. The one and only thing that i regret and it might be a good advice for you is to start simple and try to not create abstractions before you're sure how the component will work. For example, first we started to create multiple versions of buttons, or forms, and eventualy we struggled to add some more functionalities to it. It would be better to first see what kinds of behavior we will need, and later to create an atomic component.

[@verquo]

Thats exactly why atomic design is awesome. It helps a lot both sides if you're using components while developing

[@sahilshahzad2318]

Yes! More about design structures and systems and how it relates to design thinking.

[@dele-586]

Mr burns, loved the content, a friend of mine had told me about Atomic design, over a year and a half now, now its in the mainstream, this video simplified the understanding of the process. WE would like you to use this process in a live project scenario, thanks again, loved it.✌🏾

[@xuefeng77]

Hi Ben, please bring more of these! I'm an UI/UX designer, and very glad to see this episode is related to my realm.

[@bros_jaey]

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.

[@Daniel-Condurachi]

2 and 3 of your ideas are the most interesting ones to me

[@emmanuelcadigwe]

Deeper dive into Atomic Design. Please do more Atomic Design content. I love this, Ben

[@Steveoliverdesign]

Thank you for your time and value. Processes, rules, and systems are very important to establish up front so a designer can be more creative and productive with the whole of the project. Thanks again!

[@HotelSeptember]

Amazing video. We use a combination of Sketch and Abstract for collaboration and version control. Framer X seems to combine these tools. Be careful not to throw around the term 'Design System'. The Atomic Design methodology is NOT a Design System. A Design System is a living ecosystem within an organisation made up of designers and developers that actively contribute, validate, and enhance the brand assets, be it for print or digital. One part of that is the UI library which may implement Atomic Design. Hope this helps.

[@wise_nut]

I'd like to seeee all of them from the list Ben!!!!!! Thanks!!!!!!!!!!!!! I'm a big fan!!!!!!!

[@DarrenbyDesign]

Ben I really am glad that you guys are talking about design systems. I like the way you discuss it. I'm also glad to know there is a fellow design system nerd in thefutur community

[@angelvelazquez1792]

BOOM! Atomic Design. This is the topics I enjoy and I really encourage you cover more items related to web design/development. Gracias Ben.

[@mrbenburns]

Angel Velazquez thanks Angel!

[@djlilcq]

I'm starting my career as a UI/UX Designer and I like what you offered at the end, everything seems interesting to me. Thanks for the info.

[@danielDefoe81]

Man, you should definitely make a long version of that super interesting topic.....you got me

[@ryomac5267]

Awesome video!! We've been using Atomic Design slightly differently (more linearly) but I love the way you do it! I would love to see a live designing video where you make a whole UI from scratch, and maybe scale it to web AND mobile. It doesn't have to be elaborate or look amazing, but just some simple app/website using the AD system, so that we can see (more in-depth) what your process looks like. Thanks for the video!

[@benardoneka8927]

Hey Bro, this was super helpful indeed. You did help me out so much with how you have been able to explain the whole thing and how atoms, molecules, and organisms work. I had a school assignment on the same subject and I had to write a paper about how I understood the entire thing. Thank God you saved me. Sure I will be very much interested in learning more the whole thing how it works.

[@BentoBox]

Mastering symbols/components in [insert your ui tool of choise] is one of the biggest time savers. I'd love it if Futur showcased more UI/UX content in general! There was a bit more at the channel's inception, but since there hasn't been as much~

[@mrbenburns]

Gate Nk 100% agree

[@Ralphunreal]

A deeper dive into atomic design would be nice to see.

[@DanielSoto101]

I’d love to see more on this, especially a deeper dive into atomic design.

[@Runitsyourmamarun]

Fantastic video Ben Burns, it’s great to see you paving your own style! 1, 2, 3, 4... I would love to see all those ideas in future videos.

[@emaloc1]

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!

[@PriscillaBijuThen]

Why choose? Why not do ALL 5 topics over the course of several weeks? Love your videos, so dynamic & engaging, thank you!

[@nimtim]

This is valuable content. I'm a product designer and have been coincidently practicing a version of the atomic design systems. It's a very useful tool for a UX team of one. This brings a lot of things into perspective. :D

[@nobledigital]

Good stuff Mr. Ben Burns. This tethers directly into how we move from messaging strategy into the design phase. Great to see a platform exists already to dovetail right into our current workflows! thank you sir.

[@Ralphunreal]

I definitely want to learn more on design systems. How to design one in particular.

[@willgelder6191]

Phenomenal explanation of atomic design. Good, practical examples too. At my company, we've extended the atomic metaphor including "sub-atomic" parts that include borders, spacings, radii, and shadows, and opacity. It's a lot of work to set up but the investment is well worth it!

[@masonthompson3284]

It’s always fresh seeing Ben (& his design aesthetic) on the channel! Also to the possible video ideas - All of them. More in depth series’ in general!

[@mrbenburns]

Mason Thompson thanks Mason!

[@muhammadrazaalikhan6988]

Thanks a lot, Ben. If possible, could you please create a video where you do a design system for a sample/existing company. For example, design system for Uber or airbnb etc. That would be great. Thanks again guys, I love you all.

[@fryrichard]

Great video - would love to see more details on how to make this work across different front end coding languages, e.g. React and Angular assuming you’re going below the pixels, typography and icons in your design system

[@tamarazaric7087]

YAASSS been looking for this, thank you a thousand times! Would greatly appreciate more of the similar content on this channel in the futur!

[@danielvanginkel7081]

Great video! Thanks for picking up Atomic Design and explaining it in an easy way. I would like to see a video taking a deeper dive into Atomic Design and also one about getting client approval and how to describe and sell an Atomic Design project. One thing though: at 4:22 you talk about page templates and show a list of examples which is headed by the word 'organisms'. I think you forgot to rename it to Templates and Pages when duplicating the previous slide.

[@theeriksoper]

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.

[@cesarv.6365]

Yes! Can you go more in depth about atomic design?. Also, can you suggest resources or books about it? This video was awesome. Thank you!

[@mariocvetkovski168]

Definitely i would love to see more about atomic design and design systems. Also would be great if you add more free resources related to design systems, style guides and wireframes.

[@ndahuraisaac486]

Mr. Ben Burns, i think you need a seperate tutorials page. About what I'd love to see as a follow up, mehn! the deeper dive into this "atomic design" would be really appreciated, especially the part about using it in a live project

[@hristina449]

Love the approach. Would love to buy a course with this framework

[@AD-um9kc]

I love this concept. Gamechanger. Makes every team member's workflow efficient and ensures consistency; one of my favorite things! Yes, please do a deeper dive video. I say "YES" to 1-4. Thanks Ben. :)

[@fritz-creates]

superbe! 1-4 yes! 5) More and more designsystems are entering the market. Would be cool if you elaborate on this topic to get a clearer picture what software to choose. I'm just starting out on WebDesign, coming from Print Design and Lettering. Feel kinda overwhelmed by the many products out on the market. Cheers and thank you! :)

[@oncle_loutre]

One of my mentors had me work on atomic design during my design bootcamp, and although I could see the potential, I couldn't figure out how to implement it in a sensible way that didn't feel "tacked on" or arbitrary, because, as you said, it felt like I had to design my buttons and form fields before I even knew what it was going to look like. Having a couple of page designs before creating a design system makes a lot of sense. I'm going to experiment with this on my next client project and let you know how it went. And by the way : more of this, yes, please ;-)

[@CaptainLenK]

It will be nice to learn more about Web and UI Design easier. Specially for other designers like Graphic designers. I love this content, Thank you @MrBenBurns

[@nb08]

Binge watching all the recent futur videos and it's still valuable

[@nikhilverma1396]

Hey! @MrBenBurns , really liked the brief that you provided us with about Atomic Design. Let's dig a little deeper about it in detail. I guess that would be really interesting and helpful. Thanks man!

[@colorofboom382]

When is the next video in this series coming out? Each of the options Ben provides is valuable and I would love to watch it!

[@chriswilcox8977]

Great breakdown, it's kind of something I've already been doing but not putting any terminology in - creating and using a set group of design features used throughout a site to keep a consistent look and feel 😎

[@teooreo]

thank you, Ben! Awesome web master teacher!

[@YuriRadavchuk]

Love Atomic bottom-up thinking mindset. Combined with a strategy framework you can do almost Anything.

[@mrbenburns]

Yuri Radavchuk A G R E E

[@alterheaven2473]

Awesome! More of design systems topics please.

[@annettekempers6213]

This is great stuff, mr. Ben Burns! The way you explain is also very structured and compact. I will welcome anything else on Atomic Design!

[@abirahmed1292]

Yes, please make detail video on atomic design and design system.

[@ThisDesignLife]

Really useful thanks Ben. Great to see where you create these vidoes in person as well.

[@ConorTimmonsDesigns]

BEN! All of your content is AMAZING! I want all your video ideas! I’ll watch every second. ❤️

[@arisaputra-fd7lv]

Love this video! Please make a video to show the process how you design a website and explaination about design structures.

[@C2theCity]

Would like to see more about each topic. Starting with the first topic.

[@BrianTerryBranding]

Hey Ben, awesome video. It’s impossible to choose just one, I’d love to see 1 through 5 ...they’re all just as important.

[@NguyenNguyen-dq1yh]

Yes, I wanna know more about Design System. Thank you!

[@RaigoLilleberg]

really enjoyed the build-up and flow of this video - thanks for the effort Ben & co! … would be great to see more yours in-house practise on the topic and hear some thoughts on different tool choices, you guys-girs have tried out in-house ;)

[@mrbenburns]

Raigo Lilleberg 🙏🙏😎

[@sparkplug964]

Deeper dive would be great, and also interview on how other designs are working with this system?

[@zuzahicks2913]

Thank you for this video! The timing is ideal. I would love to learn more about atomic design and its best practices.

[@diongeraldo3348]

Finally some legit stuff that i really need about design system. Well done MrBenBurns & The Futur Team!!

[@Lissemt]

I’m finishing my portfolio website this is very helpfull

[@davidmartinez5459]

Nicely done Ben!

[@antoniostojceski944]

Great video Ben, I would love to see deeper dive into atomic design and design system. Thanks for sharing those tips.

[@jeroendielis4082]

Awesome video, I definitely want to see a video about a deep dive into atomic design system...keep up the great work 👍

[@noman.digital]

Good One. I would love to see a full course on this topic.

[@rashiagrawal5936]

I would like to know more Atomic Structure. Thanks for this Ben!

[@VEE727]

I've been designing this way without knowing about the atomic structure. This is gold

[@mediumstudio]

I design everything in Adobe Illustrator / it works phenomenally for websites - you can make symbols to use throughout ...

[@pedroandrade3725]

Great video man! I would like to see how can we apply this atomic design concept on other areas of design, like logo design for example! Thanks for the great content

[@kevinquiec]

Great video Ben! And really valuable; I am planning to implement soon a design system. Will really love to see more!

[@mikeshai]

So good! Where's the link to Brad's Ted Talk though? I found a few different ones on youtube. Wanted to watch the one you were referring to.

[@stanpo_design]

Awesome. Really simple and logical. I would like to hear about 2nd and 3rd points of your list. Thanks

[@axlpascual]

Exactly what i needed. Hope to see more of this! Thanks guys

[@davidrivers3120]

Super interesting video, thank you. I feel moved to share a project concept that I have. To work on a design system for material design, which would be focused on making both Google Design and Material Design accessible for non-coder Designers. The vision for this is to have in-put from leading brand strategists, UI UX designers etc, to build into the platform a dashboard that can guide the designer in line with best practices, provoke learning Material Design fundamentals and deepen both understanding and skill sets the more its used. An open source platform that can be updated as the design UI kits and design thinking is updated.

[@filipfelbar2001]

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!

[@kevinnunezdesign]

Fantastic Video! Very insightful. Definitely going to keep this in mind when working on my next project.

[@josefacanha5387]

Great video and concept. I'd love to know more about Atomic Design and its various implementations!

[@faisalgolonggom9348]

Great content! I hope you can create for full detail of Atomic Design because I'm very interesting to learn about UI/UX.. Thanks!

[@alinechaussade6087]

Amaziiiiiiing! More please, 1, 2, 3, 4 and 5!

[@sarahippolito1028]

Thank you for this really clear and well explained video!

[@winakuo6576]

This video is awesome, thanks for sharing!

[@EnglishWithDidi_]

What a nice way to put this concept!

[@wazulbuth]

Keep on with this. I would definitely want to see more.

[@nathanielladouceur7022]

DEFINITELY want to hear more about atomic design!

[@bfauzi339]

For sure number 2, Mr Ben🔥🔥🔥🔥🔥 Thank you, Really appreciate it

[@aleksejsskurjats6394]

That's awesome guys ! Want to learn more about atomic design and design structures. Thanks for sharing the knowledge

[@MrVanKappen]

Hey Ben, great video! As a designer I also work in a similar kind of way. I notice it works very well when I'm communicating with other designers or clients. However, when a website gets build I notice developers don't always get it, and I spend a lot of time giving feedback. As a solution I now code the styleguide myself so developers can use that as building blocks. This however also cost me a lot of time. Maybe you can make a video explaining how you collaborate with developers. I'm really curious how other agencies deal with this and if there are more efficiënt ways.

[@Chiqc]

Very interested in more design systems yes

[@Cubannerd]

This is similar to how computer engineers work. Low-level to high-level programming languages. Just take ReactJS, VueJS or Angular. They are libraries and/or frameworks built out of Javascript. How is Framer compared to Figma or Sketch btw?

[@oserefemhenativie1090]

Very true

[@jackbentner3881]

Yes more of this! Amazing amount of help!

[@ImGirishUnde]

This is really interesting video. Hey Ben, Thank you for telling us about this new concept. All ideas you mentioned at the end looks interesting and important. Why don't you cover them in single video.. just a suggestion.. Best, Girish

[@mrbenburns]

girish unde that would be a monster video lol

[@ImGirishUnde]

@@mrbenburns I'm Ready to burn my bandwidth 😄

[@zonaefly]

I want to see it all! This was really cool and I'm going to use this method as I go forward in creating more design systems.

[@JH-br4iv]

Great video, presented well and super high-yield

[@thefutur]

Thank you kindly!

[@KRAKOOM]

Sooooo...when does the “Learn Atomic Design” course drop? I know y’all got that simmering on the back burner. I’d love to have a “The Futur” style step by step course teaching me a repeatable system/flow that I can follow, (and teach to others I may be directing) to get a predictable and actionable Atomic Design System over and over again. That would be 🔥

[@stephanlenting]

I’m interested to learn more details about the process and the way it saves time. Often times my issue with these systems and tools is a lack of creative freedom. I often use graphic elements in the background of a site and i might reposition them on certain pages. I’d love to know how this can be achieved with the Atomic Design process and Framer

[@rasmusandersson4020]

Thank you, great video. Good structure and I would love to see more UI design. Design system crit sounds interesting!

[@IsmailElazizi]

WOW That is definitely helpful I would like to watch more about that, Thanks Ben!