Atomic Design - How To Make Web and UI Design Easier
ฝัง
- เผยแพร่เมื่อ 17 มิ.ย. 2024
- 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:
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:
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: 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:
goo.gl/bRt5qd
-
Love the content? Become a sustaining member for $5/mo today.
goo.gl/nwekfL
BOOKLIST -
Essential Reading for Creative Professionals: bit.ly/biz-booklist
Essential Design Books: bit.ly/futur-design-books
Kits & Proposals:
goo.gl/mSjuWQ
Visit our website:
www.thefutur.com
FREE resources:
goo.gl/Qh6gHr
Mandarin (Chinese) Subtitles on UiiUii
uiiiuiii.com/?s=the+futur
-
AFFILIATE LINKS*
🙏 Support The Futur by purchasing through our affiliate links:
Amazon: bit.ly/thefuturishere
Webflow: bit.ly/2EbET9l
Retro Supply Co.: bit.ly/2GW8gzR
Creative Market: goo.gl/g4jlTE
Design Cuts: bit.ly/2GSsAR3
✍️ Sharpen your skills by taking a course, using our affiliate links:
Skillshare: goo.gl/YCo2uT
School of Motion: bit.ly/futur-som
Bring Your Own Laptop Tutorials: byol.me/thefutur
🎧 Do you like the music? Check out the music libraries we use in our affiliate links below:
Epidemic Sound: share.epidemicsound.com/thefutur
Musicbed: bit.ly/futurmb
Artlist: bit.ly/2uWdna7
Get our FAVORITE notebook from Baron Fig: baronfig.com/?ref=zQoKL
-
Futur Podcast on iTunes: 🎙
itunes.apple.com/us/podcast/t...
-
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 www.adamsanborne.com
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.
![[TH] VCT Pacific Stage 2 - Week 1 Day 2 // GEN vs T1 | PRX vs TLN](http://i.ytimg.com/vi/ZkFjjJNwzH0/mqdefault.jpg)
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!
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.
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! :)
@@TheLopezjohn Shoot me a DM on Instagram :)
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.
If you think about it. It's like CSS for design. (Mind Blown)
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!
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.
Sugam Anand it’s a game changer for sure
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.
I have seen this method for coding and also shown in compression algorithm to keep tracks of various strings of data
@@mrbenburns Invision has a very comprehensive handbook dedicated to design systems. I highly recommend it.
designbetter.co/design-systems-handbook
Yes! More about design structures and systems and how it relates to design thinking.
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.
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.
ARM Cezar that’d be cool
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/
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.
YAASSS been looking for this, thank you a thousand times! Would greatly appreciate more of the similar content on this channel in the futur!
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!
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.✌🏾
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!
Mason Thompson thanks Mason!
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!
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.
Deeper dive into Atomic Design. Please do more Atomic Design content. I love this, Ben
BEN! All of your content is AMAZING! I want all your video ideas! I’ll watch every second. ❤️
Yes more of this! Amazing amount of help!
Finally some legit stuff that i really need about design system. Well done MrBenBurns & The Futur Team!!
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. :)
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.
Really useful thanks Ben. Great to see where you create these vidoes in person as well.
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!
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.
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
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
BOOM! Atomic Design. This is the topics I enjoy and I really encourage you cover more items related to web design/development. Gracias Ben.
Angel Velazquez thanks Angel!
Exactly what i needed. Hope to see more of this! Thanks guys
Man, you should definitely make a long version of that super interesting topic.....you got me
I’d love to see more on this, especially a deeper dive into atomic design.
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.
Great video Ben! And really valuable; I am planning to implement soon a design system. Will really love to see more!
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
Awesome! More of design systems topics please.
Keep on with this. I would definitely want to see more.
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!
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!
Thank you for this video! The timing is ideal. I would love to learn more about atomic design and its best practices.
Great video Ben, I would love to see deeper dive into atomic design and design system. Thanks for sharing those tips.
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.
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.
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.
Ruslan Uchan yep - there is a lot to learn from engineers
Usually designers and engineers are working together to create the design system so that makes sense
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... :/
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.
Thats exactly why atomic design is awesome. It helps a lot both sides if you're using components while developing
2 and 3 of your ideas are the most interesting ones to me
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!
Awesome video, I definitely want to see a video about a deep dive into atomic design system...keep up the great work 👍
That's awesome guys !
Want to learn more about atomic design and design structures.
Thanks for sharing the knowledge
Fantastic Video! Very insightful. Definitely going to keep this in mind when working on my next project.
Amaziiiiiiing! More please, 1, 2, 3, 4 and 5!
For sure number 2, Mr Ben🔥🔥🔥🔥🔥
Thank you,
Really appreciate it
WOW That is definitely helpful I would like to watch more about that, Thanks Ben!
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 ;)
Raigo Lilleberg 🙏🙏😎
I definitely want to learn more on design systems. How to design one in particular.
Binge watching all the recent futur videos and it's still valuable
Love this video! Please make a video to show the process how you design a website and explaination about design structures.
thank you, Ben! Awesome web master teacher!
This video is awesome, thanks for sharing!
Great video and concept. I'd love to know more about Atomic Design and its various implementations!
Good One. I would love to see a full course on this topic.
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!
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
I'd like to seeee all of them from the list Ben!!!!!! Thanks!!!!!!!!!!!!! I'm a big fan!!!!!!!
Yes, I wanna know more about Design System. Thank you!
Nicely done Ben!
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.
YES MORE ON DESIGN SYSTEMS! And anything else web-related!! All of it.
I've been designing this way without knowing about the atomic structure. This is gold
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!
Thank you for this really clear and well explained video!
I would like to know more Atomic Structure. Thanks for this Ben!
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
That is huge! Thanks for sharing
What a nice way to put this concept!
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 ;-)
Thank you, great video. Good structure and I would love to see more UI design. Design system crit sounds interesting!
I would love to see more on this topic!
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~
Gate Nk 100% agree
Very Helpful! You explained it very well! Thank you!
Great video and explanation. Keep going !
BOOM! Loved this.
Yes please, to anything that will teach me more about design. Thanks for this!
DEFINITELY want to hear more about atomic design!
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! :)
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 😎
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.
Love the approach. Would love to buy a course with this framework
I'm looking forward to hear more about the subject all the things listed there are very interesting would be awesome to learn that thank you so much
Boom! Love the enthusiasm.
Great! Thanks for the video!
This was awesome, thank you
Great content! I hope you can create for full detail of Atomic Design because I'm very interesting to learn about UI/UX..
Thanks!
Would like to see more about each topic. Starting with the first topic.
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.
Love Atomic bottom-up thinking mindset. Combined with a strategy framework you can do almost Anything.
Yuri Radavchuk A G R E E
Why choose? Why not do ALL 5 topics over the course of several weeks? Love your videos, so dynamic & engaging, thank you!
Awesome. Really simple and logical. I would like to hear about 2nd and 3rd points of your list. Thanks
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.
Definitely I'll love to get this
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.
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
A deeper dive into atomic design would be nice to see.
BOOM! Awesome video.
I’m finishing my portfolio website this is very helpfull