The best of 2012 for designers

In 2012, we covered a ton of new apps, resources, and more for designers and developers. In fact, we covered nearly 500 such resources!

So rather than yhou having to go back through our archive of posts, we’ve gathered up the best of what was new over the past year in one place! We’re not including everything (after all, some resources are no longer available, sites may have changed hands, apps may no longer be active, etc.), but rather have put together a true “best of” compilation, with more than 100 entries!

Enjoy, and let us know in the comments what your favorite new resources were for the year!


Cuepoint JS

Cuepoint JS is an open source plugin for adding subtitles or cue-points to HTML5 video.



Hovercard is a free jQuery plugin that lets you display related information when you hover over a link, label, or any other HTML element. It includes Twitter and Facebook hovercards, and uses minimum CSS and no external stylesheets.


Initializr 2 Responsive Template

Initializr 2 is now offering an HTML5 responsive design template generator. You can create slightly customized and highly customized templates in under a minute.



AntiMap is an open source toolset for recording and visualizing your data. There’s a smart phone app for data capture, as well as desktop and web applications for analysis and visualization.



Kinzaa is a web app that lets you create infographic resumes that will set you apart from other job seekers.



Revolver.js is a new content slider that’s equivalent to a boilerplate or framework for creating your own slider. It’s easy to use and completely customizable.



Tmpltr is a tool for rapid web iteration, using JSON, HTML, and CSS.



Scrollorama is a jQuery plugin for doing various “scrolly stuff”, like transitions.



Zip.js is a JavaScript library for zipping and unzipping files. It’s a great addition to an online file management system or site where users need to upload content.


WP Remote

WP Remote lets you manage and maintain all of your WordPress sites from a single dashboard. You can update your core, plugins, and themes, track site status, and have daily backups run and stored to Amazon S3.


Bear CSS

Bear CSS is an online app to help you build a stylesheet based on your HTML markup. Just upload your HTML file and Bear CSS will generate a CSS template based on it.



SlabText is a script that lets you create a big, bold, responsive headline for your web designs. It splits headlines into rows before resizing each row to fill the available horizontal space, and even lets you specify preset word combinations.


HTML KickStart

HTML KickStart is a set of HTML5, CSS, and jQuery building blocks for rapid website development. It includes files, layouts, and elements that will give you a headstart and save you hours on your projects.



Fokiz is a content management system designed for ease of use by designers, developers, and users. It has a minimal learning curve, with a simple templating system and easy-to-develop module system for expanding functionality.


Bootstrap Generator

Bootstrap Generator makes it easy to get started with your Twitter Bootstrap project the way you want. Just alter the options to suit your needs and it will generate your compiled Bootstrap CSS file.



Create is a new web editing interface that uses a browser-based HTML5 environment for managing your content. It can be adapted for use with virtually any content management backend.



Reverie is an HTML5 responsive WordPress framework based on Zurb’s Foundation. It uses media query to adjust for all kinds of devices, is optimized for iPhone and iPad, and is hNews microformat ready.



Enlight is an open source e-commerce framework created by Shopware. It’s based on both the Zend and Symphony 2 frameworks, but focuses on creating rich internet applications and individual e-commerce applications. It’s highly adaptable, uses a simple plugin system, and is specifically adapted to e-commerce.



Osmosis is a simple app for managing your client questionnaires in a way that makes it easier to interact with your clients and gather the information you need from them. It’s made to fit into your workflow while still being easy to use for your clients.


Font Awesome

Font Awesome is an icon font designed specifically for use with Twitter Bootstrap. It includes over 150 icons, is free for commercial use, offers infinite scalability, and is screen reader compatible.



Iubenda lets you quickly and easily generate a privacy policy for your website. Just add services, insert the owner, embed the policy, and show the result.



Wonderflux is a new free WordPress theme framework that lets you rapidly create WP themes. It’s licensed under the GPLv2, so you can use it on unlimited client, personal, and commercial sites.



Entypo is a set of more than a hundred pictograms, available as an OpenType font, a web font, and vector EPS. It’s Creative Commons Attribution-Share Alike licensed, so you can use it on personal and commercial projects.



Zoomooz is a jQuery plugin for making any element on your website zoomable. It’s supported by all modern browsers and has detailed settings options.



Underscore.js is a utility-belt library for JavaScript that gives you a lot of the functional support you’d expect from Ruby or Prototype.js without extending any of the built-in JavaScript objects. It provides over sixty functions that support the usual functional suspects, including map, select, invoke, as well as more specialized ones.


Warp Framework

