Web Design Resources


May 23, 2017

“Ambiance. generates beautiful color palettes so that you use them on that awesome Illustration, on that really fancy and modern User Interface or just stare at them in peace.”


November 28, 2016

Httpster is an inspiration resource and showcase of “totally rocking” websites made by people from all over the world.


October 21, 2016

A simple CMS for Jekyll and Hugo sites; integrates with GitHub, Gitlab and Bitbucket.


May 30, 2016

A list of everything that could go in the <head> of your document.


May 16, 2016

A headless CMS with an API at its core.


May 09, 2016

A WCAG 2.0 Level AA accessible modal window plugin with customizable CSS/SASS options.


May 09, 2016

Alfred-like interface for Sketch to run commands and navigate the interface directly for the keyboard.


April 07, 2016

Like a spreadsheet crossed with a database. Keep anything organized, cross-referenced, and quickly accessible with mobile apps. Plus a promising looking API.


February 23, 2016

Javascript CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets.


February 14, 2016

Craft (by Invision) is a plugin suite for Sketch and Photoshop that lets you design with real data in mind.


February 14, 2016

Yet another static site cms, with some nice looking additions like Stripe, Mandrill, Zapier, etc.

HTML5 Elements

February 14, 2016

Big document of all HTML5 elements showing their default styling in whatever browser you happen to be using.


January 26, 2016

Monitor the accessibility of your websites and protect against accessibility errors creeping into your codebase.


January 12, 2016

My personal holy grail of CMSs: Jekyll static site, hosted on github, WYSIWYG editable by clients.


December 18, 2015

A very promising looking multi-platform markdown editor.

Sass Lint

December 18, 2015

A Node-only Sass linter for both sass and scss syntax. Includes grunt/gulp/atom integrations.


December 08, 2015

Comm(ent|it) uses the Github API and Jekyll to help you store visitors comments directly in your repository.

Place Linked Bitmap

December 08, 2015

Take a bitmap file (JPG, PNG, PSD, etc) and place it inside Sketch, preserving the ability to updated it outside of Sketch.


December 08, 2015

Sell digital anything from any server: Dropbox, Amazon S3, Shared hosting, your server… just link to the file.


October 23, 2015

A rich text editor from the team at Basecamp. Promises sophisticated document model, support for embedded attachments, and terse, consistent HTML output.


October 23, 2015

Sass framework (a la Jeet) for flexible, clear, and semantic website layouts.


October 07, 2015

Very small (2kb) javascript script to copy text to clipboard. No flash, no framework, no nonsense.

On the Grid

September 30, 2015

This one doesn’t quite fit the mold but it’s too awesome not to share. City guides, curated by designers/design studios.

Sketch Palettes

September 29, 2015

A Sketch plugin that lets you save and load colors into the color picker. So useful it should really just be built in.


September 29, 2015

Deeper technical take on the Cloudstitch/Gridspree Google-Spreadsheet-as-CMS approach. Turn any Spreadsheet into an API w/o setup or plugins. Useful for web content, forms, surveys, mailing lists, etc.


September 20, 2015

Notable lets you take any interface screenshot, sketch, or wireframe and exchange notes/feedback details with your team.


September 20, 2015

Import photoshop/sketch files, lay out your states, instantly animate between them, and share. Without coding.


September 18, 2015

Looks to be a more robust (and supported) version of Gridspree (formerly Brace Data). Use Google Sheets as CMS.

SEO Bookmarklet

September 18, 2015

Run this bookmarklet on any page for SEO insight like on-page factors, research and intelligence tools, and a good list of external tools to check against.


August 25, 2015

Ostensibly a subscription moodboard creation service. Also good for just browsing beautiful images.


August 20, 2015

A ty­po­graphic pre-proces­sor that uses zero client-side JavaScript and gives you hang­ing punc­tu­a­tion, soft hy­phen, in­ser­tion, op­ti­cal mar­gin out­dents, etc.


May 12, 2015

Free stock photos licensed under Creative Commons Zero (personal or commercial use).


February 12, 2015

If you’re into backwards compatibility then Grunticon is useful tool to generate fallbacks, style, and animate your SVGs.


January 31, 2015

A simple extension to make link-blogging to a GitHub-hosted Jekyll blog easy.


January 31, 2015

GUI front-end for SVGO, a nodejs-based tool for optimizing SVG vector graphics files.

OWL Carousel

January 31, 2015

Touch enabled jQuery plugin that lets you create a responsive carousel slider. Very flexible.


January 31, 2015

Another jQuery carousel with a lot of features. Because you never know when you’ll need one of these.


January 04, 2015

A review of the best website designs spotted in 2014 – collected and curated by zitrusfrisch.


December 26, 2014

Must-See Documentaries for Designers & Artists with links to the relevant streaming service or store.


December 18, 2014

Boilerplate for building custom CSS frameworks. Simple architecture written in SCSS using BEM notation.


December 12, 2014

Live Markdown previews for any text editor.

Sass Compatibility

December 11, 2014

A nice site that reports incompatibilities between different Sass engines. Also just a great list of cool stuff Sass does.

Prototyping Tools

December 11, 2014

Big list of prototyping tools comparing platforms, output, gestures, transitions, design, and pricing.

CSS Stats

December 02, 2014

Enter a URL and get a visualizations of all sorts of things including rules, selectors, declarations, properties, colors, media queries, font-families and more.


November 30, 2014

A thorough and well organized respository of web design resources. Blogs, news, inspiration, learing, tutorials, plugins, architectures, tools, resources, community, etc.

Real Favicon Generator

November 22, 2014

Making a favicon that works nicely across all platform is a fool’s errand. This site makes a resonable attempt at it.


November 16, 2014

Useful reference for physical width/hight, CSS width/height, pixel ratio, physical ppi, and CSS ppi of various popular mobile and connected devices.


November 16, 2014

Chrome extension for analyzing, consolidating, refactoring, and gawking at “the 37 shades of blue your site somehow ended up with.”


November 10, 2014

Find a font combo by choosing one typeface and receiving suggestions and previews for accompanying typefaces.


October 27, 2014

Quick preview of all available cursor values in CSS.


October 20, 2014

Alternative to Brace (Formspree) Forms. Create your form, put their url in the action, collect information. No iframes, JavaScript embeds, or CSS overrides.


October 16, 2014

Create native iOS and Android prototypes with sophisticated animations and interactions without the code.

Sassy Gridlover

October 06, 2014

Sass mixins to establish a typographic system with modular scale and vertical rhythm. Based on the Gridlover app.

Data by Brace

September 26, 2014

Use Google Spreadsheets as your CMS. Display your spreadsheet data however you like right on your static site.

Ui Gradients

September 07, 2014

Easily navigable gallery of beautiful color gradients. Because remember kids: not everything has to be flat.


September 05, 2014

A minimal, ui-focused programming language intended for web designers. Write simple lines to show/hide/toggle classes and then the uilang code translates into vanilla JavaScript.

Nice Entity

August 27, 2014

Quick cheat-sheet/reference for common (and uncommon) html entites. (™, ®, ©, etc)


August 22, 2014

Interactive tool to establish a typographic system with modular scale and vertical rhythm.


August 14, 2014

CSS shorthand generator take verbose declaration blocks and converts them into more concise shorthand declarations.


July 28, 2014

Link existing screen designs (PNGs) to make deceptively realistic iOS and Android app protoypes.


July 23, 2014

DomFlags chrome extension offers a handy way to create keyboard shortcuts to DOM elements while you’re working in the inspector.


July 10, 2014

Illustrator plugin that places your artwork on images of real objects. Provides real-world context for branding, etc.


July 09, 2014

Another file-based cms. More expensive than Kirby, but a solid looking alternative.


July 09, 2014

File-based (no database) cms that promises easy setup, use, and flexability. Possible alternative to static-site generator for client sites.

Call to Idea

June 19, 2014

Nice collection of screenshots of interesting/innovative interface component and layout patterns.


June 08, 2014

When flexbox doesn’t quite cut it, matchHeight makes the height of all selected elements exactly equal.


June 01, 2014

Another service to transform static designs into fully interactive prototypes for web, iOS & Android. More feature rich than Marvel IMO.

Place It

May 02, 2014

Drop a screenshot of your app into a stock image or video of a product (iPhone, iPad, Mac) in a real-world environment. Stock-a-licious, but useful.


April 30, 2014

Jeet is a pretty advanced grid system for Sass and Stylus. Personally it looks like it could replace my beloved Bourbon / Neat combo.


April 29, 2014

Turn sketches, wireframes, mockups, etc into interactive mobile and web prototypes; synced real-time from Dropbox. Also: Free.


April 10, 2014

247 bytes of css to boilerplate responsive images, tables, preformatted text, canvas, and iframes.


March 29, 2014

See and hear a 5-minute video of a real person using your site. Fast and free.


March 09, 2014

Another static site generator solving the problem uniquely by letting you string together a series of plugins generate your production files.


March 08, 2014

Jquery plugin allows you to control things like position, animation, parallax, infinite/ajax loading, based on the user scroll position.


March 06, 2014

Minimal, customizable boilerplate typography stylesheet that plays nice with normalize.css. Also, has a Sass version.


March 06, 2014

Put a form on a static webpage by dropping their URL in your action attribue, then they’ll forward it to your email. No PHP, Javascript or sign up required.


March 02, 2014

Paste your copy in to Hemingway and it highlights long, complex sentences and common errors. Promises to make your writing bold and clear.

Type Fider

March 02, 2014

Type Finder asks you a series of questions to help you select a reputable typefaces for your project.


February 17, 2014

A nice starter set of sass mixins for things like triangles, truncate text, animation, alerts, resizing sprites, tooltips and more.


February 10, 2014

Big list of tools for Sass/Compass projects. Named, described, tagged, and searchable.


February 04, 2014

Enter your site’s url and get a brief report on how well you’re following Google’s webmaster guidelines.


