Atomic Design - How To Make Web and UI Design Easier
HTML-код
- Опубликовано: 3 июл 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.
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)
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
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!
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/
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.
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!
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
Yes more of this! Amazing amount of help!
BEN! All of your content is AMAZING! I want all your video ideas! I’ll watch every second. ❤️
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!
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.
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.✌🏾
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
2 and 3 of your ideas are the most interesting ones to me
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!
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!
Finally some legit stuff that i really need about design system. Well done MrBenBurns & The Futur Team!!
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.
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.
Exactly what i needed. Hope to see more of this! Thanks guys
Nicely done Ben!
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.
For sure number 2, Mr Ben🔥🔥🔥🔥🔥
Thank you,
Really appreciate it
Really useful thanks Ben. Great to see where you create these vidoes in person as well.
thank you, Ben! Awesome web master teacher!
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
Awesome! More of design systems topics please.
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 great stuff, mr. Ben Burns! The way you explain is also very structured and compact. I will welcome anything else on Atomic Design!
I’d love to see more on this, especially a deeper dive into atomic design.
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. :)
This video is awesome, thanks for sharing!
Amaziiiiiiing! More please, 1, 2, 3, 4 and 5!
Man, you should definitely make a long version of that super interesting topic.....you got me
What a nice way to put this concept!
Keep on with this. I would definitely want to see more.
That is huge! Thanks for sharing
A deeper dive into atomic design would be nice to see.
Thank you for this really clear and well explained video!
I'd like to seeee all of them from the list Ben!!!!!! Thanks!!!!!!!!!!!!! I'm a big fan!!!!!!!
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
I would love to see more on this topic!
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! And really valuable; I am planning to implement soon a design system. Will really love to see more!
I definitely want to learn more on design systems. How to design one in particular.
This was awesome, thank you
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 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.
Definitely I'll love to get this
Yes, I wanna know more about Design System. Thank you!
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!
Great video Ben, I would love to see deeper dive into atomic design and design system. Thanks for sharing those tips.
Boom! Love the enthusiasm.
Great video and explanation. Keep going !
I’m finishing my portfolio website this is very helpfull
Thanks so so much!
BOOM! Loved this.
Love this video! Please make a video to show the process how you design a website and explaination about design structures.
Fantastic Video! Very insightful. Definitely going to keep this in mind when working on my next project.
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!
Good One. I would love to see a full course on this topic.
Binge watching all the recent futur videos and it's still valuable
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!
I've been designing this way without knowing about the atomic structure. This is gold
Awesome video, I definitely want to see a video about a deep dive into atomic design system...keep up the great work 👍
Great! Thanks for the video!
BOOM! Awesome video.
WOW That is definitely helpful I would like to watch more about that, Thanks Ben!
That's awesome guys !
Want to learn more about atomic design and design structures.
Thanks for sharing the knowledge
Yes. Definitely want more.
Yes please, to anything that will teach me more about design. Thanks for this!
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 and concept. I'd love to know more about Atomic Design and its various implementations!
Love the approach. Would love to buy a course with this framework
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
DEFINITELY want to hear more about atomic design!
YES MORE ON DESIGN SYSTEMS! And anything else web-related!! All of it.
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, please make detail video on atomic design and design system.
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!
Yes man, for sure. Design systems dive in deep!
Love Atomic bottom-up thinking mindset. Combined with a strategy framework you can do almost Anything.
Yuri Radavchuk A G R E E
BOOM! Learned something!
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 ;-)
Awesome. Really simple and logical. I would like to hear about 2nd and 3rd points of your list. Thanks
I wanna see it all!
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!
I would like to know more Atomic Structure. Thanks for this Ben!
Yes, more, please.
Would like to see more about each topic. Starting with the first topic.
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
Thank you, great video. Good structure and I would love to see more UI design. Design system crit sounds interesting!
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 🙏🙏😎
Why choose? Why not do ALL 5 topics over the course of several weeks? Love your videos, so dynamic & engaging, thank you!
Very Helpful! You explained it very well! Thank you!
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.
Great video, presented well and super high-yield
Thank you kindly!