Atomic Design - How To Make Web and UI Design Easier

have you ever set out on a website or interface design project and wind up buried under hundreds of screens or do your website prototypes just grow out of control and overwhelm your clients this is how you solve those problems this episode is sponsored by framer X and today we are talking about design systems specifically atomic design 101 in the past few years we have seen tremendous improvement in screen and interface design tools designing for screens has never been easier but because it's so easy now we've seen our prototypes grow to be extremely unwieldy we're talking like 50 100 150 pages that are designed usually by multiple designers sometimes across different countries and time zones this means we spend a lot of time establishing standards and quality checking everybody's work and this significantly drains the creative directors and art directors times so we started using things like page templates and UI style guides which I mean those things helped but it wasn't the easiest to actually translate those things into design or maintain consistency but last year I found out about the concept of design systems now design systems are just series of components that can be reused in different combinations basically it's building blocks now this made a lot of sense because our designers were using the same basic elements over and over and over again for the same project but this whole concept about design systems didn't immediately click until I stumbled upon Brad Frost's TED talk about his concept atomic design could not believe this listen today I want to share the basics of building an atomic design system for a project so here's what we're gonna cover part one is all about the atomic structure part two is how we start an atomic design project in part three is how we collaborate using atomic design libraries so part one let's talk about the atomic design structure like I said before atomic design is a series of visual building blocks that start out really basic and become more complex as you move up the food chain these visual building blocks are organized by complexity into different buckets and the buckets are atoms molecules organisms templates and pages let's talk about atoms first now atoms are our most basic building blocks these are things like colors and heading typography and body text but there are also things like buttons and form labels in form inputs so for those of you who don't speak the web design language yet form labels it's just the title of the form field that gives you instructions on what to put inside that field so if it's something for your name it'll say name that's a form label here's a note about atoms so usually UI style guides stop here and the gap between these small atoms like buttons and form labels all the way to fully fleshed out page designs this is the gap that we were struggling to bridge when we operated with just style guides alone alright let's get into molecules molecules are groups of atoms that work together to form a functional unit that performs a specific action or represents a purpose these are things like a contact form a team member listing or an individual course card so we're continuing to move up the food chain and we're now at organisms organisms are groups of molecules that are organized by importance type or purpose think of these as pieces and parts of the overall page these include features like course listings the entire website footer and the related blog post section at the a blog post and at the top of the food chain we have templates and pages now this is pretty self-explanatory but pages and templates give structure to multiple organisms in the end we typically make high fidelity page templates that are filled with either placeholder or actual content for our clients common templates that we design are things like home page templates blog post templates product pages the login or register page and the contact page so guys that is the basics of how an atomic design library is structured you've got atoms molecules organisms templates and pages now let's talk about how we start an atomic design process atomic design is not meant to be linear this means we don't expect you to start creating atoms right away I mean how dreadfully boring would that be forcing yourself to pick colors and pick button stylings before you ever get into that page design flow making button after button after button no instead we start by designing a page or two or three and then we do variations of pages sometimes we'll explore 10 to 20 ways to design something as simple as a home page or a product page and we do this before we even start thinking about our atomic design system now once we're finished with the page design and we're happy with the way that it looks then we start looking for patterns things like what do the buttons look like what did the SUBSCRIBE forms look like molecule what does the site header look like organism and we already kind of designed the page pages so after we identify these patterns we start extracting the individual elements we standardize them and then we start adding each element to its own library as a reusable component what's even better than that protip is to build each component using smaller components now if you're using a modern screen design tool like framer X you can link these reusable components together in one four ways now I don't have time to get into a detailed tutorial here but here's an example so I just designed this course list page in frame or X then I pulled a button some heading text and some body text into our Adams library super easy using that as a reusable component we can recreate the entire organism of the block of courses now finally now that we have this reusable component we can replace the organism in the original design version here's where the magic happens so let's say we want to change the layout on every single instance of our course card now before implementing atomic design some poor intern would have to go through every single one and edit each version no more we'll just navigate to our atoms and molecules change things up and then head back to our original page design as you can see every single instance has been updated but honestly guys the real magic in atomic design is the way that we can collaborate with each other on a single project so this is part 3 collaboration because we continually update our libraries with the newest variations of all these reusable components any changes that we make are reflected in everyone else's work and not only that we can onboard a new designer really quickly onto a project since the library has already been established they basically have an entire palette to paint from so framer X has made this process really easy with their new feature called the private team store it gives you the exact control that you need over your components while allowing your team the flexibility to edit the specific instances of those atoms molecules and organisms you can also cheat a little bit you can actually shop for other people's components in their public store super useful for things like icons interactive components and UI kits that you can pull into your projects guys this is such a deep well I have so much more than I want to talk about with design systems but here's what we covered too we talked about the atomic design structure we talked about how we start atomic design projects and how we use atomic design libraries to collaborate now if you're interested in learning more definitely check out Brad frost manifesto that link is below but I have a question for you do you guys want to know more about design systems and atomic design let me know in the comments section below so here's a few ideas that I had we can do a video about a deeper dive into the atomic structure and I can show you an actual project in use we could also talk about getting client approval on the design system instead of a prototype I could tell you how to sell an atomic design project and I could also critique your design systems and I also love to interview some product designers who do this on a regular basis so let me know what you want to see in the comments section below special thanks to framer X for sponsoring this video framer X brings the power of interactive design to everyone you can wireframe design screens create seamless page transitions and add powerful interactions all of the same canvas there's also an in-app store where you can find components for practically anything from buttons and icons to media players and UI kits just download and drag anything onto your screen it all works out of the box it's a great design tool for both client projects and product teams you guys should definitely give framer X a try it's free for the first two weeks and then afterwards it's as little as 12 dollars a month thank you so much for watching you guys as always I want you to go out there and crush it you got this like subscribe we love you good bye

Channel: The Futur

Views: 129,064

Keywords: the futur, business of design, how to, atomic design, atomic design system, design system, responsive design, web design, ui design, brad frost, ux design, make ui design easier, make web design easier, atomic design tutorial, atomic design react, what is atomic design, atomic design examples, atomic design methodology, atomic design principles, atomic design css, ui designer, visual design, design systems, ui design principles, design system tutorial, framer x, framer

Id: W3A33dmp17E

Length: 10min 4sec (604 seconds)

Published: Tue Jan 08 2019