3 Simple Design Bookmarklets to Improve Your Aesthetics

In math, you’re sometimes so focused on getting the calculations right that you end up with nonsensical answers without realizing it. In web design there’s a similar phenomenon, where you’re so intent on pixel perfection that you lose sight of the bigger picture.

This is where Nick Pettit’s three “design tests” come in — simple aesthetic exercises that serve as sanity checks for your website’s design. In the post, he suggests opening up a screenshot of your website in Photoshop, and applying the following filters:

• Grayscale to gauge contrast between light and dark, rather than by colors
• Blurry to examine the composition of colors
• Upside-down to get a fresh perspective on composition and balance

Fortunately, with CSS3 properties like filter and transform, Photoshop is not required. All it takes are these simple bookmarklets to run the design tests right in your browser.

Gray Effect

javascript:(function(){
    document.body.setAttribute('style',
        'filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
        -webkit-filter:grayscale(1);
        filter:grayscale(1);'
    );
})();

Blur Effect

javascript:(function(){
    document.body.setAttribute('style',
        'filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='10' /></filter></svg>#blur");
        -webkit-filter:blur(10px);
        filter:blur(10px);'
    );
})();

Flip Effect

javascript:(function(){
    document.body.setAttribute('style',
        '-webkit-transform:rotate(180deg);
        -moz-transform:rotate(180deg);
        transform:rotate(180deg);'
    );
})();

The Bookmarklets

Do these design tests make a difference? Judge for yourself by following the link below.