Design Resources
Last updated
Last updated
👋 Hi, I’m ! This information was originally compiled by . 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!
Books on accessibility — listed in the “Books” category 👇
Accessibility
History
Independent practice, consulting, freelancing
Process and mindset
User experience and interaction design
Human computer interaction
Information architecture
User research
UX patterns and components
Visual design
— WCAG 2.0 compliance checklist for developers, driven by priority
— designing accessibly for artifacts that aren't apps or websites is important, too!
— best practices for designers, engineers, PMs, QA, and editorial staff (with sources to read more; great to send to coworkers on different teams)
— hub of accessibility resources and principles by government office 18F
— open source list of considerations & challenges to help build empathy
— practices for color, sound, motion, layout, copy, hierarchy, focus, and implementation
— seven clear principles to follow to put people first, by leading experts The Paciello Group
— Microsoft's guidelines for designing accessible and inclusive experiences, including a detailed manual (.pdf) with awesome visualizations, and activity cards for considerations & challenges while brainstorming
— [paid] — practical course with code examples to meet Section 508 and/or WCAG 2.0 requirements for government/education projects
— [free] — practical course focused on front-end design and development regarding markup and visual styling
— the W3C’s “Web Content Accessibility Guidelines” web standards specification
— Americans with Disabilities Act prohibits discrimination against people with disabilities
— 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
— Accessibility for Ontarians with Disabilities Act, enacted for the province to become “accessible for people with disabilities by 2025”
— browser-based semantic analysis to report a11y and usability issues errors in marketing emails
— listed in the "Colors" category 👇
— lists current accessibility support status of HTML5 features across major browsers
— automated accessibility testing on the command line for programmatic accessibility reporting
— Khan Academy's jQuery-based semantic analysis that can be inserted into a page or run as a bookmarklet
— single-serving Tumblr showcasing small victories in accessible web design and development
— a curated list of awesome accessibility tools, articles and resources on GitHub
, 2014 — practical advice and examples to build accessible web products without sacrificing design or innovation
, 2016 — real-world techniques and strategies to build and prototype accessible interfaces
, 1983 — the unrivaled college textbook authority on the history of graphic design, mostly in America and Europe
, 2012 — no bullshit lessons on selling yourself and working with others
, 2016 — brief and invaluable reference on value-based pricing
, 1992 – classic international bestseller on the creative process
, 2012 — sometimes insightful, sometimes insufferable; a rumination on making things for other people
, 2016 — a balanced book of details, examples, checklists, and scripts to perform your own famed Google Ventures design sprint
, 2013 — straight-forward examples on the small details that exist inside & around a product’s features
, 2013 — straight-forward examples on the small details that exist inside & around a product’s features
, 2013 — straight-forward examples on the small details that exist inside & around a product’s features
, 2013 — breaks down the huge topic of design research in a digestible, approachable, organized, and humorous way
— top of the class brief books for people who make websites
— innovative and design-y adult and children’s books, based in San Francisco
— large catalog of small-press books and zines on graphic design, culture, criticism, art, and more
— high-quality books on graphic design, art, and culture
— hundreds of new books published yearly from leading researchers on technology, art, and science
– user experience books, training, workshops, seminars, and experts
— affordable, practical books from digital design practitioners
— debug & align objects to an 8 or 16px grid
— identify and sample webfonts — 3 samples for free, or unlimited samples for $5/year subscription. available as a bookmarklet or Chrome extension
— inspect a webfont’s name, family, weight, size, style, color, line height, and source (if hosted via Google Fonts or Typekit)
— powerful tools to inspect and modify CSS animations
— test responsiveness by using popular viewport sizes or creating your own presets
— it’s inside the Device Mode — no additional browser extension required!
— analyze resource requests and emulate mobile experiences
— best Photoshop brushes for drawing and adding small texture (though they are not of much use without a pressure-sensitive tablet)
— 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
— Photoshop brushes made exclusively for digital lettering, with
— gorgeous Photoshop brushes, niched mostly toward organic shapes and textures
— really pretty default colors for prototyping
— interactive color palette generator
— 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
— Adobe color palette resource
— interactive color palette generator
— macOS and iOS colorpicker app, allows you to save custom palettes
— if you wanna nerd out
— accessibility-friendly random color generator for text & background combinations
— open source macOS color blindness simulator
— open source macOS eye-dropper tool for text/bg accessibility testing, shows fail/AA Large/AA/AAA results
— [paid] — minimal & gorgeous macOS menubar eye-dropper tool, shows fail/AA Large/AA/AAA results
— input up to 12 hex codes to test entire color systems for accessible contrast
— input text/bg hex codes for accessible contrast testing
— Google Chrome extension to instantly test web pages for different types of color vision deficiency
— hundreds of free webfonts hosted via Google or self-hosted, downloadable via with individual licenses
— 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!)
— 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
— incredibly high-quality fonts by select independent foundries
— thousands of fonts in the “original creative marketplace”
— [free & paid] — emoji set with free & premium licensing options available; downloadable as pngs, vectors, and font files
— [free] — every emoji, ever
— [free] — 900+ open source icons from Google’s gorgeous design language
— [free & paid] — available for use with Creative Commons attribution or available to purchase without attribution for fair prices; best quality selection in one place
— [paid] — super high-quality icon fonts categorized by topic and style
— [free] — iOS emoji faces recreated in vector as layered PSDs or Sketch files
— killer packaging and brand design gallery
— brand identity case studies
— collection of shipping, manufacturing, transport, and logistics logos
— art, illustration, design, photography interviews and features
— illustration collective
— curated channel of the best motion graphics, animation, and video
— restaurant-specific print menu design case studies
— photography, print design, cool stuff gallery, Pinterest style
— print design case studies
— cutting-edge and old school fringe aesthetic case studies
— creative inspiration worldwide
— print, brand, interior, industrial design features
— graphic design trends for the designer’s designer
— commentary, research, and work showcases by women in type design
— highest quality public archive of typography indexed by typeface, format, and industry
— reviews and commentary on type books and typefaces
— curated examples of typography on the web with premium guides and resources
— mobile design patterns and components in video form
— UI design components gallery populated from Dribbble posts
— empty state designs
— delightful, thoughtful UX components that make a big difference
— mobile design patterns and components
— website components gallery
— UI design components gallery and newsletter, largely culled from Dribbble
— website design and interactive components gallery
— website design gallery. sort by category and style
— website design gallery. sort by category and color
— website design gallery featuring only one-page websites
— website design gallery for digital product marketing and ecommerce sites
— email design gallery
— website design gallery with the tightest curation. sort by category, style, subject, or CMS. includes starred favorites
— website design gallery. sort by category and color. includes custom curated collections
— website design gallery, updated sporadically, online since 2005(!)
— [paid] — instant offline access to 150+ API documentation sets.
— [paid] — preview, sync, install, and manage fonts on your Mac or Dropbox/Google Drive
— [free] — sgenerate lorem ipsum lightning fast (can automatically wrap in p tags, too)
— [free] — weirdest name, most straightforward and lightweight way to capture parts of your screen as a gif (also available for Windows)
— [free] — diverse hands holding mobile devices
— [free] — physical product mockups & templates
— [paid] — any product mockup you could ever think of
— [free & paid] — physical product mockups & templates
— included with Adobe CC subscription, for creating wireframes and protoyping interactivity
— prototyping tool for mobile or desktop interactions or animations
— the first real-time collaborative interface design tool
— prototyping tool built on framer.js for prototyping mobile and desktop apps
— collaborative click-through prototyping tool for web and mobile
— simple click-through prototyping tool for web and mobile apps
— motion design prototyping tool for mobile and web applications
👆
— 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
— well-made and well-priced assets that skew toward retro/vintage
— cool textures and imagery from the original online creative marketplace
— [free & paid] — new sets emailed weekly, premium plans available for more photos and unlimited access
— [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
— [free] — similar to unsplash, some are licensed in public domain, some require Creative Commons attribution
— [paid] — stock photos, a little higher quality than iStock. registered account includes unwatermarked hi-res comps
— [paid] — high quality, stylish lifestyle paid stock photos (watermarked comps)
— [free] — the first of the hip and gorgeous free with no strings attached stock photo sites
— [free] — photos of women in color in tech settings since every other stock photo site fails at this hardcore
— users record their screen, face, voice, and touches while using your site/app/prototype/wireframe
— for quick 5-minute qualitative, navigation-based, or hot-spot based remote tests for static images or a series of images
— 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