When you’re starting a web design project from scratch there’s a lot of things you need to consider. Whether it’s wireframing to visual design it’s helpful to have some UI design tools in your arsenal to help your process along and give you some places to start.

Over the last couple of years, I’ve compiled a few tools to help me along the way. I’m not talking software like Balsamiq, Marvel, or Sketch but instead little utility websites that help things along a little. Websites that are the equivalent of a little menu bar app on macOS that generally do one thing and do it very well. The key to success is to use them as a starting point and a base to begin.

Tools for Typography

First up is a site I find really useful when I’m working on a site from scratch, especially if there is no existing style guide from the client’s printed items. Setting some initially typography rules as a starting point when I’m working on a visual design is really helpful. I often end up tweaking them as the design develops to better suit the needs of the site, but having a sensible starting point is really helpful.

For this, I use a site called Type Scale which helps to establish a basic hierarchy for your headings and body. If you happen to be using a Google Font in your design, Type Scale integrates with their API allowing you to select your font from their vast library. However, even if you’re using a non-Google Font it’s still a helpful resource and starting point.

Utilities to help with Colour

The next up in my UI designers tools list helps to develop colour pallets. Colour is fundamental in design and in crafting effective UI’s, and establishing a colour pallet is one of my favourite parts of a project. To help me establish a starting point I often make use of either Adobe Color or Coolors.co.

My first step in establishing a colour pallet usually involves picking a key accent colour and then establishing some complementary colours to surround it. Of course, if you’re working to a brand guideline or an established pallet this is less crucial, but I still find these tools useful in keeping supplementary colours within the right tonal range.

Tools for inspiration

Of course, there are some classic tools for finding inspiration online. I often find myself on Dribbble seeking out some different styles of design that might trigger an idea, it’s probably no surprise to see it linked here.

The best tool I find for finding inspiration isn’t digital. I find the most effective tools for inspiration are two things everyone is born with. Feet. I often find a good walk is the most effective way to get through a creative block. Walking along and letting my mind occupy itself with something completely unrelated to the project I’m working on helps to mull over some ideas.

The next best tool for breaking through some creative block? My notebook, pen, and a cup of coffee. They can never be beaten.