web design, programming and marketing yourself for noobies

Essential web design tools you should be using in 2012 Part I

Essential web design tools you should be using in 2012 Part I

Wanted to start off 2012 (albeit 4 months in. lol) with a listing of tools that I use on a daily basis for designing, wireframing, testing and mocking up designs for clients. Obviously there are a billion different tools out there and each of us has our preferred list so feel free to comment on what you use and why you like it.


Javascript Compressor, Minification and Obfuscation


It’s always a good idea to minimize your pages as much as you can to increase page load times. It’s also a good idea to obfuscate and protect your code to prevent someone from stealing your hard work.

My favorite compressor of late is from jscrambler. It provides you with excellent compression rates and best of all it’s free. (Only catch is you must wait 10 seconds for your queue to be processed. But the results negate the wait.) The free version basically allows you to minify your javascript only. However they do offer premium services which allow you to obfuscate, minify, domain lockdown and SSL security for your code.

There’s a nice features table chart comparing to other obfuscators (Although the Google one is missing. If someone knows the name of it let me know and I’ll update here.) Highly recommended

Css with vertical rhythm

Vertical Rhythm and Baseline Tools


I’ve been reading up about vertical rhythm and adhering to a baseline grid when developing a site. I never realized the importance of following these guidelines and how it can greatly reduce development time.

A great website called The Elements of Typographic Style Applied to the Webby Richard Rutter that provides in-depth detail on what vertical rhythm is and why it’s useful. Sad thing is, I learned about this in my graphic design classes in college and never remembered it.. D’oh!

This is a free online based vertical rhythm tool by @drewish. All you have to do is enter a few details (Base font size, base line height and your target font size), click the Compute button and viola. Your baseline grid is complete. Another highly recommended tool. Be sure you have a good understanding of what these details mean so you get the full benefits of applying a vertical rhythm to your design.


Online Conversion Tools


Another great tool I use on a daily basis. This site has a nice reference table based on pixels, ems, percent and points. You start by choosing your base (body) font size and the conversion chart updates from there. The tool also features a px to em and em to px converter that calculates from the base font size you chose.

Entity Conversion Calculator

Online Conversion Tools


I had a project where I was using the double small arrows for list items. I wanted to add it using the :before pseudo selector but couldn’t convert it to hex. (Another thing I learned in college and soon forgot. lol).

Now you don’t have to waste endless hours searching google for a conversion chart. Provide your numeric or hex values and click the button. Don’t know the values? No problem. Copy the character into a box, (e.g., ©) and click the button. How cool is that?

Colors on the web

Online Color Wizard


This tool is good for creating color palettes. Enter your base color and the application will generate variations of hue, saturation and tint and shade. Other options include monocromatic, analogous, triadic, tetradic, complimentary and split complementary. Only downer is there’s no way to save your palette. Don’t fret, the tool below takes care of that.


Online Color Wizard


Designed by Kim Jensen, this is a free online tool for color matching and palette design. Provide a base color and the tool will generate a 6-color matching design. Best of all you can save your blends to Photoshop (.ACT) or Illustrator (.EPS). If you find the tool useful, feel free to donate to the developer. :)


CSS3 Generator for Gradients, Text and Box Properties and Transforms


The folks at Westciv have put together a nice collection of free CSS3 generators with an easy-to-use interface. The one I use the most is the radial gradients generator for old Webkit browsers. A very useful tool when used in conjunction with ColorZilla. (see next tool.)


Ultimate CSS Gradient Generator


ColorZilla is probably the most used tool in my everyday projects. You can save custom projects, edit opacity, hue/saturation. You can even specify color format (hex,rgb,rgba,hsl,hsla). The tool supports linear, radial and diagonal gradients as well as Sass and IE9 support. One thing missing is the ability to control the radial settings which is the main reason I use it with Westciv’s tool.


Website Load Test


Page load times are critical and something every designer/developer needs to think about when building a website. Google puts significant weight on these times as part of their ranking system. If that’s not enough to get your attention, remember this. Slow loading pages means higher bounce rates, reduced conversions and lost money.

Load Impact has both free and premium services to help you load test your sites and provides a detailed report to help you target the problem areas.


Website Load Test


Another great FREE site that allows you to test a website’s performance. From their home page, “Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content blocking and much more. Your results will provide rich diagnostic information including resource loading waterfall charts, Page Speed optimization checks and suggestions for improvements.”

Screenfly by QuirkTools

Resolution Testing


I love this tool. If you don’t have access to an iPad or iPhone or some particular mobile device then how do you test your site on those devices? Screenfly is designed to emulate what your website looks like at various resolutions on smart devices. Enter your test URL and then choose your device. A great and quick way to troubleshoot broken layout easily.


I understand this is not an all inclusive list and I will create a Part II to cover more. These are tools that I personally use and find to be adequate, intuitive and help make my development cycle more efficient and productive so I thought I’d share with the community. I’d love to hear what you think and what tools you use?


  1. We used webtester and it told us straight up how fast our site was and how to make it quicker.

  2. We’ve used an application called Mut8 before and it is pretty good. I feel that it is often hard to have clients work through platforms like wordpress or expression engine. Mut8 lets them edit their own verbage on their site pretty easily.

    Here is their link

  3. I use Load impact for checking site loading time.it is awesome tool. It gives me such a true information which will help me in various ways while developing the site.

  4. great options. I’m always looking for better color pickers, some of the old ones were not very intuitive to use.

  5. There are many developments nowadays, so we also need to improve our tools and software. There are a lot of innovations going on in the web. To be more competitive, you need to be always up-to-date when it comes to development. I already bookmarked these tools, I think it would really help. Actually, I don’t know most of these tools because it’s not in my list. Thanks for sharing.

  6. I use WebPageTest to control the performance of my site. I think that it suits perfectly for this purpose – it provides all the info you need – response time, speed connection, etc.

  7. Colorzila and Westciv.com are my daily usage tools. Although I have used most of those that you have listed, I have to agree that they are few of the very best available on internet for all of us.

  8. Glad you have shared this. A lot of web designers are really aiming to create the best web design ever. And I have learned from this.

  9. Excellent article I will be trying out some of those very soon.
    Henry recently posted..10 jQuery Plugins For Controlling Web TypographyMy Profile

  10. I’m always looking for tools to help me with my websites and youve shown me some great examples that i shall be checking out in the near future. thanks

  11. Nice!
    I like the color blender as I find it hard to do…
    Cole recently posted..Dealing With Code 37 ErrorMy Profile

  12. Great list and i will be tapping into a few of these over the coming months, great share.

  13. Chris, Thanks for the tools, I’ve bookmarked you for reference. There are so many website design elements that need to be considered. Not only does it have to look great but it has to function well, such as ease of use, speed and by all means search engine friendly. There are so many variables as you pointed out. Just because you can design a great looking website doesn’t mean it is a great website. In the Myrtle Beach Area, website designing is very competitive and the clients are depending on being found and very important, keeping the vistor on their website.

  14. I’ve tried each and every one of them and they look pretty awesome and helpful. Thanks for sharing the list. Great for budding web designers
    Leigh recently posted..Present.me: Create Online Slides With Video Recording Of The PresenterMy Profile

  15. Awesome resource, thanks! I especially love that WebPageTest site. I’m going to use it to do some quick cleanup on my site performance.

  16. Exceptional collection of Web designing tools, Lots of stuff covered here this list is impressive.
    Jason recently posted..Comment on Search Engine Optimization by iPlains | Why You Need Search Engine Optimization Services?My Profile

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge