The best of 2013 for designers

Wdd Logo.
December 30, 2013
The best of 2013 for designers.

thumbIn 2013, we covered a ton of new apps, resources, and more for designers and developers. In fact, we covered hundreds of resources!

So rather than you 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 130 entries! Including our favorite featured font from each month!

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

Apiary.io

Apiary.io is a REST API tool that makes it easy to create documentation and other tools for your users to use your API. It even includes tools to get the community to create your documentation for you on GitHub.

apiary.io

Prose

Prose is a web interface for managing your text-based GituHub repository content. It's a great option for managing your blog or making quick updates to your code, and is particularly useful for Jekyll sites hosted on GitHub Pages with Markdown text preview and syntax reference.

prose

Vagrant

Need a lightweight, reproducible, portable development environment? Vagrant has you covered. It works with Mac OS X, Windows, and Linux, with a simple-to-use installer, and easy configuration.

vagrant

Maskew

Maskew is a JavaScript library for skewing the shapes of elements. It's mobile-friendly, has no dependencies, and is less than 5k.

maskew

Elusive Icons

Elusive Icons are 271 vector icons specifically developed for Bootstrap, but since it's a web font, it will work with custom projects, too.

elusive icons

Profound Grid

Profound Grid is a responsive grid system for creating both fixed and fluid layouts, built with SCSS. You can add or remove columns as needed, change column and gutter widths, and much more.

profound grid

Junior

Junior is a front-end framework for building mobile apps with HTML5 that have a native look and feel. It includes CSS3 transitions that are optimized for mobile performance, swipable carousels, and more.

junior

Centurion

Centurion is a responsive web framework that was built using SASS and CSS3 media queries. It uses semantic HTML5, and even makes it easy to build quick prototypes.

centurion

Framer

Framer is a modern prototyping tool for building and testing complex interactions and rich animations. It's a good alternative to Flash, Quartz, Composer, and Keynote.

framer

Photobox

Photobox is a jQuery image gallery script with hardware-accelerated CSS3 transitions and animations, along with a pretty UI and an easy-to-use UX.

photobox

Dropzone.js

Dropzone.js is an open source, simple drag and drop file uploader with image preview. It's easy to set up (especially if you use Component, as you can add it as a dependency) and implement as either a form or programmatically.

dropzone

Notism

Notism is a great tool for working on visual content with a team. You can upload, stack, and review visual project ideas, create working prototypes of static templates, discuss drafts, and more. There are even tools for signing off on layouts.

notism

Dropify

Dropify makes it easy to make files available for download on your Facebook fan page. There's a free plan available (which doesn't offer Like-gating), as well as premium plans. It's great for artists, authors, creatives, brands, and small businesses.

dropify

Onepager

Onepager lets you easily build simple websites for small businesses. The resulting sites work great on both desktops and mobile devices, are cloud-hosted, include custom form capability, and are search-engine friendly. Starter sites are only $8/month, with more robust plans available.

Onepager

Kirby

Kirby is a file-based CMS that's easy to setup and use, and incredibly flexible. It uses your design and your templates, doesn't require a database, and supports Markdown syntax, among other features. It's just $39 per site.

kirby

QuoteRobot

QuoteRobot makes it easy to create professionally designed proposals, invoices, and quotes. It works well with Highrise, FreshBooks, SalesForce, Google Apps, and Xero, and only costs $10/month after the 30 day free trial.

quoterobot

Hint.css

Hint.css is a SASS tooltip library which uses only HTML/CSS (no JavaScript) for creating simple tooltips using data-* attribute, pseudo elements, content property, and CSS3 transitions. It degrades gracefully without any transitions in browsers where CSS3 transitions aren't supported.

hintcss

Ink

Ink is an easy to use toolkit for creating web interfaces. It uses HTML, CSS, and JavaScript for building layouts, dispaying common interface elements, implementing content-centric interactive features, and more.

ink

Cool Kitten

Cool Kitten is a beta framework that includes HTML, CSS, and JavaScript files that's responsive and includes parallax scrolling support.

cool kitten

Baseline.js

