The Best New Design Tools

The last year has seen a wealth of new tools emerge for web designers. Here we introduce the best of the bunch..

It’s been an interesting time recently for web design, thanks to things such as the release of the Retina display the new iPad, responsive web design taking off, a renewed emphasis on mobile first design – and a lot of discussion over vendor prefixes. Hand in hand with all of this, a lot of new tools have come along. So let’s have a look at some of them and how you can incorporate them into your workflow.

In browser coding tools

We’ve had JSBin, jsFiddle, and friends for a wile, but there are a couple of new entrants. Dabblet by Lea Verou is an ‘interactive playground for quickly testing snippets of CSS and HTML’ that saves out of Github gists. I find it extremely handy for mocking up a small piece of functionality, particularly interative CSS things such as animations, because it has keyboard shortcut and awesome previews for CSS values, and vendor prefixes are handled automatically via Verou’s prefix-free library.

1. Dabblet‘s layout is also highly customizable, enabling you to mix code and result, or even overlay the code on the result. You can also get each Dabblet as a full page result only, and embed a Dabblet using an iframe. As it relies on CORS, Dabblet dosen;t support older browsers, but it works just fine in Firefox, Safari, Chrome and the most recent IE 10 beta.

2. The brand new CodePen is a “little one page app for playing around with frontend code”, by Alex Vazquez, Tim Sabat and Chris Coyier. It has impressive input options, facilitating the use of Jade, Slim or HAML in the HTML tab, LESS, Stylus, SCSS with Compass, or Sass with Compass in the CSS tab, and CoffeeScript in the Javascript tab.

You can add a CSS reset, use prefix-free, include a Javascript library or link to an external CSS or JavaScript file. It also enables you to save Github gists, gives you a full-page result and works in IE+8.

3. Prefixr takes unprefixed CSS and adds only the required vendor prefixes.

4. Prefix-free is a tiny client-side JavaScript library to make the vendor prefix problem go away.

Both of these web apps are great places for testing browser support, playing with new CSS and creating test cases for browser bug reports. If you’re building sites out of OOCSS-style objexts or abstracted patterns, you can put these tools to use by quickly mocking up and testing a pattern without having to worry about vendoe prefixes, making ‘designing in the browser’ a much easier task.

Vendor prefix tools

Vendor prefix have proved somewhat divisive, with many strongly worded articles recently taking sides on whether they’re essential or killing the web.

Assuming that you’re taking a pragmatic view and using vendor prefixes responsibly, you’re already resigned to adding them for all supporting browsers and updating them as other browsers come online. There are several ways we can make this process less painful. If you’ve been using Dabblet or CodePen then you probably already have unprefixed CSS, and you could use a service such as Nettuts+ Prefixr or CSSPrefixer.

These enable you to paste in your CSS, then get it back with all the correct vendor prefixes. If you’re writing CSS by hand, your text editor may have a way of adding vendor prefixes to your code automatically.

CSS pre-processors

A CSS pre-processor is both the combination of a language that extends CSS with fun things such as variables, mixinis, nesting and math, and a way to monitor and convert this ‘extensded’ CSS back into normal CSS. As part of this conversion the pre-processor also adds vendor prefixes automatically, and can compress and concatenate your CSS and alert you to errors and so on too.

CSS pre-processors are becoming more popular, no doubt in part dude to the cendor prefix issue, plus a gradually lowering barrier to entry. While historically using one has involved some command line chops, recently apps have emerged that will handle this for you,

5. Such as SimpLESS which is your easy-to-use LESS CSS compiler. Features like CSS-Minification, On-the-fly compilation, Backward @import parsing, Display syntax errors and many more.

6. is a stylesheet authoring framework that makes your stylesheets and markup easier to build and maintain.

Image Tools

8. ImageOptim for OSX optimizes images — so they take up less disk space and load faster — by finding best compression parameters and by removing unnecessary comments and color profiles. It handles PNG, JPEG and GIF animations.

9. is a cross-platform GUI and command-line interface to optimize image files via optipng, pngcrush, advpng and jpegoptim, depending on the filetype (currently, PNG and JPG files are supported). It was inspired by imageoptim. All image files are losslessy compressed on the highest available compression levels. Trimage gives you various input functions to fit your own workflow: A regular file dialog, dragging and dropping and various command line options.

10. With SpritePad you can create your CSS sprites within minutes seconds. Simply drag & drop your images and have them immediately available as one PNG sprite + CSS code. No fiddling in Photoshop, no manual assignment of CSS styles.

11. SpriteCow : Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css

12. : Background images make pages look good, but also make them slower. Each background image is an extra HTTP request. There’s a fix: combine background images into a CSS sprite. But creating sprites is hard, requiring arcane knowledge and lots of trial and error. SpriteMe removes the hassles with the click of a button.

13. PNGGauntlet PNG compression app for Windows. Uses PNGOUT, OptiPNG, and DeflOpt to create the smallest PNGs, without sacrificing any image quality.

14. : ImageAlpha converts 24-bit PNG to paletted 8-bit with full alpha channel. This greately reduces file sizes with only minor loss of quality. Such images are compatible with all browsers, and even degrade well in IE6.

15. : Your photos on a diet! Reduce the file size of your photos by up to 5x, while keeping their original quality and JPEG format!

Icon Fonts

16. Entypo : is a set of 100+ carefully crafted pictograms available as an OpenType font, vector EPS and web font. All released for free under the Creative Commons license CC BY-SA.

17. Iconic is an open source icon set consisting of 171 marks in raster, vector and font formats.

Post A Comment

Leave a Reply

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