The Warp Framework provides a set of tools for developing cross-platform themes. It currently supports Joomla and WordPress, and can be extended to work with other systems. It makes it possible to create themes that are easily portable between supported systems while retaining all features.



FanMix is a “social inbox” that lets you manage all of your conversations online from a single inbox, just like email. Probably the most useful feature is the ability to search across your entire social history.



Collusion is a Firefox add-on that lets you see all the third parties that are tracking your movements online. In real time, it shows how that data creates a spiderweb of interaction.



Cyfe is an all-in-one business dashboard that lets you see an overview of your entire business in real time. View data from Google Analytics, Salesforce, AdSense, MailChimp, Amazon, Facebook, WordPress, Zendesk, Twitter, and more from a single location!


Story Wheel

Story Wheel is a new app that lets you take your Instagram photos and tell the story behind them. Just connect it to your Instagram account, then record your story, and create a nostalgic slideshow you can share with the world.



TriggerApp is a project, team, and client management app that includes invoicing. It’s cloud based and powerful, yet incredibly easy to use.


Anchor CMS

Anchor CMS is a PHP5-based content management system created specifically for art-directed blogging. It has a powerful but simple theming engine, an uncluttered admin interface, and is completely free.



15Five is a web app that makes it easy for upper-level management to keep track of what their employees are doing, without being obtrusive. Employees just take 15 minutes at the end of each week to write a report that can be read in 5 minutes. The reports can then be condensed into a single report for the CEO (or other top-level managers).



Backstretch is a jQuery plugin for adding a dynamically resized background image to your pages. It resizes as the browser viewport changes, making it ideal for responsive designs.


CSS3 Responsive Slider

CSS3 Responsive Slider is an image slider/carousel that resizes automatically based on the browser viewport, all without JavaScript! It works in Firefox, Chrome, Opera, and Safari, with partial support in IE9.



Via.Me is a new way to share photos, videos, stories, and sounds. There’s a web interface as well as an iOS app, and you can sign up with Facebook or Twitter.



Noty, now in version 2, is a jQuery plugin for creating alternative alert and other notification messages (such as success, error, and confirmation). Notifications can be placed in a variety of areas, and the API allows you to customize the text, animation, speed, buttons, and more.



Breezi is a new website builder that makes it easy to design, edit, and launch beautiful websites in minutes. One of Breezi’s best features, and what sets it apart from most other website builders, is that it has exceptionally well designed templates to get you started. And through the end of April, when you sign up for a new site, you’ll get it free!



Timeline makes it easy to create timelines that are easy to use and intuitive. You can pull media in from a variety of sources, including videos from YouTube and Vimeo, Google Maps, and SoundCloud, as well as tweets.


Responsive Horizontal Layout

This Responsive Horizontal Layout shows you how to create a horizontal layout that includes multiple panels that can each be scrolled individually.



Filtrify is a tag filtering plugin that lets you search tags within tags, and filter items by multiple tags from different categories. It even includes live feedback on the number of items containing the related tags.


NHP Theme Options Framework

The NHP Theme Options Framework is a simple, very extendable theme options framework for your WP themes. It includes section tabs, uses the WP Core Settings API, custom error handling, and more.



SpritePad is a free, easy-to-use app for creating CSS spritemaps. Just drag and drop your images to the grid and it will immediately be available as PNG and cSS code.



Bacon is a jQuery plugin that lets you wrap text along a bezier curve or a line. You can curve your text around an image, or even turn the text itself into a curved shape.



Wordless is a WordPress plugin that can drastically speed up your custom theme creation. It includes structured and clean theme organization, Haml views, Sass & Compass stylesheets, optional Coffeescript-powered logic, and more than 50 Rails-like helper functions.



Codeanywhere is a code editor that lets you code from your browser or via mobile app, and includes a built-in FTP client. It supports PHP, HTML, CSS, JavaScript, and XML.



Silk is a new web-based publishing platform that makes it easy to provide content in a more structured manner. Users can choose the data they want to display from the mass of information available, and then view it and arrange it in a way that makes sense.



Shifticons provides an easy way to create custom icon web fonts from a variety of web fonts. Just find the icons you want, build a web font with only what you need, and then buy the finished web font.


Goal Stacker

Goal Stacker makes it easy to focus on things you can get done in the time you have available. Just tell it how much time you have, and it will schedule your time for you, based on tasks you need to complete. It will even email you a list of tasks to complete each day!



Pageguide.js lets you create an interactive guide for webpage elements with jQuery and CSS3. Users just click on the Pageguide and are shown arrows to highlight various elements and provide more information.




AngularJS is a JavaScript framework for extending HTML for use in web apps. It works well with other libraries, is fully extensible, and adds a ton of extra functionality to HTML that makes it much more suitable for creating dynamic applications.




