As a web designer one has to think out-of-box in each and every design. And thinking requires a lot of time.
So why waste time when you’ve loads of time-saving productivity apps around you. Rather we can utilize that time in thinking only about the design.
That is exactly what we are going to achieve using these productivity apps. Wikipedia aptly puts the term productivity this way:
Productivity is a ratio of what is produced to what is required to produce it.
So today I’ll be listing out some of the productivity apps which I as a designer normally (not every app every time though) use while designing any site. As the title suggests it consists of both desktop apps and online tools (plus browser extensions).
1. Instant Eyedropper
Every time a designer looks at a good gradient or color one feels the need to quickly grab the hex code of that particular area. Instant Eyedropper does exactly that. It’s basically a small desktop app which remains in the minimized-to-task bar state on start-up.
You just have to click the task bar icon and mouse over any part of the visible screen space to grab it’s color.
2. Re-sizing browser windows (Resolution test)
Testing out your newly designed website or page on different resolutions is very important. It gives you a fair idea of how the site will look in low or high resolutions. Yes, you can manually re-size browser windows but you won’t be able to achieve the exact value of the width and height.
And when we have ready made extensions and addon-ons we must make the most of it. A simple chrome extension named Resolution Test is made available for this very purpose. It comes with 13 default resolution sets based on the Google browser size project.
An alternative for Firefox is the Yet Another Window Resizer add-on. It is a context based add-on rather than a pop-down or menu one.
So test your site’s design before making it live on the most popular lower resolution set (which ideally is 1024×768 px). Also, make sure that none of your site’s elements are set to auto-hide on . Let the scroll bar do it’s job.
3. MeasureIt!
To start with I would like to say that this is the app I use the most, it’s one of those apps which I find the most productive. MeasureIt! does what it’s named after i.e. to measure visible areas and tell you the width & height values. This extension is specific to Chrome and works on a single click principle.
Just click the icon in the menu bar and you’ll notice that the visible area on your browser gets faded and becomes selective. So select the area you want to measure and get the values readily.
I particularly use MeasureIt! to check alignment of various elements. So the border of the selected area can act an effective horizontal/vertical ruler.
- Firefox Alternative – MeasureIt
4. Ditto
Whether you are a designer or a developer, you involve in a tedious process of cut-copy-paste. By this I don’t mean that you copy the code of the design you just liked into your site’s source code.
This cut-copy-paste process takes place when we decide to experiment with different set of codes on a particular element of our design. Yes, single or multi-line comments can be used in CSS to preserve your codes. But that isn’t productive enough and involves addition of the comments syntax and removal of it once we’ve tested the codes.
Is there a better way to deal with this thing and save time ? Yes, there is a small tool named Ditto which solves our problem. It is basically a clipboard application which stores the recently cut or copied information.
So the next time you want to backup a piece of code just run Ditto on start-up and press Ctrl + c.
5. Colorzilla CSS Gradient generator
A good design normally comprises of elegant gradients and textures. Okay, it’s understand-able that we need to use background images for textures but what about the former ? Are we still living in the 2000-age ?
With technology improving day-by-day it’s necessary that as designers we adopt new and efficient tactics to save HTTP queries and in turn reduce the loading time of the site’s we design.
The best away to achieve that is to reduce the usage of background images or use CSS sprites where ever necessary. Considering that you are not well versed with the sprites technique the next best option is to use CSS3 gradients.
With proper use of CSS3 gradients we will be able to achieve the same effect as that of a gradient (in the form of an image). But as you know CSS3 is supported by most modern browser except IE (err, is it modern yet ?). So to make our CSS gradients compatible across all browsers we need to apply some 5-6 lines of code.
Colorzilla’s CSS gradient generator will present you with the CSS code once you enter the hex codes of the start-end colors in their color palette.
6. CSS3 Please!
CSS3 Please!, as the name suggests gives you a chunk of code which is compatible with most browsers around. Remember that each engine has a different way of executing CSS3 elements. So a webkit engine-based browser like Chrome or Safari will display a box-shadow only if you enter a specific piece of code like -webkit-box-shadow: 0 0 0.5em #eee;.
So with CSS3 Please! all you need to do is to enter the values of the CSS3 elements and you’ll get the desired code which will work in most browsers. This site also has the background gradients property but without a color palette. It’s basically a cross-browser solution.
Hence we suggest you to use Colorzilla’s gradient generator separately.
7. Image Optimizer
Re-sizing images can be difficult at times, specially if you are on a low end graphics machine but running on a resource consuming operating system like Mac OS or Windows 7. You cannot take the liberty to open your graphics editor every single time you need to re-size images.
It’s better off to use specific apps like Image Optimizer to get our job done. Image Optimizer is an online tool but it also offers a desktop app for offline usage.
Choose the right amount of optimization and size and hit the button. Within seconds you’ll get the optimized version of the image you uploaded. It’s another pretty productive tool for a web designer.
If you only want to re-size images without loosing their quality then you can go for this app – Image Resizer.
8. IE Tester
Web Designers usually give their best finishing touches at the end of the core design, don’t they ? Similarly we’d reserved the most productive app for the very end. Here is the best IE Tester app you ever would find to test your designs on different Internet explorer versions.
As designers we often neglect IE (IMO we should), but what if your client wants an IE 8+ compatible site ? You’ve simply got no choice. With IE Tester you won’t be facing this dilemma of ‘how my design would look on IE 6, 7..9‘.
It is a nicely tabbed desktop app which comes with a debugger tool to help you inspect the browser specific codes.
These 8 apps/tools are seriously must-haves, so if you are a designer don’t neglect them at all.
Any online tool or desktop app you find more productive than these; for designing purposes ?