Atomic Design - How To Make Web and UI Design Easier
Рет қаралды 131,758
Күн бұрын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.
@mrbenburns 5 жыл бұрын
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 5 жыл бұрын
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 5 жыл бұрын
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 5 жыл бұрын
@@TheLopezjohn Shoot me a DM on Instagram :)
@Tman634 5 жыл бұрын
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 5 жыл бұрын
If you think about it. It's like CSS for design. (Mind Blown)
@SugamAnand 5 жыл бұрын
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 5 жыл бұрын
Sugam Anand it’s a game changer for sure
@SugamAnand 5 жыл бұрын
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 5 жыл бұрын
I have seen this method for coding and also shown in compression algorithm to keep tracks of various strings of data
@Cubannerd 5 жыл бұрын
@@mrbenburns Invision has a very comprehensive handbook dedicated to design systems. I highly recommend it. designbetter.co/design-systems-handbook
@clarasofiafrancamandujano8812 5 жыл бұрын
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 5 жыл бұрын
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 5 жыл бұрын
ARM Cezar that’d be cool
@AnthonyRosas 5 жыл бұрын
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/
@xuefeng77 5 жыл бұрын
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.
@ruslanuchan8880 5 жыл бұрын
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 5 жыл бұрын
Ruslan Uchan yep - there is a lot to learn from engineers
@DarrenbyDesign 5 жыл бұрын
Usually designers and engineers are working together to create the design system so that makes sense
@anissat-tech 5 жыл бұрын
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 5 жыл бұрын
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 5 жыл бұрын
Thats exactly why atomic design is awesome. It helps a lot both sides if you're using components while developing
@bros_jaey 5 жыл бұрын
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.
@sahilshahzad2318 5 жыл бұрын
Yes! More about design structures and systems and how it relates to design thinking.
@Steveoliverdesign 5 жыл бұрын
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!
@dele-586 5 жыл бұрын
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.✌🏾
@Runitsyourmamarun 5 жыл бұрын
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.
@ryomac5267 5 жыл бұрын
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!
@nobledigital 5 жыл бұрын
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.
@tamarazaric7087 5 жыл бұрын
YAASSS been looking for this, thank you a thousand times! Would greatly appreciate more of the similar content on this channel in the futur!
@masonthompson3284 5 жыл бұрын
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 5 жыл бұрын
Mason Thompson thanks Mason!
@djlilcq 5 жыл бұрын
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.
@ConorTimmonsDesigns 5 жыл бұрын
BEN! All of your content is AMAZING! I want all your video ideas! I’ll watch every second. ❤️
@HotelSeptember 5 жыл бұрын
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.
@AD-um9kc 5 жыл бұрын
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. :)
@benardoneka8927 2 жыл бұрын
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.
@emmanueladigwe6901 5 жыл бұрын
Deeper dive into Atomic Design. Please do more Atomic Design content. I love this, Ben
@annettekempers6213 5 жыл бұрын
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!
@DarrenbyDesign 5 жыл бұрын
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
@nimtim 5 жыл бұрын
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
@diongeraldo3348 5 жыл бұрын
Finally some legit stuff that i really need about design system. Well done MrBenBurns & The Futur Team!!
@fryrichard 5 жыл бұрын
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
@angelvelazquez1792 5 жыл бұрын
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 5 жыл бұрын
Angel Velazquez thanks Angel!
@ThisDesignLife 5 жыл бұрын
Really useful thanks Ben. Great to see where you create these vidoes in person as well.
@danielDefoe81 5 жыл бұрын
Man, you should definitely make a long version of that super interesting topic.....you got me
@DanielSoto101 3 жыл бұрын
I’d love to see more on this, especially a deeper dive into atomic design.
@jackbentner3881 5 жыл бұрын
Yes more of this! Amazing amount of help!
@willgelder6191 5 жыл бұрын
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!
@kevinquiec 5 жыл бұрын
Great video Ben! And really valuable; I am planning to implement soon a design system. Will really love to see more!
@axlpascual 5 жыл бұрын
Exactly what i needed. Hope to see more of this! Thanks guys
@Ralphunreal 5 жыл бұрын
I definitely want to learn more on design systems. How to design one in particular.
@filipfelbar2001 5 жыл бұрын
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!
@zuzahicks2913 5 жыл бұрын
Thank you for this video! The timing is ideal. I would love to learn more about atomic design and its best practices.
@BrianTerryBranding 5 жыл бұрын
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.
@antoniostojceski944 5 жыл бұрын
Great video Ben, I would love to see deeper dive into atomic design and design system. Thanks for sharing those tips.
@theeriksoper 5 жыл бұрын
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.
@Ralphunreal 5 жыл бұрын
A deeper dive into atomic design would be nice to see.
@arisaputra-fd7lv 5 жыл бұрын
Love this video! Please make a video to show the process how you design a website and explaination about design structures.
@zonaefly 5 жыл бұрын
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.
@oncle_loutre 5 жыл бұрын
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 ;-)
@alterheaven2473 5 жыл бұрын
Awesome! More of design systems topics please.
@colorofboom382 4 жыл бұрын
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!
@nikhilverma1396 5 жыл бұрын
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!
@jeroendielis4082 5 жыл бұрын
Awesome video, I definitely want to see a video about a deep dive into atomic design system...keep up the great work 👍
@CaptainLenK 5 жыл бұрын
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
@Daniel-Condurachi 5 жыл бұрын
2 and 3 of your ideas are the most interesting ones to me
@bfauzi339 5 жыл бұрын
For sure number 2, Mr Ben🔥🔥🔥🔥🔥 Thank you, Really appreciate it
@wazulbuth 5 жыл бұрын
Keep on with this. I would definitely want to see more.
@VEE727 5 жыл бұрын
I've been designing this way without knowing about the atomic structure. This is gold
@nb08 5 жыл бұрын
Binge watching all the recent futur videos and it's still valuable
@kevinnunezdesign 5 жыл бұрын
Fantastic Video! Very insightful. Definitely going to keep this in mind when working on my next project.
@YuriRadavchuk 5 жыл бұрын
Love Atomic bottom-up thinking mindset. Combined with a strategy framework you can do almost Anything.
@mrbenburns 5 жыл бұрын
Yuri Radavchuk A G R E E
@RaigoLilleberg 5 жыл бұрын
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 5 жыл бұрын
Raigo Lilleberg 🙏🙏😎
@aleksejsskurjats6394 5 жыл бұрын
That's awesome guys ! Want to learn more about atomic design and design structures. Thanks for sharing the knowledge
@ndahuraisaac486 5 жыл бұрын
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
@chriswilcox8977 5 жыл бұрын
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 😎
@wise_nut 5 жыл бұрын
I'd like to seeee all of them from the list Ben!!!!!! Thanks!!!!!!!!!!!!! I'm a big fan!!!!!!!
@josefacanha5387 5 жыл бұрын
Great video and concept. I'd love to know more about Atomic Design and its various implementations!
@noman.digital 4 жыл бұрын
Good One. I would love to see a full course on this topic.
@rashiagrawal5936 5 жыл бұрын
I would like to know more Atomic Structure. Thanks for this Ben!
@danielvanginkel7081 5 жыл бұрын
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.
@stanpo_design 5 жыл бұрын
Awesome. Really simple and logical. I would like to hear about 2nd and 3rd points of your list. Thanks
@fritz-creates 5 жыл бұрын
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! :)
@alinechaussade6087 5 жыл бұрын
Amaziiiiiiing! More please, 1, 2, 3, 4 and 5!
@emaloc1 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!
@IsmailElazizi 5 жыл бұрын
WOW That is definitely helpful I would like to watch more about that, Thanks Ben!
@faisalgolonggom9348 5 жыл бұрын
Great content! I hope you can create for full detail of Atomic Design because I'm very interesting to learn about UI/UX.. Thanks!
@muhammadrazaalikhan6988 5 жыл бұрын
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.
@sarahippolito1028 2 жыл бұрын
Thank you for this really clear and well explained video!
@rasmusandersson4020 5 жыл бұрын
Thank you, great video. Good structure and I would love to see more UI design. Design system crit sounds interesting!
@teooreo Жыл бұрын
thank you, Ben! Awesome web master teacher!
@davidmartinez5459 5 жыл бұрын
Nicely done Ben!
@cesarv.6365 5 жыл бұрын
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!
@nathanielladouceur7022 5 жыл бұрын
DEFINITELY want to hear more about atomic design!
@pedroandrade3725 5 жыл бұрын
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
@hristina449 Жыл бұрын
Love the approach. Would love to buy a course with this framework
@C2theCity 5 жыл бұрын
Would like to see more about each topic. Starting with the first topic.
@taramason4943 5 жыл бұрын
YES MORE ON DESIGN SYSTEMS! And anything else web-related!! All of it.
@NguyenNguyen-dq1yh 2 жыл бұрын
Yes, I wanna know more about Design System. Thank you!
@mariocvetkovski168 5 жыл бұрын
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.
@BentoBox 5 жыл бұрын
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 5 жыл бұрын
Gate Nk 100% agree
@winakuo6576 4 жыл бұрын
This video is awesome, thanks for sharing!
@EnglishWithDidi_ 2 жыл бұрын
What a nice way to put this concept!
@LuchoRosa 5 жыл бұрын
I would love to see more on this topic!
@sbowmetal7540 5 жыл бұрын
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
@PriscillaBijuThen 5 жыл бұрын
Why choose? Why not do ALL 5 topics over the course of several weeks? Love your videos, so dynamic & engaging, thank you!
@RoshenCarman 5 жыл бұрын
Yes please, to anything that will teach me more about design. Thanks for this!
@MrVanKappen 5 жыл бұрын
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.
@css2014 2 жыл бұрын
Great video and explanation. Keep going !
@zuzahicks2913 5 жыл бұрын
Where do you “store” the design system? I’m looking at Frontfy but I’m wondering if there’s a better option out there. Thanks again for this great video!
@davidrivers3120 5 жыл бұрын
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.
@Beni11188 5 жыл бұрын
That is huge! Thanks for sharing
@stephanlenting 5 жыл бұрын
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
@Lissemt 5 жыл бұрын
I’m finishing my portfolio website this is very helpfull
@abirahmed1292 5 жыл бұрын
Yes, please make detail video on atomic design and design system.
@Cubannerd 5 жыл бұрын
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 4 жыл бұрын
Very true
awwwards.
Рет қаралды 64 М.