The Last Phase of the UX Process: Visual Design & Handoff

⭐️ Key takeaways

In this phase, you make your designs pixel perfect by finalizing typography, color, shadows, layout, iconography, illustrations, and UX writing. You’ll also ensure that your designs are visually accessible.

Once your designs are finalized, then you’ll start handing off your designs to developers. That’s it! It’s pretty simple.

If you’re currently not comfortable with designing high-fidelity UI, then here’s what we recommend:

Get comfortable with the 8-point grid system. It will change the way you look at designing.
Go to your favorite websites and apps that you believe are the most beautiful and have the best user experience. Take screenshots of multiple screens on each site/app and paste those into Figma. From there, use the screenshots like templates or stencils. Try to recreate the screens exactly in Figma. Notice the spacing between elements and the color choices. Do your best to absorb everything. Then, when you’ve done that enough, try to recreate those same screens without using the screenshots as a stencil. Then keep repeating, over and over and over.

📗 Assignment

💬 Transcript

Hey, what's up Kickass Fam?

In this video, we'll talk about the final stage of the UX process, visual design and handoff. This is the stage of the UX process where your designs truly come to life. And hopefully not like Frankenstein.

In this phase, you make your designs pixel-perfect by finalizing, typography, colors, shadows, layouts, iconography, illustrations, and UX writing.

You'll also ensure that your designs are visually accessible.

And for some projects, if you have the time, and, more importantly, still have questions about your solution, you'll also conduct a final round of usability testing.

Once your designs are finalized, then you will start handing off your designs to developers. That's it, it's pretty simple.

It's almost like baking a cake. If the other three phases of the UX process were gathering the ingredients, mixing, baking, and assembling the cake, then this phase is adding the frosting and other decorations to make it look amazing.

If you're currently not comfortable with designing high fidelity UI, then here is what we recommend.

First, get comfortable with the eight point grid system. It will change the way you look at designing.

Once you're up to speed on the eight point grid system, go to your favorite websites and apps that you believe that are the most beautiful and have the best user experience.

Take screenshots of multiple screens on each site and paste those into Figma.

From there, use the screenshots like templates or stencils. Try to recreate the screens exactly, in Figma. Notice the spacing between the elements and the color choices.

Do your best to absorb everything.

Then when you've done that enough, try to recreate those same screens without choosing the screenshots as a stencil. Then keep repeating over and over and over. Sooner or later, if you keep doing this, you'll be able to design UI like a pro.

Once you confident with UI design, the next thing to master will be design systems. These enable you to create consistent harmonious designs.

All of the companies you can think of rely on design systems to make the digital product look excellent, while also being highly usable.

Creating your own design system will take your design approach to the next level and challenge you to think about your designs as a system.

While it can be slower to set everything up, it'll make your life so much easier in the future, when you're building new designs, or if you want to change anything.

If you ever need to change something in your designs, you will change it in one place and it will update across all your screens. This will save you a ton of time and headaches in the long run.

One last thing, we included a list of resources below this video to help you better understand and learn about this entire phase of the UX process.