web design tools

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.

JSScrambler

Javascript Compressor, Minification and Obfuscation

http://jscrambler.com/

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

http://drewish.com/tools/vertical-rhythm

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.

PXtoEM.com

Online Conversion Tools

http://pxtoem.com/

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

http://www.evotech.net/articles/testjsentities.html

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

http://www.colorsontheweb.com/colorwizard.asp

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.

ColorBlender

Online Color Wizard

http://www.colorblender.com/

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. :)

Westciv.com

CSS3 Generator for Gradients, Text and Box Properties and Transforms

http://westciv.com/tools/radialgradients/index.html

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.)

ColorZilla.com

Ultimate CSS Gradient Generator

http://www.colorzilla.com/gradient-editor/

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.

LOAD IMPACT

Website Load Test

http://loadimpact.com/

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.

WEBPAGETEST

Website Load Test

http://www.webpagetest.org/

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

http://quirktools.com/screenfly/

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.

Conclusion

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?

15 Comments

  1. pc repair

    04.13.2012

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

  2. Karen

    04.20.2012

    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
    http://mut8.me

  3. Brain

    05.07.2012

    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. Orbit Web Media

    05.10.2012

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

  5. Burns Magee

    05.14.2012

    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. James

    05.29.2012

    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. zarabrad

    07.22.2012

    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. Jordan Lei

    08.13.2012

    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. Henry

    09.26.2012

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

  10. phil

    10.28.2012

    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. Cole

    01.10.2013

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

  12. Web Design Cumbria

    01.17.2013

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

  13. Patrick

    01.31.2013

    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. Leigh

    03.31.2013

    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. DSR-Inc

    05.06.2013

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

Leave a Reply






You must add your URL for KeywordLuv & CommentLuv to function.



CommentLuv badge

This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.