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!

Inspiration

Design Fridge

A great gallery of inspiring websites

designfridge

Pattern Tap

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

patterntap

Ui Patterns

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

ui-patterns

Colour Lovers

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

colorlovers

Wireframe

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.

wireframetoolkit

Free Photoshop Wireframe Kit

A set of layered PSD wireframe elements.

wireframepsd

Framework

Bootstrap

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.

bootstrap

Fonts

WhatTheFont

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.

MyFonts

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.

fontsquirrel

Blokk

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

blokk

Icons

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.

fontawsome

Flaticon

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

flaticon

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.

css3

Border Radius

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

borderradius

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.

gradients

W3School

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.

w3school

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!