January 30, 2014

Handy tool for figuring out the right equation for electing elements with nth-child or nth-of-type pseudo-selectors.


January 19, 2014

Kimono allows you to turn websites into structured APIs by identifiying common/repeating data on the page, in your browser.

Color Thief

January 09, 2014

A script for grabbing the color palette from an image. Uses Javascript and the canvas tag to make it happen.


January 05, 2014

DPLOY is an FTP/SFTP deployment tool built in node.js. It uploads the latest changes by comparing the version on your server with your git repository.


December 27, 2013

A simple CSS tooltip made with Sass. Choose direction, color, and other visual styling.

Native Form Elements

November 25, 2013

This is what every HTML5 form element looks like on your current operating system and browser.

Type Scale

November 20, 2013

Quickly visualize page headers/type on various (musical) scales.


November 13, 2013

Search for icons from Font Awesome, Glyphicons, and Ionicons in one spot.


November 12, 2013

Bitters is a dash of predefined style for Bourbon stylesheets. Seems like a nice start for a boilerplate Bourbon project.


October 31, 2013

Searchable database of free vector icons. Includes icon fonts and photoshop plugin.


October 30, 2013

Javascript/svg library that promises to make working with your SVG assets as easy as jQuery makes working with the DOM. Rich animation and event handling.


October 28, 2013

Turns mailto links on your site into nice feedback forms with a simple javascript include. Free for up to 50 emails/mo.


October 17, 2013

Similar to the previous post Typewolf, Type.io is a nice showcase of web typography with typefaces identified and tagged.


October 15, 2013

Enter a URL and preview that page with the typeface of your choice to test how the typeface looks on-the-fly.

Empty States

October 09, 2013

Nice examples of ui’s where the user will be creating things, but hasn’t created anything yet. AKA, the empty state.


October 08, 2013

Browse and select icons to download them or make a font. You may import SVG images or fonts too.


October 02, 2013

Chosen is a slick jquery plugin that turns long, unwieldy select boxes much more user-friendly inputs with searching/filtering capability.


September 30, 2013

Colourcode is a unique, interactive color chooser to help you explore color combinations to set a color palette.


September 24, 2013

Experiment with type choices in the browser and render production-ready html & css or share by URL.


September 23, 2013

A big repository of Javscript frameworks, plugins, and tools neatly organized for your searching and browsing pleasure.


September 16, 2013

Collection of jQuery interface plugins for navigation, scrolling, tooltips, selectors, zoom, various form inputs, and more.

Nivo Lightbox

September 11, 2013

jQuery based lightbox with minimal styling. Resposive and retina-ready.


September 11, 2013

Kube is a “professional” css framework focused on flexible/responsive grid and beautiful typography.


September 10, 2013

Very nice library of css animations hooked into jquery for stacking/triggering. I especially dig the blur.


September 04, 2013

Generate your own icon font from a big library of icons, or better yet upload your own vectors. Free forever.

Create CSS3

September 03, 2013

Handy playground for toying with all sorts of CSS3 properties: transforms (persective, rotate, translate, etc), transitions/animations, and all the usual suspects.

Emmet LiveStyle

August 27, 2013

Emmet LiveStyle is a plugin for live bi-directional (editor↔browser) CSS editing. Works with Sublime Text and Chrome/Safari.

Page Transitions

August 27, 2013

A showcase collection of various page transition effects using CSS animations–made by codrops.

The iOS Design Cheat Sheet

August 23, 2013

Quick rundown of resolutions & display specifications, app icons, ui elements, typography and more on iOS 7.


August 23, 2013

To ensure your type layout contains between 45 and 75 characters per line FlowType.JS changes the font-size—and subsequently the line-height—based on a specific element’s width. This allows for a perfect character count per line at any screen width.


August 22, 2013

Combine rss feeds from a handfull of design-y inspiration type sites to make a new feed of cool stuff.


August 22, 2013

A CSS buttons library built with SASS & Compass. Lot of nice options with demos.


August 22, 2013

A boilerplate for responsive web design projects based on Sass and Compass. Strong emphasis on typography and vertical rhythm.


August 22, 2013

A nicely designed tool for texting regex patterns against text.


August 22, 2013

A cms-ish content editor on PHP, with no database required. Just apply a class and make your content editable.


August 16, 2013

A repository of tagged code snippets & ui kits for web designers. Some pay, some free to download.


August 16, 2013

Topcoat is a speedy set of css components like buttons, inputs, lists and icons.


August 16, 2013

uCSS crawls your website to find unused and duplicate css selectors. Written for node, executed from the command line (or as a library).


August 12, 2013

Kraken is an image optimizer that you can integrate with your product to make sure you’re serving up super fast JPG/PNG/GIF/SVG files.


August 08, 2013

Jekyll is a static site generator that is “blog aware.” It’s pretty much the bomb, and what this site is built on.


August 08, 2013

Solidify lets you quickly prototype interfaces by uploading images/comps and creating hotspots that link to other images. Allows test users to step through a prototype of your app without beuilding it all out.