Web Designer Tools

My Short List

Here is a short list of the tools i find most useful when constructing or changing websites. This is not a definitive list, it’s jst the tools that seem to work for me. You can always look at some of these :

Designer References

The Web Designer’s Wall – a constant reference on the design-side of life for tools, tips and tricks.

Another designer’s reference i like a lot is the CSS Tricks website. Tutorials and lessons plus news and views – spiffing !


Grids and Layouts, I hear you ask ? Yes, please ! A simple grid approach need not be tough, see here. And my perennial favorite, dontcha know, 960.GS – super ! Layouts for bigger displays can be a pain. Step forward 978.GS.


To teach my entry forms some manners, I pick Formalize.me from Nathan Smith, a constant reference any any business site builder nerd.

The Tutorialzone.com crowd have some interesting tutorials i always find useful. Here is one on making Form checkboxes look better with some CSS and a bit of JQuery.


Have you ever seen a web site without a menu ? No, neither have I, so this quickie tool generates a lovely CSS3-based menuing system, courtesy of  CSSMenu Maker. Here’s one i made n about 10 minutes ->

CSS3 Menu Maker
CSS3 Menu Maker

Colors and Themes

For themes and color references, choose Color Scheme Designer – great for tetrad or analogic color combinations !

I may have blogged about Colors On The Web before, but i’ll repeat myself so you can see the neat tool they have to work out color themes. Look at their Color Wizzard to do the biz.


 Visibone is an old favorite of mine. It’s helps me build compatible color themes and offers more tools than just color manipulation. Worth a look.


Ok, not really a designer’s tool, as such, but useful, never-the-less is this image-to-CSS converter. it’s makes any image into a base64 encoded text string for convenient insertion into CSS or HTML documents from Web Coder Tools.

Sometimes, i don’t always want to use text as a design component, so a tool to convert text into an image can be quite useful. Look here.


CSS3 Gradients
CSS3 Gradients

The Ultimate CSS Gradient Generator gives us a quick route to several types of gradients. The CSS preview bar plus a convenient CSS-to-clipboard feature is vital in the day of high expectations from our user community.


Now that text shadowing becomes possible, our font faces and text can take on a nicer look, it’s a bit like drop-shadows on boxes. CSS3Gen now makes this possible. Thanx, guys !

No list would be complete without a nod to the website font industry. My favorites come free courtesy of the mighty Google men (and great gals, too!). Start here and look here for their web font loader tool and the developer webfont showcase offers graphic examples of the many possibilities we have for free, courtesy of Google.

Just a last item from the Opera browser community is this nice image gallery display. It doesn’t use lightbox but is a cool tool just the same. Hope to blog on this one in more detail, soon.


Ok, i confess, this post was really because i get so tired of looking up my links to favorite tools on my system as it’s always chocked to the gunnels with development software, i just can’t seem to find things. So for me, this is a tidy-up and i can always reference  my own post to retrieve them. Perhaps they’ll help you too. Cool tooling, guys !!


Sometimes i like to have nice shiny buttons to jazz up the user experience. Gradient buttons are even more extreme but worth a look if you have a moment. Look here. For a full set of possible choices, look here. Screen shot 2013-10-03 at 12.32.07 AM


Can’t even really explain this one – just stumbled on it, so perhaps you’ll understand this a little better than me. Start here or look here to see the background of this web page move several objects around as the user moves the mouse over the panel – Wierd !
—> —> The big picture from http://web-features.net/ Sample of Beautiful Parallax Background

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s