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!
A great gallery of inspiring websites
Another gallery site with the ability to sort by design patterns.
As stated on Ui Patterns “User Interface Design patterns are recurring solutions that solve common design problems”.
This a great resource when looking for inspiration regarding which colours to use in your up and coming design project.
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.
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.
Do you find it difficult choosing what fonts to use, then why not give Font Suggester a go.
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.
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!
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.
Another really useful tool to save you time. Just input your border radius and copy and paste the code into your stylesheet.
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!