Join Emily Kay for an in-depth discussion in this video Reusable UI, part of Photoshop for Web Design.
- [Instructor] My responsive design workflow is influenced by Brad Frost's Thoughts on Atomic Web Design and Jonathon Snooks' Smacss article. You can visit both of these websites, and I suggest that you read through these because they're very interesting in regards to web design. Both guides rely on small, reusable components as the basis for strong web architecture. Now how this information is presented, it refers more to the dev side of things, but I find it really helpful to think about it on the design side as well.
Not only can it help your designs translate well into a live website, it'll also benefit your workflow considerably. Once you wrap your head around the concept, it really makes sense. And with the help of libraries and smart objects you can easily amass your own collection of commonly used UI elements. So the premise of Atomic design is that you have five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of Atomic design are atoms, molecules, organisms, templates, and pages.
Here we're going to be focusing on the reusable UI. These are the atoms and molecules of our web design process. Any element that you find yourself needing to use multiple times throughout the design process is a candidate for a reusable UI element. We've already been using these items. Here we're just identifying them and thinking about how most projects will utilize reusable components. It's really helpful to start with a library of commonly used assets to increase the speed of your design and comp process.
I've made a reusable UI library, and this is something that I can use on any project. Not just this one. As you can see, as I scroll through my library, I have individual elements, and sometimes a collection of elements. These are items I might be using on various web pages or I've found myself using more than once. Any sort of responsive element, like hamburger menu items, separate components that are part of a drop down menu, in addition to form elements, these could all become part of your reusable UI library.
You'll customize this to meet your own needs. Once they're part of your library, anytime you need one of these elements, it's really easy to incorporate it. So if I wanted a form search element, I can just drag it out of the library, I can resize it if necessary, and drop it into my design. This allows me to build forms really quickly and other elements on my page as well. Here's a video reusable UI component that I've used many times in projects. With just one click and drag, I have a video player with all of the little UI buttons that I need in order to incorporate a video into my web comp.
A huge benefit of using the smart objects and library items as your reusable UI components are that you'll keep consistent in your various versions of the web design comp that you're working on. You're also able to reuse these elements and modify and update them easily and quickly. You have the option of creating your own library for reusable UI elements, or Adobe Stock has a bunch of UI kits available as well. If we just search for UI kit, you'll see that the search results are going to be populated with all sorts of UI kits that are available for you to use to streamline your workflow.
If you find one that you like, just drag it into your document, and you can see the various elements. Most of these are vector based files, so if you purchase them from Adobe, you'll have the ability to be able to pull them apart, and use the individual components within your designs.
- Setting up workspaces and artboards
- Using libraries
- Responsive design tips and tricks
- Setting breakpoints
- Creating navigation elements
- Creating textures and backgrounds
- Embedding or linking smart objects
- Making custom templates
- Creating reusable UI elements
- Saving and exporting for the web
- Using Generator