Baseline.js helps maintain your vertical rhythm (set by your typographic baseline) despite oddly-sized images in your articles and pages.

baseline.js

Mailstrom

Mailstrom is a tool to help you clean out your email by powering through your messages in seconds. It's currently in beta and has an unlimited free trial, though it will later be available by subscription.

mailstrom

Do

Do is an easy to use team project manager that makes it simple to get all of your work done. In addition to the web app, there are also mobile apps for iPhone and Android.

Do

Galleria

Galleria is an image gallery framework built in JavaScript that makes it easy to create beautiful galleries for web and mobile devices.

galleria

Koken

Koken is a free CMS for creatives that makes managing creative content simple. It has a desktop-like interface, and has powerful tools for working with virtually any kind of content from text to images to video.

koken

Prevue

Prevue is a free way to present your concepts online and even get feedback. You can password protect your image sets and send custom URLs to your clients.

prevue

TypeUp

TypeUp is a Compass extension that takes the font size and line length you specify and turns it into a set of CSS rules for a vertical baseline in ems.

typeup

jQuery Nested

jQuery Nested is a plugin for creating a gap-free, multi-column grid layout. It works on a variety of devices, and grid elements animate to rearrange when the viewport size changes.

jquery nested

Hook.js

Hook.js enables "pull to refresh" on websites, just like it works in mobile applications. Just scroll down a bit and then back up and your page will refresh.

hook.js

Gumroad

Gumroad is a platform for selling digital files directly online. They handle the hosting, payment, and delivery for you, quickly and securely.

gumroad

Gridwax

Gridwax is a bookmarklet that lets you easily add an adjustable vertical baseline to any site right in your browser. Just install the bookmark, click on it, and then adjust the height with your arrow keys.

gridwax

Photolettering

Photolettering is a free iOS app that lets you add text to photos you take within the app or images from your camera roll. It features some great fonts from House Industries, including Elephant, Kerpow, and Aztek.

photolettering

UX Apprentice

UX Apprentice teaches you the principles of UX design with a layered approach, including discovery, strategy, and design. It includes information on the core principles of each layer, as well as real life examples and resources for each.

ux apprentice

dsgnjbs

dsgnjbs aggregates the best design jobs from a variety of design websites, including Dribbble, Behance, Smashing Magazine, 37 Signals, and more.

dsgnjbs

SVG Patterns Gallery

The SVG Patterns Gallery is a collection of SVG patterns complete with code. SVG images are smaller than bitmap images generally, and stay sharp on high resolution displays.

svg patterns gallery

Flat+3D Mockup Kit

This Flat+3D Mockup Kit makes it easy to create attractive mockups for your apps on a wide variety of devices. There are free and paid kits included, depending on which devices you need.

flat 3d

SuperBox

SuperBox is a jQuery plugin that works as a static image gallery that reveals the full size version when an image is clicked on.

superbox

Mobify.js

Mobify.js is an open source library that makes it easy to adapt your site for any device. It captures and manipulates your site's DOM before resources are downloaded, enabling resource control, conditional loading, and more.

mobify.js

Animatable

Animatable lets you easily animate all sorts of properties, including background-color, background-position, border-width, font-size, color, border-radius, opacity, and much more.

animatable

Bespoke.js

Bespoke.js is a DIY presentation micro-framework that offers a number of different slide animations, including coverflow, cube, and carousel, among others.

bespoke.js

LayoutIt!

LayoutIt! simplifies building your front-end code with Bootstrap, complete with a drag-and-drop interface. You get high-quality HTML5 code starting from any of their basic templates.

layoutit

Flat UI Colors

Building a flat UI? Flat UI Colors is a tiny app that makes it easy to grab the colors from Flat UI for your project.

flat ui colors

Resemble.js

Resemble.js is an HTML5 canvas and JavaScript app that analyzes and compares images. Just drag and drop images into the app and it will highlight their diferences.

resemblejs

Web Colour Data

Web Colour Data makes it simple to pull color data from any URL, complete with charts showing the prevalence of each color used.

web colour data

Userium

Userium is an interactive usability checklist that includes categories for user experience, the site's homepage, accessibility, navigation, links, search, and more.

userium