Moobile is a new framework for creating mobile applications built on MooTools. You can download either the Moobile Boiler Plate or just the Source (minified or not). Full documentation is also provided.




Tablecloth.js is a free jQuery plugin for styling and customizing HTML tables. It’s built off of Twitter Bootstrap and includes popular jQuery table manipulation plugins like tablesorter.




Octofeed is a new way of looking at your Facebook news feed. Just login with Facebook and Octofeed will pull in your feed and reformat it so that it’s much prettier to look at.



Google Consumer Surveys

Google has recently released a new product: Consumer Surveys. It makes it easy to conduct market research, letting you create surveys in minutes and get near-instant reports, charts, and insights.

consumer surveys


Yahoo! Axis

Axis is a new browser that offers up visual search previews and works on your desktop to iOS device. It shows you what’s trending when you search, and offers instant visual search results as you type. It also connects your devices, so you can move from one device to another and pick up where you left off.

axis is a great reference for WordPress developers. It currently offers up a quick, searchable reference for what’s new in WP 3.4 as well as over 1800 functions, with future references planned for classes and hooks.



Koloria is a free set of more than 160 multipurpose icons, plus 32 pixel icons. Each icon is designed at 32 pixels square, and optimized for that size.



Responsive Grid System

The Responsive Grid System is a flexible way to create a responsive website design that isn’t a framework or boilerplate. It simplifies the creation of breakpoints, works with your existing HTML and CSS, and lets you create a grid to suit your content, rather than the other way around.

responsive grid



Vi is a simple in-browser text editor that lets you open and edit files from the web. And if you open files directly from Dropbox or Box, it will save it back to where it came from.



The Designer’s Survival Guide

The Designer’s Survival Guide is a blog, curated by Richard Baird, that offers continuously-updated lists of design tips on various topics from leading designers and industry pros. It’s a resource, especially for designers just starting out.

survival guide


Foundation 3.0

Zurb’s Foundation has been out for a while now, and they’ve just released the newest version, Foundation 3.0, which is the most advanced front-end framework in the world. 3.0 was built with Sass for faster development and additional tools, and other new elements have also been added.

foundation 3.0



Brackets is an open-source code editor for web design and development, created and maintained by Adobe (and released under an MIT License). It’s built using HTML, CSS, and JavaScript, and focuses on “quick edit” in-line views so you have context-sensitive access to your content while still keeping your code at the forefront.




SeuratJS is a JavaScript library for creating pointilized and pixelized animations from your images with minimal code. It uses HTML5 canvas to parse color data, so it’s entirely client-side.




Laravel is a PHP web development framework that makes it easier to create apps with simple, expressive syntax. It’s well-documented, open source, and lets you share code in bundles (or grab bundles others have shared to speed up your own development).




Dummy is a toolkit for rapid prototyping that makes it faster to develop, test, and present web prototypes by simulating connectivity to a live database. It serves up content while also randomizing key layout aspects, so you’re working with and presenting something much closer to the final outcome.




Roundabout takes your unordered lists and converts them into a turntable-like format. It’s open source and ready to use right away, while also being highly customizable.




ProjectFlow is a visual way of organizing your projects, with a drag and drop interface. Just add projects, define your columns to reflect your process, and then drag and drop your projects through the columns to mark their progress.

projectflow is a free service for getting rid of unwanted email subscriptions and organizing the rest of them. When first covered, it only worked with Gmail and Google Apps, but support for Yahoo! Mail has since been added.



Need a legal document? Check out Docracy, a social repository of legal documents, contracts, and agreements. Just search for a document, then save a copy and make it your own, and sign it for free.




Proof is an iPad app for collecting feedback on your designs directly from clients. Feedback is given directly on the work, making it easier for clients to use and easier for you to understand what they mean.

Proof app



Pagico is a productivity app for managing tasks, files, notes, projects, and contacts on Mac, Windows, Ubuntu, or iPad that keeps everything in sync for an individual or a team. And it has a beautiful UI to boot.




Fruji is a Twitter analytics app that lets you analyze your most powerful followers. They offer free and paid accounts, depending on your needs.




DoneDone is an effective, simple issue tracker for managing bugs, ideas, and more. It’s easy to use for clients while also being powerful enough for developers.




Getquantify is a cloud-based GTD system for small businesses that includes task management, time tracking, and organizational tools. Because it’s cloud-based, it works great for teams that aren’t all based in a single office.




Evernotify combines Evernote functionality with notifications. It makes it easy to structure and organize the information in your notes for better productivity.




