Even when you think you're almost done designing the UI side of the product, there are still a few more steps that you should keep in mind. You may want to create and test a clickable prototype, clean up and organize your files, and create a spec sheet to share with developers. All of these steps can help foster communication between teams.
Create a clickable prototype and conduct usability testing
Even if the UI design of the product you're working on isn't final, it's never too early to start testing products on users (there's an entire course on the topic). Usability testing can help uncover issues in the user flow, calls to action with buttons that aren't obvious to users, or badges that look clickable to users that are not. Observing someone use your product will help uncover issues you likely never would have considered.
You can test products using clickable prototypes where no code is involved yet. Of course, every button won't necessarily work in the mockup of your design, but you still can learn a lot from testing your prototype. AdobeXD, Marvel App, and InVision all allow this to happen easily. You can even share links to prototypes which makes remote testing possible too, which can save you time, and help get some first impressions and early feedback easily.
Screen from Sketch's documentation showing the ways screens are connected to make clickable hotspots in a prototype. Viewing an app in this format resembles a wireflow where you see how screens are connected.
Prepare your files
When you're busy working you may find your focus is more on getting the work done and less on keeping your files tidy. It doesn't take long for files to get a bit messy. Organized files are particularly useful if you're sharing them and collaborating with others.
Here is a checklist of things to consider before handing off any files:
The file is clearly named or follows any conventions so it is easy to find later.
Layers are labeled
Excess elements or ideas you may have tried but decided not to use are deleted (you can always save a separate file if you want to keep them just in case)
Organize images and SVG files for developers. Name each clearly.
Create a spec sheet
Spec sheets simple style guides for others on the project to reference. They aren't something you'll find everywhere you work, but it's good to know they exist should you ever need to make one. Often they're more common in large corporations, and sometimes are useful for freelancers to create as well.
Spec sheets can be a PDF document and don't need to be interactive. They should include clearly identified elements with annotations:
Grids
Margins
Padding
Fonts (names, size, treatments)
Colors (#HEX code)
State changes
Key components
These elements are similar to what we've seen in some of the examples from the design systems throughout this course. Essentially you are annotating and marking up the design elements so everything is clear and in one place, which can make it easier for the developer(s) to understand how to approach the project. Because all of the information (i.e. padding) is on this document, they don't have to go back digging through the document to figure out how many pixels to code.
Section of a sample spec sheet by Tiya Tiyasirichokchai on Dribbble. UI specs are a way to set the visual standard of a project.
UI specs aren't very different than style guides. While these documents aren't always required, they can be useful visual reference documents and interesting tools for presenting information.
A final note on collaboration
Every step of UX, UI, and product design is collaborative, and communication with all team members is crucial to success. (We talk more about this in the course Manage Creative Projects.). The more you work with developers and product managers the better you'll understand each other's working styles and what exactly you need from them, and what they need from you.
Even after you pass along your [insert favorite software] files, links to prototypes (likely InVision), documentation (possibly in JIRA), and wireframes (the annotations can be a helpful reference) to the tech team, your job still is not done. It's very likely the developer on the project will have questions for you. You can learn from every interaction and encounter and apply any learnings to future projects. Nobody is perfect, and every project is different and will bring its own challenges. Tech moves fast, so it's most important to have a collaborative spirit where everyone can learn and grow.
Let's Recap!
It's a good idea to test your design before it gets coded.
Organize and label your files to minimize confusion with collaborators.
UI spec sheets can be helpful documentation to create to ensure everything is coded to your specifications.
Collaboration is key to the success of any project so be sure to keep open communication.