The Productivity Manifesto

The Productivity Manifesto is a free ebook filled with tips for becoming way more productive. Just sign up for the free newsletter for a link to download the PDF.

productivity manifesto

Nanoc

Nanoc is a static site builder that works for building everything from a small personal site to a large corporate site. It even works for blogs.

nanoc

Perspective Mockups

Perspective Mockups is a set of Photoshop actions for creating more interesting mockups for presenting your ideas. The results are crisp and unique.

perspective mockups

Ghost

Ghost is a free, open source, simple blogging platform. It puts the focus squarely on publishing and your content.

ghost

Premailer

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.

premailer

Codifferous

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.

codifferous

Stocksy

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.

stocksy

Videry

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.

videry

Pure

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.

pure

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.

storyboard

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

Flatdoc

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

flatdoc

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

Froont

Froont lets you design websites right in your browser, using a simple drag and drop interface. This lets you see your site exactly as your visitors will.

froont

Thincons

Thincons is a $7 set of icons inspired by iOS7. There are 77 icons in all, and you can get a sampling of them in exchange for a Tweet if you don't want to pay for the full set.

thincons

Golden Ratio Typography Calculator

The Golden Ratio Typography Calculator is a simple tool for creating better typography. Just enter your font size and content width, as well as an optional CPL (characters per line), and get a number of typographic recommendations.

golden ratio calculator

Style Guide Boilerplate

This Style Guide Boilerplate is geared toward designers and developers who want to roll their own frameworks to handle common components they use between projects.

style guide boilerplate

Square Market

Square Market is a new ecommerce solution from Square. It costs nothing extra over the regular cost of Square payment processing, and the storefronts provided are modern and well-designed.

square market

Gridism

Gridism is a responsive grid system that's simple and easy to use. It stacks grid units on mobile device screens, and scales up to 978 or 1140px (your choice).

gridism

Later.js

Later.js lets you define complex schedules and quickly calculate future or past schedule occurrences. It works client-side or with Node.js.

later

Topcoat

Topcoat is a CSS framework for building clean and fast web apps. It includes a number of useful components, is themeable, and includes a PSD with all of the components in the code base.

topcoat

DevDocs

DevDocs is an API documentation reader with a consistent, organized interface. You can look through documentation for HTML, CSS, DOM, JavaScript, jQuery and more, all from a single place.

devdocs

Typewolf

Looking for typography inspiration? Then Typewolf is just the site. Not only does it provide plenty of online typographical inspiration, but it also identifies the fonts used for you.

typewolf

Tiff

Tiff is a type tool that lets you visually contrast the differences between two typefaces. It currently works with Google Web Fonts, as well as your system fonts.

tiff

Bytesize

Bytesize is a new weekly podcast about tech, design, and development. You can also read summaries of the week's news on the site, along with links to the original articles.

bytesize

Responsive Web CSS

Responsive Web CSS makes it quick and easy to layout your pages for responsive sites for a variety of devices.

responsive web css

Snapnote.io

Snapnote.io makes it incredibly easy to share and annotate images and screenshots. Just drag and drop your image onto the page, use the built-in tools for annotation, and then share it.

snapnote

Pico

Pico is a simple, fast, flat file CMS, meaning that it uses no database. It uses the Twig templating engine for powerful and flexible themes, and is completely free and open source.

pico

Butterick's Practical Typography

Butterick's Practical Typography is a comprehensive guide to typography that covers everything from what makes good typography to more basic things like accented characters.

practical typography

Mailparser.io

Mailparser is an easy way to automate your daily email routine. Just set up your data extraction rules, and tell it how to handle the results.

mailparser

CSS Zen Garden

CSS Zen Garden has been around for awhile, but has recently been reworked as an HTML5 template. It's a great demonstration of what can be done with CSS-based design.

css zen garden

Cloud Cannon

Cloud Cannon lets you crate a hosted CMS from your HTML and CSS in seconds. It has a 30-day free trial.

cloud cannon

Type Hunting

Type Hunting is a curated collection of vintage typography examples. You'll find everything from retro t-shirts to antique packaging, old signs, and more.

type hunting

