whats new june 2013

What’s new for designers, June 2013

By Cameron Chapman Posted Jun. 18, 2013 Reading time: 5 minutes

The June edition of what’s new for web designers and developers includes new web apps, JavaScript resources, Photoshop scripts, web development tools, color palette tools, image apps, video resources, coding resources, and some really great new fonts.

Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there.

As always, if we’ve missed something you think should have been included, please let us know in the comments. And if you have an app or other resource you’d like to see included next month, tweet it to @cameron_chapman for consideration.



Premailer is an online pre-flight app for HTML email creation. Just paste in your URL or source, add a query string to append to links, and add options (like removing unused IDs, comments, or classes), and submit.




Pixa is a $30 Mac app that makes it easy to organize your images into collections. It helps you quickly find and share your pictures, and works with a ton of different image formats, including psd, ai, svg, raw, and many others.




Codifferous helps you review code faster and more effectively. It tracks how much you’ve reviewed within the source code, and even lets you mark whether each line is accepted or rejected. Public projects are free, while private projects will eventually require a small fee.




Ladda is a UI concept that merges loading indicators into your submit buttons, so that your users aren’t left wondering whether clicking submit actually did anything.




Stocksy is a stock photo service that offers high-quality, royalty-free photos that are unlike most stock photos and exclusive to Stocksy. Photos start at just $10.




Tourist.js makes it simple to create guided tours of your app. It includes hooks for things like opening windows or menus, or for waiting for a user to complete certain tasks.



TODC Bootstrap

TODC Bootstrap is a Google-style theme for Twitter Bootstrap that’s packed with features like a 12-column responsive grid, tons of components, JavaScript plugins, form controls, and typography.

todc bootstrap



Videry is a curated collection of videos for web designers. There are videos on a variety of topics featured, including CSS, innovation, psychology in design, typography, and much more.



UI Icons

This set of UI Icons comes with 704 minimalist, monochrome icons in the premium version (there’s a free version with a more limited set, too). They’re all delivered in PSD, AI, EPS, and SVG format, ready to use.

ui icons



Pure is a set of responsive CSS modules that you can use in all of your website and app projects. It includes modules for grids, forms, buttons, tables, menus, and more.




Bounce lets you integrate Dribbble into your design programs, so you can stay up to date on what’s happening without ever leaving Photoshop, Illustrator, InDesign, or Fireworks.



430+ Free Storyboard Illustrations

This collection of 430+ Free Storyboard Illustrations is free for you to use for your personal projects (it’s not made to be used in final production projects). It includes a vector file, as well as a PNG file.




SketchMine is a collection of sketch files from the design community. Sketches are categorized by OS, device, icons, mockups, and more.




Guifff is a collection of animated GIFs from Dribbble. There are tons of awesome shots included here, all with permalinks to their respective Dribbble pages.



Red Pen

Red Pen makes it super fast and easy to get feedback from your clients or team members. Just drag your design onto the upload area, share the short URL you’re provided with, and get live, annotated feedback. And there’s no logging in, project management, or other useless features.

red pen


Designers Complaining

Designers Complaining is an awesome Tumblr blog that catalogs complaints from designers from across the web. Most recently has been a huge number of complains about iOS 7.

designers complaining



Roon is a super simple blogging platform that’s cross-platform compatible. It removes 99% of the distractions that come along with blogging, leaving you free to focus on your content.




React is a JavaScript library for building great UIs. It uses a declarative paradigm for easier reasoning, computes the minimal number of changes necessary to keep your DOM up to date, and will work with the libraries and frameworks you’re already using.




Need a website for documenting your open source project? Flatdoc is here to help. It lets you create a website fast, using Markdown.




Breakouts is a selection of JavaScript game engines demonstrating the classic game Breakout, to help you choose which engine is best for your project.



Explore. Create. Repeat.

Explore. Create. Repeat. is an online weekly magazine for the creative community, to inspire and offer insight. You can subscribe by email or read it online.

explore create repeat


Popular UIs

Popular UIs is a collection of popular website user interface PSDs you can download. These are, of course, recreated for educational purposes only.

popular uis



Unsplash is a new Tumblr blog offering hi-resolutions photos for your website or other creative projects. They add ten new copyright-free photos every 10 days.




Projecteo is a tiny Instagram projector that works with photo wheels, each holding nine of your Instagram photos. The project is less than $26, and the wheels are each under $9.




Colourcode is a color scheme design tool that lets you select a color by hovering over the page, and then choose a standard color scheme pattern using the slide-out menu.



Six UX

Six UX is a collection of six second UX videos for inspiration. You can browse depending on what type of UI effect you’re looking for, including animation, transition, CSS, iOS, navigation, and more.

six ux



Prepros is an app for compiling a variety of languages, including Less, Sass, Scss, Coffeescript, Haml, Markdown, and more. It’s available as a Chrome Extension or a Windows application.



TemplateGen Beta

The TemplateGen Beta script is a Photoshop script for starting your projects with better templates. You can easily create a new document that includes things like grids, OS X Icon squares, iOS Icons roundrects, and even create your own templates.



CSS Modal

CSS Modal lets you create modal windows entirely with pure CSS, with added JavaScript for extra flare. It’s optimized for mobile use, and can be used as a Sass plugin.

css modal



Wri.pe is a smart web notepad that you can sign into with Facebook. It includes shortcut keys and Markdown support, is available on any device, backs up to the cloud, and includes calendar-based organization.



Klinic Slab (name your price)

Klinic Slab is a slab serif font in four weights (plus italics). It’s a contemporary workhorse that has both personality and functionality.

klinic slab


Albert Sans & Serif (free – $15)

Albert Sans & Serif is a type family that includes both a slab serif and a sans serif font. It’s modern and a little bit funky, but still highly legible.



Engine (free)

Engine is a free handwritten font with a playful personality. It comes in regular and italic.



Chomp (free)

Chomp is a playful, fun typeface with a brush script quality. It comes with uppercase characters, numbers, and punctuation.



Gin ($45)

Gin is a vintage display typeface that comes in eight styles and weights. It’s reminiscent of old serif fonts and classic bottles of whiskey and gin.



Lunch Box ($24)

Lunch Box is a unique, handdrawn typeface with infinite customizable options. It also comes with a custom set of small caps, each with four style variations, and stylistic alternatives.

lunch box


Percival Script (free – $3)

Percival Script is currently a teaser for a script that will be released at a later date. It’s downloadable as an EPS file right now, but the full release version will include a sans version, capitals, numerals, and more.

percival script


Operator ($6)

Operator is a slim display typeface that’s great as a headline font. It includes 175 glyphs and comes as both a desktop and web font.



Font Awesome 3.2.0 (free)

Font Awesome 3.2.0 has a number of new features, including 58 new icons, pixel perfection at 14px (Bootstrap’s default size), and more.

font awesome


Yuma ($10)

Yuma is an experimental typeface inspired by Navajo textiles with strong geometric patterns.



Know of a new app or resource that should have been included but wasn’t? Let us know in the comments!