Over the last six or seven years or so of working in the web industry I have built up a reasonably small, but massively useful, collection of resources and tools that help me with my designing and developing. I sometimes forget that not everyone I work with has heard of these tools, so I thought I’d compile a list here so I can point people to it in the future.

• Firefox web developer toolbar - with Firefox being my browser of choice (I design and develop in Firefox, then check that my work will display correctly in other browsers) this tool bar has become invaluable for me. Being able to do things like; resize windows, view pages with and without CSS or JavaScript all in one place is great. And the “Validate local HTML” tool is a life saver when you’re working behind firewalls.
• Firefox ColorZilla extension - another Firefox extension (one that’s not quite as well known as the web developer tool bar) this lets you grab the RGB or Hexadecimal value for any colour on any website. Well worth checking out.
• Lipsum generator - Lorem Ipsum has been used as the print industry’s dummy text since the 1500’s. This generator will spit out as much of the text as you need. I use it as a filler for initial rapid mock ups at the start of a design phase just to fill a gap or to experiment with differing lengths of text in a design.
• Listamatic - Almost every web site or application design that you’ll ever conceive will have a navigation menu of some sort. If you’re coding this menu in a “standards complaint” manner, the chances are that you’ll be using an unordered list containing links to form the basis of this navigation and applying some funky CSS to make it look good. Listamatic will give you the basic building blocks of both to work from, with a number of different styles to choose from to boot (created by some of the most well known web gurus around). I almost always at least start with one of these designs and hack it apart to get the result I need.
• Eric Meyer’s color blender - Yep, that Eric Meyer. This neat little tool is fantastic for all those jobs where you get two or three base colours that you can use, but you need some variations (lighter / darker versions) for make the design come to life.
• Adobe’s Kuler - Picking colour schemes can be a nightmare. This (I believe) flash based tool changes that. People with much better taste than me submit sets of colour schemes (five colours at a time) and Kuler lets you grab the RGB, HEX, HSV, CMYK, or LAB codes needed for each colour. It also lets you tweak the scheme or create your own.
• Ajax loading gif generator - We’ve pretty much all seen them now, those little spinning discs, scrolling bars or twirling thingys; they are the “something is happening” signal we need while that nifty ajax on a site does it’s thing. This site lets you generate your own. Pick from a number of different animations, pick some colours and hit generate. Done.

There are other tools I use too, useful links to sites that share a great bit of code, or brilliant techniques for making something quickly, but those listed here are the tools and resources that I use the most often. As I discover more I’ll up date the list.

Are there any such tools / resources that you use regularly in your daily design / development work?

This article was published within the following categories: Interface Design, Productivity

You can leave a response, or trackback from your own site.