Best web design resources of June 2011

Here’s the round up of fresh web design resources for June 2011! we have icon sets, CSS3 tools, web typography, Chrome Extensions for Google Web Fonts and WordPress resources.

General web design

Mobile app mockups

Mokk is a simple but effective web app to quickly mock… well, other web apps. Mokk focuses on mocking up mobile web apps for iPhone using the standard visual components. Cool thing is that it can be saved, shared and you can test it in your iPhone scanning a QR code containing the url to a live version of your mock-up

Modernizr 2

The popular JavaScript library to enable HTML5 elements and use CSS3 properties in outdated browsers has been revamped and updated to its second incarnation. Now with media query testing, Modernizr has now a builder to include only the features you want to use in older browsers, so the download package is much more smaller.

Better kerning for Lettering.js

Kern.js is an impressive bookmarklet that will allow you to define an specific kerning for character pairs of titles created with lettering.js. Easiest way to test it is to save the bookmarklet to your browser bookmarks and then go to lettering.js. Click the bookmarklet and start tweaking the kerning for each pair of characters. After you’re satisfied, you’ll have the option to save the CSS code.

Better font stacks

This is a simple reference site that compiles some good choices to stack several fonts in your CSS stylesheets sharing common properties like x height, character thickness or width.

Circular slider in jQuery

The Roundabout jQuery plugin is a slick way to display your products, artworks or anything you want using a carousel that cycles in 3d. And it even works in that 2011 browser you hate but your client still uses!

The visual way to text shadows

Love text-shadow, 3d and Cameron’s Avatar? then you’ll love this online tool to configure multiple CSS3 text shadows using sliders.


If you’ve accidentally deleted your development version stylesheet, don’t worry, you can reformat the compressed version using this formatter that allows you to set several options like bracketing style, if selectors are meant to be in the same line or one below the other or “columnize” the selectors to the left and properties to the right for better legibility.

Grid builder

This tool allows you to quickly create modular grids for your designs, whether they are for web or print, and download the grid as a PNG pattern, a .pat file ready for Photoshop or a transparency mask. If you’re a Photoshop user, you’ll love the panel for Photoshop CS5 to create your grids in real time right within Photoshop!

Fluid Grids Calculator

Another cool tool to create fluid grids, but this time, what you get is a complete CSS code based on your settings. You can check more about the tool on the release post by Harry Roberts.

3D WebGL: the future of the web?


This impressive demo shows how the canvas tag from HTML5 can be used to produce some shocking 3d graphics which includes even morphing of the animals. Maybe these are not that shocking since they are mostly polygonal but just imagine the possibilities.

Free graphics

Free tileable patterns

If you were looking for some patterns to spice up your backgrounds just a little bit, Subtle Patterns has over 50 high quality patterns for you to download and use. If you’ve created some patterns and want to share them you can submit them for consideration.

Free retro icon set

Finally, here you have a nice icon set featuring some vintage or retro elements like a telephone, a hammer and what appears to be an Iomega zip drive among others. The icon set is completely free and all they ask you is to spread the word about it.

Chrome extensions for web typography

Following the redesign of Google Web Fonts, here we have a Chrome extension to help us peek into the fonts used in a website and another to tweak or web typography using Google’s Web Fonts.

WhatFont Tool

Curious about the font used in that slick site? If you use Chrome, you can install this extension to quickly inspect the fonts used for any chunk of text in the page. A Safari extension is also available, as well as a bookmarklet for other browsers.

Preview Google Web Fonts in Chrome

This extension for Chrome is awesome: as soon as you install it, open your website or another page that you want to see how they would look with Google Web Fonts applied, enter a CSS selector to change an specific text block or leave the default * to replace all the fonts with any of the Google Web Fonts. This makes really easy to test one font or another in your website layout.

WordPress resources

Post Format Icons

WordPress introduced post formats in version 3.1 as a way to add an extra layer of styling to certain posts. StudioPress offers this nice set of icons featuring all the post formats included in WordPress. The download package includes not only png files but the layered psd as well so you can tweak it as you wish.

Visual theme, by DevPress

DevPress returned to the scene with a gorgeous new theme, Visual. You can download and get support by joining the club for only $5 a year.

Custom Taxonomy Generator

The guys who created the custom post type generator released this awesome Custom Taxonomy Generator to speed up your work when it comes to write code for custom taxonomies.

That’s all for this month, and don’t forget that if you release a resource for the web design community you can contact us to have it published here.

3 thoughts on “Best web design resources of June 2011”

  1. is indeed pretty cool, and while there are other solutions to wireframe on the go like iMockups, the beauty of is that you can share the live previews just by sharing a link and the end peer can open it in the same easy way.

Leave a Reply