Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/skullface/design-resources

📐 Select websites, tools, assets, and readings for working in and learning about design.
https://github.com/skullface/design-resources

design design-assets design-resource

Last synced: about 1 month ago
JSON representation

📐 Select websites, tools, assets, and readings for working in and learning about design.

Awesome Lists containing this project

README 

        
# [Design Resources](http://designresources.party)



👋 Hi, I’m [@skullface](http://twitter.com/skullface)!



✨ I used to keep this info as a Google Doc to share with my most trusted coworkers and friends, but I thought the info would be better served in the open.



⭐️ These lists and the contents within reflect _my_ opinions. I’m aiming for quality over quantity — only resources I would recommend. Suggestions, issues, and PRs are welcome 💖, but just because a resource exists doesn’t necessarily mean I’d recommend it.



💫 [Website content](http://designresources.party) reproduced in full below!



---



## Table of contents

* [Accessibility resources](#accessibility-resources)

  * [Checklists](#checklists)

  * [Guidelines](#guidelines)

  * [Industry leaders, educators, and consultants](#industry-leaders-educators-and-consultants)

  * [Online courses](#online-courses)

  * [Pattern/component libraries](#patterncomponent-libraries)

  * [Requirements and standards](#requirements-and-standards)

  * [Testing tools and development references](#testing-tools-and-development-references)

  * [Further reading](#further-reading)

* [Books and zines](#books-and-zines)

  * [Individual publications](#individual-publications)

    * [Accessibility](#accessibility)

    * [History](#history)

    * [Independent practice, consulting, freelancing](#independent-practice-consulting-freelancing)

    * [Process and mindset](#process-and-mindset)

    * [User experience and interaction design](#user-experience-and-interaction-design)

    * [User research](#user-research)

  * [Publishers and distributors](#publishers-and-distributors)

* [Browser features](#browser-features)

  * [Google Chrome extensions and bookmarklets](#google-chrome-extensions-and-bookmarklets)

  * [Google Chrome DevTools](#google-chrome-devtools)

* [Brushes](#brushes)

* [Colors and color palettes](#colors-and-color-palettes)

  * [Accessible color palettes](#accessible-color-palettes)

  * [Accessibility testing tools](#accessibility-testing-tools)

* [Fonts](#fonts)

  * [Directories and marketplaces](#directories-and-marketplaces)

  * [Individual foundries](#individual-foundries)

* [Icons and emoji](#icons-and-emoji)

* [Inspiration and criticism websites](#inspiration-and-criticism-websites)

  * [Brand identity](#brand-identity)

  * [Illustration and art](#illustration-and-art)

  * [Print, layout, packaging, art direction](#print-layout-packaging-art-direction)

  * [Motion](#motion)

  * [Typography](#typography)

  * [Web, mobile, product](#web-mobile-product)

    * [UX patterns and components](#ux-patterns-and-components)

    * [Visual design](#visual-design)

* [macOS apps](#macos-apps)

  * [Development](#development)

  * [Font management](#font-management)

  * [Menubar apps](#menubar-apps)

* [Mockups](#mockups)

* [Prototyping tools](#prototyping-tools)

* [Stock graphics](#stock-graphics)

* [Stock photography](#stock-photography)

* [User testing and interactive feedback tools](#user-testing-and-interactive-feedback-tools)



---



## Accessibility resources

### Checklists

* [18F Accessibility Guide Checklist](https://accessibility.18f.gov/checklist/) — WCAG 2.0 compliance checklist for developers, driven by priority

* [HHS.gov’s checklist for creating accessible PDFs](https://www.hhs.gov/web/section-508/making-files-accessible/pdf-required/index.html) — designing accessibly for artifacts that aren't apps or websites is important, too!

* [Vox Media Accessibility Guidelines Checklist](http://accessibility.voxmedia.com/) — best practices for designers, engineers, PMs, QA, and editorial staff (with sources to read more; great to send to coworkers on different teams)



### Guidelines

* [18F Accessibility Guide](https://accessibility.18f.gov/) — hub of accessibility resources and principles by government office 18F

* [Empathy Prompts](https://empathyprompts.net/) — open source list of considerations & challenges to help build empathy

* [Google Material Design Accessibility Principles](https://material.io/guidelines/usability/accessibility.html#accessibility-principles) — practices for color, sound, motion, layout, copy, hierarchy, focus, and implementation

* [Inclusive Design Principles](http://inclusivedesignprinciples.org/) — seven clear principles to follow to put people first, by leading experts The Paciello Group

* [Microsoft Inclusive Design Principles](https://www.microsoft.com/en-us/design/inclusive) — 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



### Industry leaders, educators, and consultants

* [Deque](https://www.deque.com/)

* [Karl Groves](http://www.karlgroves.com/)

* [Knowability](https://www.knowbility.org/)

* [Level Access](https://www.levelaccess.com/)

* [Marcy Sutton](https://marcysutton.com/)

* [The Paciello Group](https://www.paciellogroup.com/)

* [Simply Accessible](http://simplyaccessible.com/)

* [WebAIM](http://webaim.org/resources/designers/)



### Online courses

* [Pluralsight “Meeting Web Accssibility Guidelines” course](https://www.pluralsight.com/courses/web-accessibility-meeting-guidelines) — [paid] — practical course with code examples to meet Section 508 and/or WCAG 2.0 requirements for government/education projects

* [Udacity Web Accessibility course, by Google](https://www.udacity.com/course/web-accessibility--ud891) — [free] — practical course focused on front-end design and development regarding markup and visual styling



### Pattern/component libraries

* [A11y Style Guide](http://a11y-style-guide.com/style-guide/)

* [eBay MIND Patterns](https://ianmcburnie.github.io/mindpatterns/index.html)



### Requirements and standards

* [🌐 WCAG 2.0](https://www.w3.org/TR/WCAG20/) — the W3C’s “Web Content Accessibility Guidelines” web standards specification

* [🇺🇸 ADA](https://www.ada.gov/) — Americans with Disabilities Act prohibits discrimination against people with disabilities

* [🇺🇸 Section 508](https://www.section508.gov/) — 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](https://www.ontario.ca/laws/regulation/110191) — 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](http://www.accessible-email.org/) — browser-based semantic analysis to report a11y and usability issues errors in marketing emails

* [Colors palettes & contrast testing tools](#colors) — listed in the "Colors" category 👇

* [HTML5 Accessibility](http://www.html5accessibility.com/) — lists current accessibility support status of HTML5 features across major browsers

* [pa11y](http://pa11y.org/) — automated accessibility testing on the command line for programmatic accessibility reporting

* [tota11y](http://khan.github.io/tota11y/) — Khan Academy's jQuery-based semantic analysis that can be inserted into a page or run as a bookmarklet



### Further reading

* [Accessibility Wins](https://a11ywins.tumblr.com/) — single-serving Tumblr showcasing small victories in accessible web design and development

* [Awesome Accessibility](https://github.com/brunopulis/awesome-a11y) — 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

* [_A Web for Everyone_ by Sarah Horton & Whitney Quesenbery](http://rosenfeldmedia.com/books/a-web-for-everyone/), 2014 — practical advice and examples to build accessible web products without sacrificing design or innovation

* [_Inclusive Design Patterns — Coding Accessibility Into Web Design_ by Heydon Pickering](https://www.smashingmagazine.com/inclusive-design-patterns/), 2016 — real-world techniques and strategies to build and prototype accessible interfaces



###### History

* [_Megg’s History of Graphic Design_ by Philip B. Meggs](https://www.goodreads.com/book/show/641593.Meggs_History_of_Graphic_Design?ac=1&from_search=true), 1983 — the unrivaled college textbook authority on the history of graphic design, mostly in America and Europe



###### Independent practice, consulting, freelancing

* [_Design Is a Job_ by Mike Monteiro](https://www.goodreads.com/book/show/13574985-design-is-a-job), 2012 — no bullshit lessons on selling yourself and working with others

* [_Pricing Design_ by Dan Mall](https://www.goodreads.com/book/show/28511400-pricing-design), 2016 — brief and invaluable reference on value-based pricing



###### Process and mindset

* [_The Artist’s Way_ by Julia Cameron](https://www.goodreads.com/book/show/615570.The_Artist_s_Way), 1992 – classic international bestseller on the creative process

* [_The Shape of Design_ by Frank Chimero](http://shapeofdesignbook.com/), 2012 — sometimes insightful, sometimes insufferable; a rumination on making things for other people

* [*Sprint* by Jake Knapp & more](https://www.goodreads.com/book/show/25814544-sprint), 2016 — a balanced book of details, examples, checklists, and scripts to perform your own famed Google Ventures design sprint



###### User experience and interaction design

* [_Microinteractions: Designing with Details_ by Dan Saffer](https://www.goodreads.com/book/show/17239285-microinteractions), 2013 — straight-forward examples on the small details that exist inside & around a product’s features



##### User research

* [*Just Enough Research* by Erika Hall](https://www.goodreads.com/book/show/17236175-just-enough-research), 2013 — breaks down the huge topic of design research in a digestible, approachable, organized, and humorous way



#### Publishers and distributors

* [A Book Apart](https://abookapart.com) — top of the class brief books for people who make websites

* [Chronicle Books](https://chroniclebooks.com) — innovative and design-y adult and children’s books, based in San Francisco

* [Draw Down](https://draw-down.com/) — large catalog of small-press books and zines on graphic design, culture, criticism, art, and more

* [Gestalten](http://usshop.gestalten.com/) — high-quality books on graphic design, art, and culture

* [MIT Press](https://mitpress.mit.edu/) — hundreds of new books published yearly from leading researchers on technology, art, and science

* [Rosenfeld Media](http://rosenfeldmedia.com/) – user experience books, training, workshops, seminars, and experts

* [Smashing Magazine](https://www.smashingmagazine.com/books) — affordable, practical books from digital design practitioners



## Browser features

#### Google Chrome extensions and bookmarklets

* [Tachyons X-ray](http://tachyons.io/xray/) — debug & align objects to an 8 or 16px grid

* [Type Sample](http://www.typesample.com/) — identify and sample webfonts — 3 samples for free, or unlimited samples for $5/year subscription. available as a bookmarklet or Chrome extension

* [WhatFont?](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en) — inspect a webfont’s name, family, weight, size, style, color, line height, and source (if hosted via Google Fonts or Typekit)



#### Google Chrome DevTools

* [Animation timeline & editing](https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations) — powerful tools to inspect and modify CSS animations

* [Device Mode](https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports) — test responsiveness by using popular viewport sizes or creating your own presets

* [Full-page screenshot](https://developers.google.com/web/updates/2017/04/devtools-release-notes##screenshots) — it’s inside the Device Mode — no additional browser extension required!

* [Network performance](https://developers.google.com/web/tools/chrome-devtools/network-performance/) — analyze resource requests and emulate mobile experiences



## Brushes

* [Kyle T. Webster](https://www.kylebrush.com/) — best Photoshop brushes for drawing and adding small texture (though they are not of much use without a pressure-sensitive tablet)

* [RetroSupply](http://www.retrosupply.co/collections/brushes) — 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"](https://www.retrosupply.co/products/the-hand-lettering-toolbox?variant=22157366791) — Photoshop brushes made exclusively for digital lettering, with [more specific sets here](https://creativemarket.com/shaunaparmesan)

* [Syd Weiler](https://patreon.com/sydweiler) — gorgeous Photoshop brushes, niched mostly toward organic shapes and textures



## Colors and color palettes

* [clrs.cc](http://clrs.cc/) — really pretty default colors for prototyping

* [Coolors](https://coolors.co/app) — interactive color palette generator

* [Google Material design colors](https://material.io/color/#!/?view.left=1&view.right=0) — 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](https://color.adobe.com/create/color-wheel/) — Adobe color palette resource

* [Paletteable](http://www.palettable.io/) — interactive color palette generator

* [Sip](http://sipapp.io/) — macOS and iOS colorpicker app, allows you to save custom palettes

* [Wikipedia’s category for color shades](https://en.wikipedia.org/wiki/Category:Shades_of_color_templates) — if you wanna nerd out



#### Accessible color palettes

* [Randoma11y](https://randoma11y.com/) — accessibility-friendly random color generator for text & background combinations



#### Accessibility testing tools

* [Color Oracle](http://colororacle.org/) — open source macOS color blindness simulator

* [Contrast Analyzer](https://www.paciellogroup.com/resources/contrastanalyser/) — open source macOS eye-dropper tool for text/bg accessibility testing, shows fail/AA Large/AA/AAA results

* [Contrast](https://usecontrast.com/) — [paid] — minimal & gorgeous macOS menubar eye-dropper tool, shows fail/AA Large/AA/AAA results

* [Hex Naw](https://hexnaw.com/) — input up to 12 hex codes to test entire color systems for accessible contrast

* [Online contrast checker](http://webaim.org/resources/contrastchecker/) — input text/bg hex codes for accessible contrast testing

- [Spectrum](https://chrome.google.com/webstore/detail/spectrum/ofclemegkcmilinpcimpjkfhjfgmhieb?hl=en) — Google Chrome extension to instantly test web pages for different types of color vision deficiency



## Fonts

#### Directories and marketplaces

* [Google Fonts](https://fonts.google.com/) — hundreds of free webfonts hosted via Google or self-hosted, downloadable via [GitHub repo](https://github.com/google/fonts) with individual licenses

* [MyFonts](http://myfonts.com) — 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](https://typekit.com/) — 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](http://www.typenetwork.com/) — incredibly high-quality fonts by select independent foundries

* [YouWorkForThem](https://www.youworkforthem.com/fonts/) — thousands of fonts in the “original creative marketplace”



#### Individual foundries

* [A2 Type](http://www.a2-type.co.uk/)

* [Avondale Type Co.](https://avondaletypeco.com/)

* [Beta Type](http://betatype.com/)

* [Bold Monday](https://www.boldmonday.com/)

* [Colophon](http://www.colophon-foundry.org/)

* [Commercial Type](https://commercialtype.com/)

* [Dalton Maag](https://www.daltonmaag.com/)

* [DSType](http://www.dstype.com/)

* [Font Bureau](http://fontbureau.typenetwork.com/)

* [FontFont](https://www.fontfont.com/)

* [Fountain](http://www.fountaintype.com/)

* [GrilliType](https://www.grillitype.com/)

* [Hoefler & Co.](http://www.typography.com/)

* [House Industries](http://www.houseind.com/)

* [HvD Fonts](http://www.hvdfonts.com/)

* [Just Another Foundry](http://justanotherfoundry.com/)

* [Lineto](https://lineto.com/)

* [Mark Simpson](http://www.marksimpson.com/)

* [Okay Type](https://okaytype.com/)

* [P22](https://www.p22.com/)

* [Process Type](https://processtypefoundry.com/fonts/)

* [Sudtipos](http://www.sudtipos.com/)

* [The Designer’s Foundry](http://thedesignersfoundry.com)

* [TypeTogether](http://www.type-together.com/)

* [Typotheque](https://www.typotheque.com/)

* [Village](https://vllg.com/)



## Icons and emoji

* [EmojiOne](https://www.emojione.com/developers/) — [free & paid] — emoji set with free & premium licensing options available; downloadable as pngs, vectors, and font files

* [Emojipedia](https://emojipedia.org/apple/) — [free] — every emoji, ever

* [Google Material Design icons](https://material.io/icons/) — [free] — 900+ open source icons from Google’s gorgeous design language

* [The Noun Project](https://thenounproject.com/) — [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](https://symbolset.com/) — [paid] — super high-quality icon fonts categorized by topic and style

* [Vector Emoji](https://applypixels.com/template/vector-emoji) — [free] — iOS emoji faces recreated in vector as layered PSDs or Sketch files



## Inspiration and criticism websites

#### Brand identity

* [BP & O](http://bpando.org) — killer packaging and brand design gallery

* [Brand New](http://www.underconsideration.com/brandnew) — brand identity case studies

* [Shipcom](http://shipcom.tumblr.com) — collection of shipping, manufacturing, transport, and logistics logos



#### Illustration and art

* [Boooooooom](http://www.booooooom.com) — art, illustration, design, photography interviews and features

* [Jacky Winter](http://www.jackywinter.com/all-artists) — illustration collective



#### Motion

* [Wine After Coffee](https://vimeo.com/channels/wineaftercoffee) — curated channel of the best motion graphics, animation, and video



#### Print, layout, packaging, art direction

* [Art of the Menu](http://www.underconsideration.com/artofthemenu) — restaurant-specific print menu design case studies

* [Designspiration](http://designspiration.net) — photography, print design, cool stuff gallery, Pinterest style

* [FPO](http://www.underconsideration.com/fpo) — print design case studies

* [Grafik](https://www.grafik.net) — cutting-edge and old school fringe aesthetic case studies

* [It’s Nice That](http://www.itsnicethat.com) — creative inspiration worldwide

* [Mind Sparkle Mag](http://mindsparklemag.com) — print, brand, interior, industrial design features

* [Trendlist](http://www.trendlist.org) — graphic design trends for the designer’s designer



#### Typography

* [Alphabettes](http://www.alphabettes.org) — commentary, research, and work showcases by women in type design

* [Fonts In Use](https://fontsinuse.com) — highest quality public archive of typography indexed by typeface, format, and industry

* [Typographica](http://typographica.org) — reviews and commentary on type books and typefaces

* [Type Wolf](https://www.typewolf.com) — curated examples of typography on the web with premium guides and resources



#### Web, mobile, product



###### UX patterns and components

* [Capptivate](http://capptivate.co) — mobile design patterns and components in video form

* [Collect UI](http://collectui.com) — UI design components gallery populated from Dribbble posts

* [Empty Stat.es](http://emptystat.es) — empty state designs

* [Little Big Details](http://littlebigdetails.com) — delightful, thoughtful UX components that make a big difference

* [PTTRNS](http://pttrns.com) — mobile design patterns and components

* [Pattern Tap](http://zurb.com/patterntap) — website components gallery

* [UI Movement](https://uimovement.com/) — UI design components gallery and newsletter, largely culled from Dribbble

* [Unmatched Style](http://unmatchedstyle.com) — website design and interactive components gallery



###### Visual design

* [HTTPSTER](http://httpster.net) — website design gallery. sort by category and style

* [Lapa](https://www.lapa.ninja/) — website design gallery. sort by category and color

* [One Page Love](https://onepagelove.com) — website design gallery featuring only one-page websites

* [Pages.xyz](http://www.pages.xyz/) — website design gallery for digital product marketing and ecommerce sites

* [Really Good Emails](http://reallygoodemails.com) — email design gallery

* [Siteinspire](http://siteinspire.com) — website design gallery with the tightest curation. sort by category, style, subject, or CMS. includes starred favorites

* [Site See](https://sitesee.co) — website design gallery. sort by category and color. includes custom curated collections

* [Web Creme](http://www.webcreme.com) — website design gallery, updated sporadically, online since 2005(!)



### macOS apps

#### Development

* [Dash](https://kapeli.com/dash) — [paid] — instant offline access to 150+ API documentation sets.



#### Font management

* [RightFont](http://rightfont.com/) — [paid] — preview, sync, install, and manage fonts on your Mac or Dropbox/Google Drive



#### Menubar apps

* [LittleIpsum](http://dustinsenos.com/littleIpsum) — [free] — sgenerate lorem ipsum lightning fast (can automatically wrap in `p` tags, too)

* [LICEcap](https://www.cockos.com/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](http://facebook.design/handskit/) — [free] — diverse hands holding mobile devices

* [Graphicburger](http://graphicburger.com/mock-ups/) — [free] — physical product mockups & templates

* [GraphicRiver](https://graphicriver.net/) — [paid] — any product mockup you could ever think of

* [Pixeden](http://www.pixeden.com) — [free & paid] — physical product mockups & templates



## Prototyping tools

* [Adobe Experience Design](http://www.adobe.com/products/experience-design.html) — included with Adobe CC subscription, for creating wireframes and protoyping interactivity

* [Atomic](https://atomic.io) — prototyping tool for mobile or desktop interactions or animations

* [Figma](https://figma.com) — the first real-time collaborative interface design tool

* [Framer](https://framerjs.com) — prototyping tool built on framer.js for prototyping mobile and desktop apps

* [InVision](https://www.invisionapp.com/) — collaborative click-through prototyping tool for web and mobile

* [Marvel](https://marvelapp.com/) — simple click-through prototyping tool for web and mobile apps

* [Principle](http://principleformac.com/) — motion design prototyping tool for mobile and web applications

* 👆 [More details on these apps and the differences between them @ cooper.com](https://www.cooper.com/prototyping-tools)



## Stock graphics

* [CreativeMarket](https://creativemarket.com/) — 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](https://www.retrosupply.co/) — well-made and well-priced assets that skew toward retro/vintage

* [YouWorkForThem](https://www.youworkforthem.com/graphics/) — cool textures and imagery from the original online creative marketplace



## Stock photography

* [Death to the Stock Photo](http://deathtothestockphoto.com/) — [free & paid] — new sets emailed weekly, premium plans available for more photos and unlimited access

* [Gratisography](http://gratisography.com/) — [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](http://magdeleine.co/browse/) — [free] — similar to unsplash, some are licensed in public domain, some require Creative Commons attribution

* [Masterfile](http://masterfile.com) — [paid] — stock photos, a little higher quality than iStock. registered account includes unwatermarked hi-res comps

* [Stocksy](http://stocksy.com) — [paid] — high quality, stylish lifestyle paid stock photos (watermarked comps)

* [Unsplash](https://unsplash.com/) — [free] — the first of the hip and gorgeous free with no strings attached stock photo sites

* [Women of Color in Tech](https://www.flickr.com/photos/wocintechchat/albums) — [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](http://lookback.io) — users record their screen, face, voice, and touches while using your site/app/prototype/wireframe

* [UsabilityHub](http://usabilityhub.com) — for quick 5-minute qualitative, navigation-based, or hot-spot based remote tests for static images or a series of images

* [UserTesting](http://usertesting.com) — 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