Starting on a new User Interface design project can be daunting. You just received a hundred pages worth of specifications which may include project, creative design and build briefs; draft wireframes and app flow ideas; deliverables requirements; examples of existing products; and brand guidelines that you have to navigate around.

So where do you start?

(Updated Sep 2022)

Getting the Budget Right

Even getting to this point can take hours of your time—speaking to the client, researching, and waiting for all the necessary puzzle pieces to fall into place—before you have everything you need to evaluate the project and submit an accurate quote.

First, how do you know how much and how to charge for something so comprehensive and vast as a big user interface design and style guide production project?

An hourly rate approach works well here. Some clients are happy to pay for the amount of time you spend, but generally they want an overall quote before giving the green light.

My approach: once I have all I need, I go through everything one item at a time considering how much time I would need in the best and worst case scenarios. Don’t forget to include money transfer and currency conversion fees if applicable.

Adding everything up provides a required budget range to discuss with the client. If the client is happy with your work as it progresses and feedback is minimal, you’ll be working towards a lower number, or vice versa.

You also need to consider deadlines and availability, and create a payment plan. I tend to split the project payment plan into four phases:

Research, ideas, and sketching
Wireframes and workflows design
UI/UX design and polish
UI guide document design

You’ve Got the Go Ahead

You’ve secured a great contract. Now you’re sitting in front of a blank page… where do you start?

Plan Ahead

Putting together a simple contents page including all the agreed design items creates a visual reference for where you are and what still needs doing. This breaks a comprehensive document into manageable parts for your client and developers. It will be revised many times as you progress, but at least you have clear milestones to approach and achieve one at a time.

Start With the Basics

Setting up a grid and sticking with it helps maintain visual consistency across all UI elements. The key factor is that it needs to be versatile and scalable. Otherwise, you might have to revise it at the end of the project, which will require updating the UI slightly. It also needs to work within all the carefully considered constraints of the project.

Same goes for the typography baseline grid.

Putting together an initial colour palette based on the design brief can speed the process up dramatically. It usually contains more colours than needed, about 10–15 shades of blues or greys, to ensure enough contrast for the user interface.

Continue With the Essentials

By this point you should have enough to feel like you’re in your groove and everything flows nicely. Go through your plan one point at a time, creating elements and revising as you go until you and your client are happy.

Test, Update, and Revise

Once all elements and necessary screens are in place, it is important to ensure the intended user flow and experience work. This means testing and revising extensively.

Read my other article, Sketch & InVision Apps Workflow Tips for the UI/UX Design Process (coming soon!), on accelerating this final stage using Sketch and InVision apps.

At the end of the UI design phase, when putting together the UI guide document, I revise the colour palette and necessary UI elements to ensure the minimal possible number of colours and styles, which may require a slight revision of visuals.

Conclusion

By the end of the project, the user interface design should not only solve the client’s problem within the constraints of the brief but also be:

Clear
Concise
Familiar
Consistent
Attractive
Efficient

Please feel free to leave comments or questions below.

Screenshots used are from the recent TeamDesk UI design project, which you can check out in full on Behance. A 2022 UI refresh is now being developed.

2022 Update

Eight years later our team designed a second version of the TeamDesk UI web application. A full case study will be available soon. This project was completed as part of the Studio SS partnership.