Pulse is now available on the web for reading your favorite sites, rather than just as an iOS app. Your favorite sites will be transformed into a colorful, interactive mosaic that’s cross-browser compatible and accessible from anywhere.




iosSlider is a touch-enabled jQuery slider plugin that’s cross-browser compatible and customizable. It can be used as a content slider, carousel, scrolling banner, or image gallery.



Termsfeed Privacy Policy Generator

Termsfeed’s Privacy Policy Generator makes it easy to generate a professional privacy policy for your website quickly and easily. Just fill in the form and grab your policy.

privacy policy generator


CSS3 Code Snippets

CSS3 Code Snippets from WebInterfaceLab is a collection of open source UI components built in HTML, CSS, and Sass. You can search or browse by tag to find what you’re looking for.

css3 code snippets



Osmek is a new type of cloud-based CMS, calling itself a “Content API”. It can be used with any programming language or framework, and on any server, and content can be distributed to multiple sites.




Annotator is an open-source JS library that can be added to a webpage to let visitors leave annotations. These annotations can include comments, tags, users, and more. And it was designed with easy extensibility in mind so you can add new features.




SoundGecko will convert any article into an MP2 file you can listen to on the go. It’s available as a Chrome extension, or you can just email the article URL to get the conversion. There are also apps for iOS, Android, and Windows Phone.




Edicy is a simple tool used to creating multilingual websites. It’s easy to use, optimized for desktop and mobile, has customizable themes, and is search engine optimized right out of the box.




Typecast makes it easy to create interactive live blogs, perfect for interviews. You can invite readers, friends, and fans to ask you questions, and then just choose which ones to answer and start typing.




Quabel is a browser-based writing app that lets you easily set writing goals and focus on your writing without outside distractions. Simple commands make it easy to format your writing, and it’s accessible from anywhere.




Neat is an open source fluid grid framework built on top of Bourbon and Sass. It uses em units and golden ratios, and relies entirely on Sass mixins, therefore not polluting your HTML with presentation classes and extra wrapping divs.

neat is a platform for building tiny mobile apps that can access a phone’s camera, geolocation, and more. You can use it to create simple or complex functionality, and it’s easy to integrate into existsing services.


CSS Arrow Please

CSS Arrow Please is a quick and easy to use CSS arrow generator. Just specify the size of the arrow, the border width and color, position, and background color, and you’ll get all the code you need.

css arrow please is a free, simple app for creating awesome infographics. There are pre-designed themes to choose from, then just add your data and share or embed the finished infographic.




Gridster is a drag-and-drop, multi-column jQuery grid plugin. It lets you create draggable, dynamic layouts that you can even add and remove elements from. It’s easy to set up and includes full documentation.



Folding Text

Folding Text is a plain text productivity app made for geeks. It automatically formats your text, and gives you the ability to view the big picture or just the details.

folding text



ThetaBoard is a real-time project management app for teams. There are free personal plans available, or you can sign up for a premium account.




LazyMeter is a to-do list app that makes it easier for you to focus on a daily goal and stop feeling lazy.



Haiku Deck

Haiku Deck is a presentation app for the iPad that lets you easily create beautiful slideshows to share. It includes a range of fonts, layouts, and image filters, as well as millions of free, high-quality photos.

haiku deck



Plunk, from Zurb, is a new mobile testing app that lets you run click tests on images from your mobile device. It’s free and to use.




Kube is a CSS framework for developers. It’s adaptive and responsive, with a built-in grid and beautiful typography, but with no imposed styles and complete freedom.



Mobile Mozaic

Mobile Mozaic is a gallery of well-designed iPhone applications. You can view designs by category, UI pattern, and more.

mobile mozaic


HTML5 Blank

HTML5 Blank is a blank HTML5 WordPress theme that’s responsive ready and includes preloaded functions, HTML5 Boilerplate reset, and a media query framework.

html5 blank


How do they make money?

This site shows how popular websites, everything from Evernote to Facebook to Tumblr, make money. It breaks down revenue streams into advertising, subscribers, lead generation/affiliates, selling data, freemium, and royalties.

how do they make money



Brunch is an HTML5 application builder that’s agnostic to frameworks, libraries, programming, and more. It watches your files for changes and automatically wraps your scripts and templates in common.js modules.




Spectrum is an OS X app that makes it easy for you to create color schemes intuitively. It uses built-in harmony rules for composing color schemes, as well as a color picker, a tool to make schemes from images, and built-in library, and more.




Sellbox lets you sell your digital files via your Dropbox account. Receive funds through PayPal, and only pay Sellbox a 5% cut without any upfront fees.

