My top 10 tools for web designers

In todays post, I wanted to share with you some of the tools I use when completing a web design. I know a lot of people differ when it comes to tools and sources of inspiration, but I wanted to share some of mine and maybe get to see some of yours in the comments section.

I believe having a list of good, quality tools, whether it be software or hardware, is essential to getting the most out of your talent and creativity. You learn your own way around them and use them to how ever matches your preference and pick up on things that even someone who has been using the same tool for many years doesn’t know.

1. Photoshop

I think this is a given, I would say the majority of web designers out there would be using Adobe Photoshop. But everyone will be using it differently, either with their layout or tools selected. I am a sucker for the web layout (window>workspace>web) but only have brushes, layers, character, paragraph and swatch windows open. Everything else I barely use so remove it from my canvas. I like to design to a massive canvas, almost 1400px wide as I like to see how my site will look super wide as well as super slim.

2. Dreamweaver

I’m sure you’re starting to see already I am a bit of an Adobe fan. Why, I don’t know, because I’m sure a learner driver crashes less times than an Adobe application does. But still, I love Dreamweaver purely for the ease of use and quickie shortcuts they have installed. The fact I can just type a few characters of code and it knows what I want, it’s brilliant and speeds up my dev time ten fold.

3. Galleried (app)

This app is brilliant, it is my number one source of inspiration and something I recommend to everyone! Galleried takes the best designs from many many inspiration sites such as web creme, dribbble, css mania and so on. Rather than going through page and page of designs on loads of different websites, Galleried combines it all into one stream which you can filter to your own preference. I have different categories from typography based designs to heavily textured and so on. It’s a brilliant app and not expensive at all (actually free for the iPhone and iPad), so get downloading!

4. Border Radius

Border Radius is a excellent web tool that will quickly give me the code the round the edges of my div. Again, another way to save time which is always a great thing, it gives us more time to make brilliant stuff right? It works flawlessly, just put in the radius in each box and your code will be generated on the fly, copy, paste – done!

5. CSS3Gen

css3Gen is a great tool that helps me code up my box shadows. I can spend ages trying to get the right angle and opacity, but with this tool, you can get the perfect shadow within seconds and just copy and paste the code it gives you – perfect!

6. Premium Pixels

Premium Pixels is a website that offers free psd downloads of various things from modal windows, simple buttons to gorgeous menus. Not only is it a great source of inspiration but also a great way to make use of some amazing effects that Photoshop gives you. PP gives all of it’s PSDs away for free for you to use how ever you like. I don’t download and use the PSDs on offer exactly the way they came, I edit them quite heavily but the base blending effects that come with the PSDs make a great starting grid to nail that perfect design.

7. MAMP

Those that follow my blog posts know that I am a fan of MAMP. I can’t say a bad word about it, works perfectly, with every type of website I want to create and it’s free! For those that don’t know, MAMP lets you develop websites locally. So you can code in php, develop a WordPress site or even Magento and do it all from your computer, no need for an internet connection!

8. 960 Grid

I’m sure most of you know what the 960Grid is by now, and though it’s been going around for a while, I still find it the best grid out there to design your website on. Honestly, before I used this I didn’t realise how much spot on alignment is noticed. It makes a HUGE difference in your layouts and designs, a 100% must have.

9.W3C Validation sites

These sites are just brilliant, not just to see if your website conforms to W3C, but if you’re having an issue with your code and the web site your coding up isn’t quite sitting right, 9 times out of 10, I’ve run it through the validator and it’s told me my problem there and then. W3C XHTML & CSS validator are a bookmark you need to create, as well as W3C Link Checker, checking that you have no broken links throughout your site.

10. Google Chrome

What’s the point in doing all the above if you have nothing to view it in? This is where Chrome comes in. I was once an avid Firefox user, I swore by it, but as more days and months went on I soon grew tired of it crashing, being slow, taking ages to load up and close down – a complete nightmare! I’ve never had a problem with Chrome, it loads fast, supports all my funky html5 or css3 I’m rocking and has some awesome add ons that don’t bog the browser down. If there is anyone out there considering the move, just give it a go, for a week and by the second day, you’ll realise what you have been missing.

11. (one for good luck) My top add ons for Chrome:

1. Inspect element – Google’s version of Firebug and works even better, and it comes pre built into Chrome!
2. MeasureIt! – Perfect for measuring gaps, elements, divs and so on. Measureit won’t work when working locally though, so be sure to give ‘Page Ruler’ a look
3. Eye Dropper – Perfect for selecting any colour off a website and converting it to the right hex code for you to take into Photoshop or your css files
4. HTML Validator – This tool checks your website as you go for invalid XHTML and tells you how many errors you have. Brilliant for keeping on top of nasty code.
5. Web Dev ToolBar – If your a web developer and use Firefox, you’ll already have this installed on your browser, but the Chrome one is just as good and is definitely worth a try.

That’s it guys, these are my number 1 batch of tools I have to use when designing and developing my websites. I wouldn’t be able to do it without them and I strongly suggest you give them all a try! Are there some tools you swear by that I haven’t mentioned? Pop them in a comment box, I’d love to try some new ones I haven’t yet seen.

Thanks guys for reading!