iOS 7-Inspired Line Icons

These iOS 7-Inspired Line Icons are a great set of more than 80 icons in the style of iOS7. You can use them however you like as long as you don't redistribute them without permission.

ios 7 line icons

Bootstrap Magic

Bootstrap Magic makes it easy to create your own Bootstrap theme. It's made with Bootstrap 3 and Angular JS, and gives you live preview, a colorpicker, Google Webfonts, and much more.

bootstrap magic

StatusPage.io

StatusPage.io is an easy way to create a status page for your website or app. It includes custom branding, support for various types of system status messages, and more.

statuspage.io

Just Delete Me

Just Delete Me gives you the info you need to delete your account from a variety of websites and services, including Amazon, Blogger, Facebook, Gumroad, and more.

just delete me

Web Tracing Framework

Web Tracing Framework is a collection of rich tools for analyzing and visualizing your web apps. It's available as either a Chrome or Firefox extension.

web tracing framework

Random User Generator

The Random User Generator will create a random user for you that you can use as placeholders in your projects. It works with jQuery and other methods.

random user generator

Assemble

Assemble lets you combine the power of frameworks like Foundation and Bootstrap for your projects, to create exactly the kind of framework and end result you need.

assemble

Spectrum

Spectrum is a Mac and iOS app for designers and developers that makes it easy to intuitively design color schemes. It uses established color theory, making it much simpler to create aesthetically pleasing palettes.

spectrum

Noise Texture Generator

If you need a textured background for your next project, be sure to check out this Noise Texture Generator. Just enter values for the noise opacity, density, background color, and dimensions, and then download your custom pattern.

noise texture generator

Appmaker

Appmaker, from Mozilla, is a drag-and-drop mobile app creator that works right in your browser. It's in pre-alpha release, so expect some bugs, but it looks promising.

appmaker

Hiro

Hiro is an online notepad where you can safely store your ideas and notes throughout the day. It always opens where you left off, securely syncs across your devices, and it's free.

hiro

Sagan Ipsum

Sagan Ipsum is a lorem ipsum generator that gives you Carl Sagan quotes about the universe.

sagan ipsum

Mobile Web Best Practices

Mobile Web Best Practices will help you ask the right questions and solve problems you may encounter when designing for the mobile web. It's broken down to cover strategy, user experience, visual design, and development, and has additional resources and a FAQ section.

mobile web best practices

Google Web Designer

Google Web Designer is a new responsive HTML5 website creator from Google that lets you design in a WYSIWYG environment or dive right into the code.

google web designer

Listify

Listify is a simple little app that makes it easy to turn a group of lines into an HTML list, saving you time and effort.

listify

Harpoon

Trying to figure out how much money you need to make? Harpoon simplifies that, giving you financial planning advice and metrics for managing your income. It's not ready yet, but you can sign up for updates.

harpoon

StackEdit

Need an online Markdown editor? StackEdit lets you write and edit Markdown files, as well as save them to Google Drive or Dropbox to have your documents available in the cloud any time.

stackedit

Raw

Raw is an open source web app that lets you create vector-based visualizations in vector and raster formats to embed on your website. It's built on D3.js, and has a simple user interface.

raw

Start Bootstrap

Start Bootstrap is a collection of free, open source HTML starter templates for Bootstrap. They're ready to use, even with Bootstrap 3.

start bootstrap

GlyphSearch

GlyphSearch makes it simple to search for icons from Glyphicons, Ionicons, and Font Awesome. You can also browse icons on the site.

glyphsearch

Free Vector Maps

Free Vector Maps gives you access to tons of vector maps of countries all over the world. They can be used for free under the Creative Commons Attribution License, or can be purchased for unlimited usage.

free vector maps

Slidr.js

Slidr.js is a lightweight, simple JS library, with no dependencies, for adding slide transitions to your page.

slidrjs

Merry Icons

Merry Icons is a set of 100 royalty-free hand drawn icons for Christmas, all for just $16.

merry icons

Knock

Knock is an innovative way to unlock your Mac using your iPhone. All you have to do is knock on your iPhone's screen and your Mac will unlock, no password required.

knock

