Good Web Design
Curated and tagged landing page inspiration.
Curated and tagged landing page inspiration.
“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.”
Daily color inspiration picked from popular Dribbble shots.
Httpster is an inspiration resource and showcase of “totally rocking” websites made by people from all over the world.
A simple CMS for Jekyll and Hugo sites; integrates with GitHub, Gitlab and Bitbucket.
A list of everything that could go in the <head> of your document.
A headless CMS with an API at its core.
A WCAG 2.0 Level AA accessible modal window plugin with customizable CSS/SASS options.
Alfred-like interface for Sketch to run commands and navigate the interface directly for the keyboard.
Quick reference for Bootstrap 4. For those rare instances where I encounter it.
Digital archive dedicated to the Italian graphic design. Viva l’Italia!
Examples of good email copy from a bunch of different companies.
Like a spreadsheet crossed with a database. Keep anything organized, cross-referenced, and quickly accessible with mobile apps. Plus a promising looking API.
Backgrounds from animated films. Beautiful stuff.
Quick suggestions for overcoming a creative block.
Creator is a drag-&-drop prototyping tool for creating apps using Ionic Platform.
Flexible web typography starter kit. Baseline grid, vertical rhythm, modular scale, sass, etc.
Javascript CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets.
Categorized UI inspiration hand-picked from Dribbble shots.
Craft (by Invision) is a plugin suite for Sketch and Photoshop that lets you design with real data in mind.
A video gallery for mobile onboarding design inspiration.
Yet another static site cms, with some nice looking additions like Stripe, Mandrill, Zapier, etc.
Big document of all HTML5 elements showing their default styling in whatever browser you happen to be using.
Dead simple responsive images for Jekyll.
Monitor the accessibility of your websites and protect against accessibility errors creeping into your codebase.
My personal holy grail of CMSs: Jekyll static site, hosted on github, WYSIWYG editable by clients.
Simple, CSS utility classes for advanced typographic features. Falls back gracefully through feature queries.
A very promising looking multi-platform markdown editor.
A Node-only Sass linter for both sass and scss syntax. Includes grunt/gulp/atom integrations.
HTML5 code and demos for invoking different touch keyboards depending on input type (email, phone, address, etc).
Gallery showcasing work based on the Material Design guidelines.
Comm(ent|it) uses the Github API and Jekyll to help you store visitors comments directly in your repository.
Take a bitmap file (JPG, PNG, PSD, etc) and place it inside Sketch, preserving the ability to updated it outside of Sketch.
Sell digital anything from any server: Dropbox, Amazon S3, Shared hosting, your server… just link to the file.
Google Web Font inspiration in HTML & CSS.
Kids draw a monster, then professional illustrators make them come to life.
Public archive of typography indexed by typeface, format, and industry.
A rich text editor from the team at Basecamp. Promises sophisticated document model, support for embedded attachments, and terse, consistent HTML output.
Sass framework (a la Jeet) for flexible, clear, and semantic website layouts.
Big, well-categorized repository of ui, icon, form, device, etc resources for Sketch projects.
Big gallery of seamless patterns by shared designers to use freely in your designs.
Some essential plugins for Sketch brought to you by the Design+Code guy.
Very small (2kb) javascript script to copy text to clipboard. No flash, no framework, no nonsense.
Web design inspiration showcasing anything but web design.
This one doesn’t quite fit the mold but it’s too awesome not to share. City guides, curated by designers/design studios.
A Sketch plugin that lets you save and load colors into the color picker. So useful it should really just be built in.
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.
Notable lets you take any interface screenshot, sketch, or wireframe and exchange notes/feedback details with your team.
Import photoshop/sketch files, lay out your states, instantly animate between them, and share. Without coding.
Looks to be a more robust (and supported) version of Gridspree (formerly Brace Data). Use Google Sheets as CMS.
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.
Ostensibly a subscription moodboard creation service. Also good for just browsing beautiful images.
Mailchimp’s writing style guide including secions on voice/tone, grammer/mechanics, and writing for various scenarios.
A typographic pre-processor that uses zero client-side JavaScript and gives you hanging punctuation, soft hyphen, insertion, optical margin outdents, etc.
Advanced search tool (category, usage, etc) for Google Fonts.
Five pre-tested templates that work with any mailing service brought to you by Litmus.
Chrome SEO Toolbar and PageRank checker.
Nice gallery of landing pages focused primarily around apps and products.
Curated collection of beautiful colors, updated daily.
A Javascript library to create physics-based CSS animations.
A hand-picked directory of free resources for designers.
Free stock photos licensed under Creative Commons Zero (personal or commercial use).
Repository of resources for free stock photography.
If you’re into backwards compatibility then Grunticon is useful tool to generate fallbacks, style, and animate your SVGs.
Checklist to help launch a UX project, to help ensure you don’t forget anything important.
A simple extension to make link-blogging to a GitHub-hosted Jekyll blog easy.
Featherlight is a very lightweight jQuery lightbox plugin, about 4kB in total.
GUI front-end for SVGO, a nodejs-based tool for optimizing SVG vector graphics files.
Comparison shopping for 832 Top Level Domains. Also helpful for finding a unique TLD.
Touch enabled jQuery plugin that lets you create a responsive carousel slider. Very flexible.
Another jQuery carousel with a lot of features. Because you never know when you’ll need one of these.
This test will analyze a URL and report if the page has a mobile-friendly design.
A set of plugins for responsive tables by the Filament group.
Simple typography boilerplate for “your minimal website or blog project.”
Big repository of designer’s websites and portfolios.
An opinionated styleguide for writing sane, maintainable and scalable Sass by Hugo.
A review of the best website designs spotted in 2014 – collected and curated by zitrusfrisch.
Must-See Documentaries for Designers & Artists with links to the relevant streaming service or store.
Boilerplate for building custom CSS frameworks. Simple architecture written in SCSS using BEM notation.
Live Markdown previews for any text editor.
A nice site that reports incompatibilities between different Sass engines. Also just a great list of cool stuff Sass does.
Big list of prototyping tools comparing platforms, output, gestures, transitions, design, and pricing.
Simple, responsive, touch-aware javascript photo gallery with zero dependecies.
Enter a URL and get a visualizations of all sorts of things including rules, selectors, declarations, properties, colors, media queries, font-families and more.
A thorough and well organized respository of web design resources. Blogs, news, inspiration, learing, tutorials, plugins, architectures, tools, resources, community, etc.
Making a favicon that works nicely across all platform is a fool’s errand. This site makes a resonable attempt at it.
Useful reference for physical width/hight, CSS width/height, pixel ratio, physical ppi, and CSS ppi of various popular mobile and connected devices.
Chrome extension for analyzing, consolidating, refactoring, and gawking at “the 37 shades of blue your site somehow ended up with.”
Find a font combo by choosing one typeface and receiving suggestions and previews for accompanying typefaces.
Quick preview of all available cursor values in CSS.
Quick and easy random color pallet generator.
Alternative to Brace (Formspree) Forms. Create your form, put their url in the action, collect information. No iframes, JavaScript embeds, or CSS overrides.
Create native iOS and Android prototypes with sophisticated animations and interactions without the code.
Sass mixins to establish a typographic system with modular scale and vertical rhythm. Based on the Gridlover app.
Use Google Spreadsheets as your CMS. Display your spreadsheet data however you like right on your static site.
Hand-picked tales from Aesop’s Fables with hand-picked type from Google Fonts.
Easily navigable gallery of beautiful color gradients. Because remember kids: not everything has to be flat.
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.
Quick cheat-sheet/reference for common (and uncommon) html entites. (™, ®, ©, etc)
Interactive tool to establish a typographic system with modular scale and vertical rhythm.
CSS shorthand generator take verbose declaration blocks and converts them into more concise shorthand declarations.
Link existing screen designs (PNGs) to make deceptively realistic iOS and Android app protoypes.
DomFlags chrome extension offers a handy way to create keyboard shortcuts to DOM elements while you’re working in the inspector.
Illustrator plugin that places your artwork on images of real objects. Provides real-world context for branding, etc.
Another file-based cms. More expensive than Kirby, but a solid looking alternative.
File-based (no database) cms that promises easy setup, use, and flexability. Possible alternative to static-site generator for client sites.
A showcase of the best typefaces from the Google web fonts directory.
Collection of style guides for brands big and small around the web.
Nice collection of screenshots of interesting/innovative interface component and layout patterns.
When flexbox doesn’t quite cut it, matchHeight makes the height of all selected elements exactly equal.
Another service to transform static designs into fully interactive prototypes for web, iOS & Android. More feature rich than Marvel IMO.
Atom package for editing CSS Bezier curves directly in Atom.
Curated list of color pallets inspired by various pop-culturey and everyday items.
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.
Jeet is a pretty advanced grid system for Sass and Stylus. Personally it looks like it could replace my beloved Bourbon / Neat combo.
Turn sketches, wireframes, mockups, etc into interactive mobile and web prototypes; synced real-time from Dropbox. Also: Free.
247 bytes of css to boilerplate responsive images, tables, preformatted text, canvas, and iframes.
See and hear a 5-minute video of a real person using your site. Fast and free.
Another static site generator solving the problem uniquely by letting you string together a series of plugins generate your production files.
Jquery plugin allows you to control things like position, animation, parallax, infinite/ajax loading, based on the user scroll position.
Minimal, customizable boilerplate typography stylesheet that plays nice with normalize.css. Also, has a Sass version.
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.
Paste your copy in to Hemingway and it highlights long, complex sentences and common errors. Promises to make your writing bold and clear.
Type Finder asks you a series of questions to help you select a reputable typefaces for your project.
A nice starter set of sass mixins for things like triangles, truncate text, animation, alerts, resizing sprites, tooltips and more.
Big list of tools for Sass/Compass projects. Named, described, tagged, and searchable.
Enter your site’s url and get a brief report on how well you’re following Google’s webmaster guidelines.
Handy tool for figuring out the right equation for electing elements with nth-child or nth-of-type pseudo-selectors.
A library showcasing unique and delightful animations in iOS apps.
Kimono allows you to turn websites into structured APIs by identifiying common/repeating data on the page, in your browser.
A script for grabbing the color palette from an image. Uses Javascript and the canvas tag to make it happen.
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.
A simple CSS tooltip made with Sass. Choose direction, color, and other visual styling.
A jQuery plugin for extracting dominant colors from images and applying it to its parent.
This is what every HTML5 form element looks like on your current operating system and browser.
Quickly visualize page headers/type on various (musical) scales.
Search for icons from Font Awesome, Glyphicons, and Ionicons in one spot.
Bitters is a dash of predefined style for Bourbon stylesheets. Seems like a nice start for a boilerplate Bourbon project.
Searchable database of free vector icons. Includes icon fonts and photoshop plugin.
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.
jQuery plug-in for simple modals that with CSS3 transitions/effects.
Turns mailto links on your site into nice feedback forms with a simple javascript include. Free for up to 50 emails/mo.
Exceptionally styled buttons with hover and click effects.
Similar to the previous post Typewolf, Type.io is a nice showcase of web typography with typefaces identified and tagged.
Enter a URL and preview that page with the typeface of your choice to test how the typeface looks on-the-fly.
A seriously obsessive cheat sheet for favicon sizes and types.
Awesomely named gallery of nice web typography examples, with the fonts identified for useful reference.
Designerboard is a nifty showvase of Behance, Dribbble and DesignerNews posts.
Nice examples of ui’s where the user will be creating things, but hasn’t created anything yet. AKA, the empty state.
Browse and select icons to download them or make a font. You may import SVG images or fonts too.
In addition to usual minification techniques CSSO can perform structural optimization of CSS files, resulting in small file sizes.
Chosen is a slick jquery plugin that turns long, unwieldy select boxes much more user-friendly inputs with searching/filtering capability.
Colourcode is a unique, interactive color chooser to help you explore color combinations to set a color palette.
Trendlist is a showcase of trendy graphic design categorized by trend, country, and studio.
Some excellent examples of common CSS layout issues elegantly solved with flexbox.
Experiment with type choices in the browser and render production-ready html & css or share by URL.
A big repository of Javscript frameworks, plugins, and tools neatly organized for your searching and browsing pleasure.
Collection of jQuery interface plugins for navigation, scrolling, tooltips, selectors, zoom, various form inputs, and more.
A “tidy” repository of 700+ jquery plugins. Nicely categorized with links to demos and their authors.
jQuery based lightbox with minimal styling. Resposive and retina-ready.
Kube is a “professional” css framework focused on flexible/responsive grid and beautiful typography.
Very nice library of css animations hooked into jquery for stacking/triggering. I especially dig the blur.
Big list of popular devices, their screen size, physical size, ppi, pixel density and aspect ratio.
Generate your own icon font from a big library of icons, or better yet upload your own vectors. Free forever.
Jekyll Picture Tag is an open-source plugin that enables a liquid tag that adds responsive images to your Jekyll project.
Handy playground for toying with all sorts of CSS3 properties: transforms (persective, rotate, translate, etc), transitions/animations, and all the usual suspects.
Emmet LiveStyle is a plugin for live bi-directional (editor↔browser) CSS editing. Works with Sublime Text and Chrome/Safari.
A showcase collection of various page transition effects using CSS animations–made by codrops.
This chrome extension analyzes any web page for violations of best practices and helps you discover problem areas in your website.
Quick rundown of resolutions & display specifications, app icons, ui elements, typography and more on iOS 7.
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.
Nice gallery of old-timey, retro, hand crafted typography.
Combine rss feeds from a handfull of design-y inspiration type sites to make a new feed of cool stuff.
A CSS buttons library built with SASS & Compass. Lot of nice options with demos.
A boilerplate for responsive web design projects based on Sass and Compass. Strong emphasis on typography and vertical rhythm.
A nicely designed tool for texting regex patterns against text.
A cms-ish content editor on PHP, with no database required. Just apply a class and make your content editable.
A repository of tagged code snippets & ui kits for web designers. Some pay, some free to download.
Topcoat is a speedy set of css components like buttons, inputs, lists and icons.
uCSS crawls your website to find unused and duplicate css selectors. Written for node, executed from the command line (or as a library).
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.
A showcase of well-designed websites to get the creative juices flowing.
Enter your URL and get a quick screenshot-able look at your site on a variety of apple devices.
Responsive.is quickly lets you preview your webite at multiple resolutions.
Jekyll is a static site generator that is “blog aware.” It’s pretty much the bomb, and what this site is built on.
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.
Handy checklist for catching usability problems prior to user testing.