Design Resources

👋 Hi, I’m messy.design! This information was originally compiled by @skullface. I am just here to spread that knowledge and add what I can so that the most comprehensive list is avaliable to my project leads and teams. My contributions include UX Strategy, HCI and IA resources. 📚

💫 If you would like to access this information on the web, @skullface has created a fantastic online design resource here, which is reproduced in full below!

Table of contents

Accessibility resources

Checklists

Guidelines

Industry leaders, educators, and consultants

Online courses

Pattern/component libraries

Requirements and standards

  • 🌐 WCAG 2.0 — the W3C’s “Web Content Accessibility Guidelines” web standards specification

  • 🇺🇸 ADA — Americans with Disabilities Act prohibits discrimination against people with disabilities

  • 🇺🇸 Section 508 — amendment to the Workforce Rehabilitation Act federally mandating all tech developed, procured, maintained, or used by the federal government be accessible to persons with disabilities

  • 🇨🇦 AODA — Accessibility for Ontarians with Disabilities Act, enacted for the province to become “accessible for people with disabilities by 2025”

Testing tools and development references

  • Accessible-email.org — browser-based semantic analysis to report a11y and usability issues errors in marketing emails

  • Colors palettes & contrast testing tools — listed in the "Colors" category 👇

  • HTML5 Accessibility — lists current accessibility support status of HTML5 features across major browsers

  • pa11y — automated accessibility testing on the command line for programmatic accessibility reporting

  • tota11y — Khan Academy's jQuery-based semantic analysis that can be inserted into a page or run as a bookmarklet

Further reading

  • Accessibility Wins — single-serving Tumblr showcasing small victories in accessible web design and development

  • Awesome Accessibility — a curated list of awesome accessibility tools, articles and resources on GitHub

  • Books on accessibility — listed in the “Books” category 👇

Books and zines

Individual publications

Accessibility

History

Independent practice, consulting, freelancing

Process and mindset

User experience and interaction design

Human computer interaction

Information architecture

User research

Publishers and distributors

  • A Book Apart — top of the class brief books for people who make websites

  • Chronicle Books — innovative and design-y adult and children’s books, based in San Francisco

  • Draw Down — large catalog of small-press books and zines on graphic design, culture, criticism, art, and more

  • Gestalten — high-quality books on graphic design, art, and culture

  • MIT Press — hundreds of new books published yearly from leading researchers on technology, art, and science

  • Rosenfeld Media – user experience books, training, workshops, seminars, and experts

  • Smashing Magazine — affordable, practical books from digital design practitioners

Browser features

Google Chrome extensions and bookmarklets

  • Tachyons X-ray — debug & align objects to an 8 or 16px grid

  • Type Sample — identify and sample webfonts — 3 samples for free, or unlimited samples for $5/year subscription. available as a bookmarklet or Chrome extension

  • WhatFont? — inspect a webfont’s name, family, weight, size, style, color, line height, and source (if hosted via Google Fonts or Typekit)

Google Chrome DevTools

Brushes

  • Kyle T. Webster — best Photoshop brushes for drawing and adding small texture (though they are not of much use without a pressure-sensitive tablet)

  • RetroSupply — Photoshop and Illustrator brushes for multiple uses, including adding large (2000px) texture. recommended packs: Standard Issue Brush & Texture Bundle, Standard Issue Subtle Brush Kit, VectorFuzz

  • Shauna Lynn Panczyszyn’s "Hand Lettering Toolbox" — Photoshop brushes made exclusively for digital lettering, with more specific sets here

  • Syd Weiler — gorgeous Photoshop brushes, niched mostly toward organic shapes and textures

Colors and color palettes

  • clrs.cc — really pretty default colors for prototyping

  • Coolors — interactive color palette generator

  • Google Material design colors — choose from all the hues in Google’s material design palette, see a tint and shade of each, and test against white & black text for accessibility

  • Kuler — Adobe color palette resource

  • Paletteable — interactive color palette generator

  • Sip — macOS and iOS colorpicker app, allows you to save custom palettes

  • Wikipedia’s category for color shades — if you wanna nerd out

Accessible color palettes

  • Randoma11y — accessibility-friendly random color generator for text & background combinations

Accessibility testing tools

  • Color Oracle — open source macOS color blindness simulator

  • Contrast Analyzer — open source macOS eye-dropper tool for text/bg accessibility testing, shows fail/AA Large/AA/AAA results

  • Contrast — [paid] — minimal & gorgeous macOS menubar eye-dropper tool, shows fail/AA Large/AA/AAA results

  • Hex Naw — input up to 12 hex codes to test entire color systems for accessible contrast

  • Online contrast checker — input text/bg hex codes for accessible contrast testing

  • Spectrum — Google Chrome extension to instantly test web pages for different types of color vision deficiency

Fonts

Directories and marketplaces

  • Google Fonts — hundreds of free webfonts hosted via Google or self-hosted, downloadable via GitHub repo with individual licenses

  • MyFonts — thousands of fonts from all kinds of foundries, includes some trial fonts & free families. (good for searching and testing, but it’s better to buy through the foundries themselves!)

  • TypeKit — included with Adobe CC subscription, some fonts & families are only available for desktop or web use. larger selection available for individual purchase through Typekit Marketplace

  • Type Network — incredibly high-quality fonts by select independent foundries

  • YouWorkForThem — thousands of fonts in the “original creative marketplace”