Temper

Temper is a simple app to let you create questions to embed on your website to get feedback so that you can better adapt to what your visitors want. Plans start at just $12/month.

temper

Streme

Streme is an easy way to keep a collaborative stream of links, with no signup required. You can add links to videos, music, and more.

streme

Silk

Silk is a sharing platform for creating collections about anything. Just create a site, add facts to your pages, and create overviews and visualizations.

silk

Fleep

Fleep is a chat program, pinboard, and file drawer all rolled into one, available online and for iOS.

fleep

Onor

Onor is a team recognition platform that simplifies the process of encouraging and rewarding your team members.

onor

Design Faves

Design Faves is new site that offers up plenty of design inspiration every day. There are posts about creativity, general design, art, architecture, and much more.

design faves

Type Scale

Type Scale is a visual calculator for creating typographical scales for your designs. Just enter in your base size and what scale you want to use, and it will give you the best sizes for your headers, body, and other text.

type scale

Color Template

Color Template is a quick tutorial that will teach you how to choose the best colors for your designs. It starts with the color wheel, and progresses through a number of other color theory topics.

color template

Ink

Ink is a responsive HTML email framework from Zurb. It lets you quickly create emails that will work on any device or client, even Outlook.

ink

Kanye vs Creative Director

Kanye vs Creative Director is a fun look at quotes that were either spoken by a creative director or Kanye West. See if you can guess which one, or submit your own quote.

kanye vs creative director

Crowdhoster

Crowdhoster is a service for launching your own crowdfunding page without any coding. You can customize it however you want, and they handle all the payment processing for you and provide you with an admin dashboard.

crowdhoster

Syte

Syte is a simple but powerful way to build a personal website with social integrations like Twitter, GitHub, Instagram, Dribbble, and many more. It even works with WordPress.com or Tumblr for blog integration.

syte

We Work Remotely

We Work Remotely is a new job board from 37signals for finding the best telecommuting jobs out there.

we work remotely

Beyond Ink

Beyond Ink is a monthly design podcast for those in the creative or web industries to discuss what they do.

beyond ink

Slides

Slides from Markdown is a simple way to share your thoughts with the world. Slides can be customized easily, with different fonts, font colors, and more.

slides

Exposure

Exposure is a tool for creating photo narratives online. It's a great way for photographers to publish their work in a more meaningful but effortless way.

exposure

Cassannet (free)

Cassannet is an art deco style font based on the lettering style seen on Cassandre Posters, and includes titling alternates, standard and discretionary ligatures, and small caps. It also includes regular, bold, and outline weights.

cassannet

Roccia ($10)

Roccia is an experimental sans serif typeface with two styles and all uppercase characters.

roccia

Hello Denver (free)

Hello Denver is a free font from Good Apples design studio with stencil-like letterforms.

hello denver

Naive Inline ($20)

Naive Inline is a handwritten serif type family with three weights. It was a very Parisian feel, and allows for a ribbed or full bicolor interior.

naive inline

Cylburn (name your price)

Cylburn, from Lost Type Co-Op, is a semi-connected script font based structurally on Roundhand, but with a pointed brush and restrained tension.

cylburn

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

Core Circus ($84)

Core Circus is a layered type family of eight 2D typefaces that can be combined for 3D effects.

core circus

Woodwarrior (tweet/FB post)

Woodwarrior is a modern display typeface with geometric letterforms and a very bold style.

woodwarrior

Appareo ($21)

Appareo is an imperfect, worn serif font inspired by vintage book typefaces. It comes in three weights, with varying degrees of distress.

appareo

Revanche ($29)

Revanche is a distressed font, based on old wall stencils, with a subversive military feel to it.

revanche

Pacific Northwest ($60)

Pacific Northwest is a handwritten font that's fun and comes in two styles (regular and rough).

pacific northwest

Seashore Pro ($59)

Seashore Pro is a feminine script with thicker horizontals that create a wave-like appearance. It's loosely based on the left-leaning penmanship of the late 19th century.

Seashore Pro

What was your favorite app or resource of the year? Did we miss something you think should have been included? Let us know in the comments.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.

Read Next

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…