Ten useful website design tools

By Alex Aperios, Digital Designer, MobasIgnite

With the daily struggle of trying to stand out above others as this industry becomes ever more flooded with new designers seeking creativity from just looking at online tutorials rather than going to university (like myself!), you’ll also find it increasingly difficult to create something that has not already been done.

The tools below are what I personally find helpful – and hopefully you will too. They get me through the most mundane projects and even through those days when you struggle to even think of something creative.

Starting with a plan and some sort of structure will help create a smooth process from start to finish and the links I will list are some of the places I go that allow me to get the outcome I wanted from the start.

AWWWARDS

This is a great website for some quick inspiration to what is relevant as it holds a large collection of websites being put forward for the website awwwards. Here they are reviewed and can potentially win awards for innovation.

This is where I like to get the so creative juices flowing, an area in which I can struggle from time to time. The site can help give you a little push as to what sort of template you can relate your current brief to and often will give you an idea of what you don’t want to do.

The Best Designs

This is yet another great website to help give you a guide of what is relevant. As it’s updated on a regular basis, unlike a lot of blogs, you’ll know that what you’re seeing is fresh.

If the above is not substantial enough there’s also a great Google Chrome extension, which combines the top design award websites with the most recent and most relevant blogs.

Muzli

With the simple installation of Muzli from your Chrome browser you’ll get a nifty dashboard with a list of quality blogs and well known web design websites which can be completely customised to your requirements.


After the planning, and armed with some sort of idea and inspiration, the next thing on my list is to get something started rather than just looking at a blank screen killing any momentum you might have had. Chucking something on paper or screen will help avoid mind block.

I like to start by creating a grid in Photoshop once I have a template in mind – not obligatory but it’s how I like to start my projects.

Guideguide

If like me you like to start in Photoshop rather than on paper then guideguide is a powerful tool for setting up guides which can be completely customised to your needs.

It creates your guides for you so all you have to do is think about what distance in pixels you want your grid. You’ll need to decide the width of your columns and rows but after you’ve done this with a click of a button it’s created!

Guideguide is well worth checking out if you are fed up with having to stick to the same old grid layout downloaded from random blogs. Try it and thank me later!

UX PIN

This is online software which I was recently made aware of from an online blog.

It allows you to create wire framing or even website design online, its main benefit being that you can create button and hover states and showcase these live in front of the client at a meeting.

This can overcome the question that clients and developers always ask regarding what you imagined the button styles to look like, as you can set these up as if you were actually using the website in real time. I still like to use Photoshop for the more detailed aspects of my brief but if a client is looking specifically for details of how the page might animate, this will give you that depth of design you’re looking for without having to use GIFs.

Codrops

A colleague recently introduced me to Codrops and I’m glad he did because this site contains some of the nicest and most innovative effects for hovers and scrolls I’ve seen.

Looking at what people are creating on here will give you an idea of what type of effects you can use that will be suitable for the brief which you’re working on and this site does that well.

So if you’re looking to add an extra personal touch to a project then Codrops is perfect.

Unsplash

If you’re struggling to fill your site with imagery this site is perfect. Unsplash is a free stock website set up specifically to help people who may not be able to get hold of high-res imagery for a website without paying ridiculous amounts of money.

It’s an infinite scroll of beautiful imagery on pretty much every theme needed. They are all royalty- free and very useful if you need to fill your site with high-res images without spending a penny.

It’s clean and easy to use which makes navigation pain-free.

Pixeden

Sometimes when designing a site you may have a client that needs a custom banner or wants to showcase some work in a portfolio-type manner. That’s where Pixeden is your best friend! This site contains some lovely blank PSD templates for free and which you can download and place your websites into or even the client’s work – and with a click of a button you’ll have a high-res image showcasing the client’s work in which you can crop into a banner or even some content imagery.

Some of the imagery may need some royalties or just a mention on Twitter but if you can give a little to receive a lot then why not!

Pinterest

This is probably the most obvious of the lot but is easily one of the better sites. If you’re unfamiliar with Pinterest, then get yourself signed up and start using it as this is a site widely used by us designers every day. I have lost count of the times this site has helped me get out of that mind block.

The power of this site still surprises me and is always up-to-date on upcoming web design trends.

You can specifically search for what you want using key words in a search bar, which then breaks down what you’re looking for. This will also give you the opportunity to customise your search.

So for the inspiration you were looking for, this is easily one of the best websites available.

Dribble

Dribble is a useful tool if you’re seeking that little bit of extra inspiration for web layouts, graphical styles or even colours.

It hosts some of the most talented designers I have seen for a while and you can even comment and sign up to a community in which you can post and share ideas. If you feel brave enough you can ask for others to comment on your work which can benefit you if you’re a little stuck on where you’d like your design work to go.

And finally…

Icon Finder

This is a great tool for some inspiration of icon styles that you are looking to use. Even if you don’t have the time to create something of your own, it’s really handy as you can download as many as you like with just a click of a button – perfect for that quick job that you want to turn around in a tight deadline.

As part of Mobas Group, we can offer you more than just outstanding digital services. Find out what our PR and Content team, Brand Strategy division or Creative Design team could do for you.

Want to get in touch?

Thank you for your enquiry

Or alternatively call us on 01223 841699