sellbox is a minimalist wireframing app that’s both a pleasure to use and beautiful to look at. Controls are simple and intuitive, and the end result is quite attractive.



Solidify is a new prototyping app from Zurb that lets you create clickable prototypes from wireframes, mockups, or even sketches. Plans start at just $19/month.


rwdgrid is a responsive grid system based on It has different grid systems for 1200px, 960px, and 720px displays, as well as mobile screens.




Bootsnipp is a gallery of free elements for designers and developers working with the Bootstrap HTML/CSS/JavaScript framework. There are currently 40 snippets included, with more being added.




Fbootstrapp is a toolkit for building Facebook iFrame apps in both relevant sizes. It’s based on Bootstrap and built with Less, but styled for Facebook.



Simple Grid

Simple Grid is a responsive, lightweight grid. It’s 1140px wide with twelve columns, but easily adapts to any size layout.

simple grid


One% CSS Grid

One% CSS Grid is a 12-column fluid grid system for building responsive layouts. It has two starting options, for screens of 1280px or 1024px wide, and uses a percentage-based grid system to perfectly adapt to any screen.

one percent css grid



Emmet is a toolkit for web developers, previously known as Zen Coding. It will greatly improve your HTML and CSS, taking snippets to a whole new level (CSS-like expressions that can be dynamically parsed and more).




Smore is a new beta app for creating online flyers you can share with anyone. It’s great for creating flyers for things like events, apps, and more.




Weavly is a free online app for mashing up sounds, videos, and GIFs from a variety of sources, including YouTube, Loopcam, and SoundCloud. Just search for the resources you want to use and arrange them in a timeline, just like offline video editing apps.



Photoshop Secrets

Photoshop Secrets is a continuously-updated Tumblr blog that offers new Photoshop tips and tricks. Learn all sorts of techniques to improve your PS skills, find resources to download, and more.

photoshop secrets



Docverter lets you convert plain text documents written in HTML, Markdown, or LaTeX into Docx, RTF, PDF, or ePub formats with a simple HTTP API. It’s open source, and you can run it on your own hardware or on Heroku.




Streak is a CRM browser plugin that works right within Gmail. It makes it easy to track sales, bugs, customers, hiring, and more.




PublikDemand is a social version of a “Better Business Bureau”. It lets users post complaints about big companies and then use social media to get solutions.




Site44 lets you use your Dropbox account to host your website. They offer a free account that allows for up to five websites and 100MB/month of data transfer, and paid accounts that start at under $5/month.




Selfstarter is an open source crowdfunding platform for setting up your own crowdfunding site. It’s based on Ruby on Rails and includes full documentation to get you started.




Singularity is a responsive grid system that’s completely, and easily, customizable. It lets you create symmetrical or asymmetrical grids, and even compound grids!




Calendario is a flexible calendar jQuery plugin that provides layouts suitable for both small and large screens, with a fluid structure when possible.



Check out the archive

Here are all of the What’s new for designers posts we’ve done this year.

What were your favorite new apps and resources this year? Let us know in the comments.

  • Daniel Chatfield

    Great list – including a couple I hadn’t heard of.

  • AlexDenning

    Some fantastic content there, thank you for sharing :)

  • paz arando

    a wonderfull year!

  • Adrian Zoe

    Love your content :)
    Thank you ;)

  • Chris Anderson

    Wow that’s a serious list! Thanks for including Breezi!

    We’ve recently released a lot of new features, including visual CSS editing; the Design Shuffler, which generates 1000s of styles to give you inspiration as you design; advanced mobile optimization and device adaptation, and more!

  • Cezar Derevlean

    This is great, but, man, I thought it’ll never end.

  • Evan Jacobs

    Haiku Deck is completely pointless. I don’t even need to qualify my statement… just watch the video on their website.

  • Tushar Nayak

    Going through these projected matters were profitable for me as it highlights on some of the best designs that really means helpful for me in my learning procedure.
    website templates

  • Mohammad Rashidi

    Wonderful! thanks a lot.

  • Maurice Wright

    Is there a collapsed version of this list somewhere? It’s an amazing collection. Although I like the screenshots on first view, a simple link reference to these sites would be really handy.

  • Sakari Niittymaa

    One of the best list what I have found at this far about this topic. Thanks!

  • K. Roussi

    Really great roundup. This sums up a good deal of design in 2012. I love how products really scaled it down give the maximum effect for their brand.

  • Stephanie Hider

    Very nice thank you for this list and I too thought it was never ending hehe

  • Mike Speranza

    I’m surprised Clevertim CRM was left off the list, being a CRM designed for web designers, but then again, I’m biased, that I have to disclose.