Individual foundries

Icons and emoji

  • EmojiOne — [free & paid] — emoji set with free & premium licensing options available; downloadable as pngs, vectors, and font files

  • Emojipedia — [free] — every emoji, ever

  • Google Material Design icons — [free] — 900+ open source icons from Google’s gorgeous design language

  • The Noun Project — [free & paid] — available for use with Creative Commons attribution or available to purchase without attribution for fair prices; best quality selection in one place

  • SymbolSet — [paid] — super high-quality icon fonts categorized by topic and style

  • Vector Emoji — [free] — iOS emoji faces recreated in vector as layered PSDs or Sketch files

Inspiration and criticism websites

Brand identity

  • BP & O — killer packaging and brand design gallery

  • Brand New — brand identity case studies

  • Shipcom — collection of shipping, manufacturing, transport, and logistics logos

Illustration and art

  • Boooooooom — art, illustration, design, photography interviews and features

  • Jacky Winter — illustration collective

Motion

  • Wine After Coffee — curated channel of the best motion graphics, animation, and video

Print, layout, packaging, art direction

  • Art of the Menu — restaurant-specific print menu design case studies

  • Designspiration — photography, print design, cool stuff gallery, Pinterest style

  • FPO — print design case studies

  • Grafik — cutting-edge and old school fringe aesthetic case studies

  • It’s Nice That — creative inspiration worldwide

  • Mind Sparkle Mag — print, brand, interior, industrial design features

  • Trendlist — graphic design trends for the designer’s designer

Typography

  • Alphabettes — commentary, research, and work showcases by women in type design

  • Fonts In Use — highest quality public archive of typography indexed by typeface, format, and industry

  • Typographica — reviews and commentary on type books and typefaces

  • Type Wolf — curated examples of typography on the web with premium guides and resources

Web, mobile, product

UX patterns and components

  • Capptivate — mobile design patterns and components in video form

  • Collect UI — UI design components gallery populated from Dribbble posts

  • Empty Stat.es — empty state designs

  • Little Big Details — delightful, thoughtful UX components that make a big difference

  • PTTRNS — mobile design patterns and components

  • Pattern Tap — website components gallery

  • UI Movement — UI design components gallery and newsletter, largely culled from Dribbble

  • Unmatched Style — website design and interactive components gallery

Visual design

  • HTTPSTER — website design gallery. sort by category and style

  • Lapa — website design gallery. sort by category and color

  • One Page Love — website design gallery featuring only one-page websites

  • Pages.xyz — website design gallery for digital product marketing and ecommerce sites

  • Really Good Emails — email design gallery

  • Siteinspire — website design gallery with the tightest curation. sort by category, style, subject, or CMS. includes starred favorites

  • Site See — website design gallery. sort by category and color. includes custom curated collections

  • Web Creme — website design gallery, updated sporadically, online since 2005(!)

macOS apps

Development

  • Dash — [paid] — instant offline access to 150+ API documentation sets.

Font management

  • RightFont — [paid] — preview, sync, install, and manage fonts on your Mac or Dropbox/Google Drive

Menubar apps

  • LittleIpsum — [free] — sgenerate lorem ipsum lightning fast (can automatically wrap in p tags, too)

  • LICEcap — [free] — weirdest name, most straightforward and lightweight way to capture parts of your screen as a gif (also available for Windows)

Mockups

  • Facebook Design — [free] — diverse hands holding mobile devices

  • Graphicburger — [free] — physical product mockups & templates

  • GraphicRiver — [paid] — any product mockup you could ever think of

  • Pixeden — [free & paid] — physical product mockups & templates

Prototyping tools

Stock graphics

  • CreativeMarket — huge marketplace for design assets of varying qualities (including fonts and stock photos), great for when you need to recreate a specific style or work in a particular niche

  • RetroSupply — well-made and well-priced assets that skew toward retro/vintage

  • YouWorkForThem — cool textures and imagery from the original online creative marketplace

Stock photography

  • Death to the Stock Photo — [free & paid] — new sets emailed weekly, premium plans available for more photos and unlimited access

  • Gratisography — [free] — photos by one photographer requiring no attribution, most are weird but some are chill to save in a folder for later since they’re free

  • Magdeline — [free] — similar to unsplash, some are licensed in public domain, some require Creative Commons attribution

  • Masterfile — [paid] — stock photos, a little higher quality than iStock. registered account includes unwatermarked hi-res comps

  • Stocksy — [paid] — high quality, stylish lifestyle paid stock photos (watermarked comps)

  • Unsplash — [free] — the first of the hip and gorgeous free with no strings attached stock photo sites

  • Women of Color in Tech — [free] — photos of women in color in tech settings since every other stock photo site fails at this hardcore

User testing and interactive feedback tools

  • Lookback — users record their screen, face, voice, and touches while using your site/app/prototype/wireframe

  • UsabilityHub — for quick 5-minute qualitative, navigation-based, or hot-spot based remote tests for static images or a series of images

  • UserTesting — finds participants for you, runs a usability test, and records and stores videos of real people speaking their thoughts as they use your site/app/prototype/wireframe

Last updated