We’ve all been there, where you’ve re read your brief 50 million times, stood away from the screen, gone for a walk-done whatever it is that you can think of to try and achieve that “Eureka” moment! Sometimes no matter what you do its a struggle. Well to help you on your quest in achieving that “Eureka” moment I have put together a web design resource which contains some of my favourite resources when it comes to designing and building websites. Enjoy!


Design Fridge

A great gallery of inspiring websites


Pattern Tap

Another gallery site with the ability to sort by design patterns.


Ui Patterns

As stated on Ui Patterns “User Interface Design patterns are recurring solutions that solve common design problems”.


Colour Lovers

This a great resource when looking for inspiration regarding which colours to use in your up and coming design project.



Sqetch, an Illustrator Wireframe Toolkit

A set of funky wireframe vectors for those web designers who insist on using Adobe Illustrator instead of Adobe Photoshop. I’m not pointing any fingers…  Ian Flynn.


Free Photoshop Wireframe Kit

A set of layered PSD wireframe elements.




You probably already know about Bootstrap, however I don’t think I could have written this post without including it. So here is the most popular front-end framework.




If you have an image of a font and you’re desperate to find out what it is, then this tool does a good job of working it out.


Font Suggester

Do you find it difficult choosing what fonts to use, then why not give Font Suggester a go.

Font suggerster

Font Squirrel

A great library of free fonts that can used for the web.



For those people whose public school Latin is not up to scratch, use this font to emulate content while developing your website.



Font Awesome

Icons are now all the rage, use Font Awesome to extend the range that you already have available in bootstrap. All the icons are scalable and in the examples it shows how you can layer and animate them. Awesome.



Thousands and thousands of free icons in PSD’s, PNG’s and SVG’s, OMG!


Coding Helpers

CSS3 Generator

This tool has been about for years, and recently it has been given a fresh new look. I use it on every build to quickly build CSS3 rules.


Border Radius

Another really useful tool to save you time. Just input your border radius and copy and paste the code into your stylesheet.


Ultimate CSS Gradient Generator

I know gradients aren’t as fashionable as they once were, however this is a create tool for generating the code for  CSS3 gradients.



This is a great resource for those people who don’t have a mind like an encyclopedia. It covers most web based languages and will help refresh your mind on those little bits of code you can never remember how to do.


I hope you find these resources as inspiring as, I and the rest of the Web Team do! If you think we have missed anything off of this list please do share them with us below!