Best Design Resources for Developers - II
Tags: javascript, design, react, programming
Published: 2021-08-19 06:29:57

Are you searching for the best design resources? This is a collection that every developer should bookmark since it contains the greatest resources for creating an eye-catching and aesthetically enhanced project.

### Introduction
Every developer's job entails some kind of product design. It's not just about having a good appearance; it's also about having engaging visuals and a good overall presentation. Rather than spending time and money on a lengthy design process, it is preferable to leverage resources that offer ready-to-use components and features for a fantastic, amazing, and outstanding product.

Part one of these resources can be found [here](https://blog.suhailkakar.com/best-design-resources-for-developers)

### 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 &amp; 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

> This list is provided by Skullface and other contributors [here](https://github.com/skullface/design-resources).

---

 
## Conclusion

I hope you found this list helpful. If you need any help please let me know in the comment section

Let's connect on  [Twitter](https://twitter.com/suhailkakar)  and  [LinkedIn](https://www.linkedin.com/in/suhailkakar/)  

👋 Thanks for reading, See you next time