Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 36 additions & 36 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# [Design Resources](http://designresources.party)
## [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.
✨ I used to keep this info as a Google Doc to share with my most trusted ally 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!
💫 [Website content](http://designresources.party) mimograph in full below!

---

Expand Down Expand Up @@ -62,19 +62,19 @@
---

## Accessibility resources
### Checklists
## 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
## 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
## Industry leaders, educators, and consultants
* [Deque](https://www.deque.com/)
* [Karl Groves](http://www.karlgroves.com/)
* [Knowability](https://www.knowbility.org/)
Expand All @@ -84,59 +84,59 @@
* [Simply Accessible](http://simplyaccessible.com/)
* [WebAIM](http://webaim.org/resources/designers/)

### Online courses
## 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
## 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
## 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
## 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
## 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
## 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
## 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
## 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
## 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
## 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
## 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
Expand All @@ -148,12 +148,12 @@


## Browser features
#### Google Chrome extensions and bookmarklets
## 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
## 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!
Expand All @@ -178,10 +178,10 @@
* [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
## Accessible color palettes
* [Randoma11y](https://randoma11y.com/) — accessibility-friendly random color generator for text & background combinations

#### Accessibility testing tools
## 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
Expand All @@ -192,14 +192,14 @@


## Fonts
#### Directories and marketplaces
## 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
## Individual foundries
* [A2 Type](http://www.a2-type.co.uk/)
* [Avondale Type Co.](https://avondaletypeco.com/)
* [Beta Type](http://betatype.com/)
Expand Down Expand Up @@ -240,19 +240,19 @@


## Inspiration and criticism websites
#### Brand identity
## 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
## 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
## Motion
* [Wine After Coffee](https://vimeo.com/channels/wineaftercoffee) — curated channel of the best motion graphics, animation, and video

#### Print, layout, packaging, art direction
## 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
Expand All @@ -261,16 +261,16 @@
* [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
## 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
## Web, mobile, product

###### UX patterns and components
## 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
Expand All @@ -280,7 +280,7 @@
* [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
## 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
Expand All @@ -292,14 +292,14 @@



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

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

#### Menubar apps
## 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)

Expand Down