Best Design Resources for Developers – II

This content originally appeared on DEV Community and was authored by Suhail Kakar

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

Table of contents

• Accessibility resources
  • Checklists
  • Guidelines
  • Industry leaders, educators, and consultants
  • Online courses
  • Pattern/component libraries
  • Requirements and standards
  • Testing tools and development references
  • Further reading
• Books and zines
  • Individual publications
  • Accessibility
  • History
  • Independent practice, consulting, freelancing
  • Process and mindset
  • User experience and interaction design
  • User research
  • Publishers and distributors
• Browser features
  • Google Chrome extensions and bookmarklets
  • Google Chrome DevTools
• Brushes
• Colors and color palettes
  • Accessible color palettes
  • Accessibility testing tools
• Fonts
  • Directories and marketplaces
  • Individual foundries
• Icons and emoji
• Inspiration and criticism websites
  • Brand identity
  • Illustration and art
  • Print, layout, packaging, art direction
  • Motion
  • Typography
  • Web, mobile, product
  • UX patterns and components
  • Visual design
• macOS apps
  • Development
  • Font management
  • Menubar apps
• Mockups
• Prototyping tools
• Stock graphics
• Stock photography
• User testing and interactive feedback tools

Accessibility resources

Checklists

• 18F Accessibility Guide Checklist — WCAG 2.0 compliance checklist for developers, driven by priority
• HHS.gov’s checklist for creating accessible PDFs — designing accessibly for artifacts that aren't apps or websites is important, too!
• Vox Media Accessibility Guidelines Checklist — 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 — hub of accessibility resources and principles by government office 18F
• Empathy Prompts — open source list of considerations & challenges to help build empathy
• Google Material Design Accessibility Principles — practices for color, sound, motion, layout, copy, hierarchy, focus, and implementation
• Inclusive Design Principles — seven clear principles to follow to put people first, by leading experts The Paciello Group
• Microsoft Inclusive Design Principles — 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
• Karl Groves
• Knowability
• Level Access
• Marcy Sutton
• The Paciello Group
• Simply Accessible
• WebAIM

Online courses

• Pluralsight “Meeting Web Accssibility Guidelines” course — [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 — [free] — practical course focused on front-end design and development regarding markup and visual styling

Pattern/component libraries

• A11y Style Guide
• eBay MIND Patterns

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

• A Web for Everyone by Sarah Horton & Whitney Quesenbery, 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, 2016 — real-world techniques and strategies to build and prototype accessible interfaces

History

• Megg’s History of Graphic Design by Philip B. Meggs, 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, 2012 — no bullshit lessons on selling yourself and working with others
• Pricing Design by Dan Mall, 2016 — brief and invaluable reference on value-based pricing

Process and mindset

• The Artist’s Way by Julia Cameron, 1992 – classic international bestseller on the creative process
• The Shape of Design by Frank Chimero, 2012 — sometimes insightful, sometimes insufferable; a rumination on making things for other people
• Sprint by Jake Knapp & more, 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, 2013 — straight-forward examples on the small details that exist inside & around a product’s features

User research

• Just Enough Research by Erika Hall, 2013 — breaks down the huge topic of design research in a digestible, approachable, organized, and humorous way

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

• Animation timeline & editing — powerful tools to inspect and modify CSS animations
• Device Mode — test responsiveness by using popular viewport sizes or creating your own presets
• Full-page screenshot — it’s inside the Device Mode — no additional browser extension required!
• Network performance — analyze resource requests and emulate mobile experiences

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

• A2 Type
• Avondale Type Co.
• Beta Type
• Bold Monday
• Colophon
• Commercial Type
• Dalton Maag
• DSType
• Font Bureau
• FontFont
• Fountain
• GrilliType
• Hoefler & Co.
• House Industries
• HvD Fonts
• Just Another Foundry
• Lineto
• Mark Simpson
• Okay Type
• P22
• Process Type
• Sudtipos
• The Designer’s Foundry
• TypeTogether
• Typotheque
• Village

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

• Adobe Experience Design — included with Adobe CC subscription, for creating wireframes and protoyping interactivity
• Atomic — prototyping tool for mobile or desktop interactions or animations
• Figma — the first real-time collaborative interface design tool
• Framer — prototyping tool built on framer.js for prototyping mobile and desktop apps
• InVision — collaborative click-through prototyping tool for web and mobile
• Marvel — simple click-through prototyping tool for web and mobile apps
• Principle — motion design prototyping tool for mobile and web applications
• ? More details on these apps and the differences between them @ cooper.com

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

This list is provided by Skullface and other contributors here.

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 and LinkedIn

? Thanks for reading, See you next time

This content originally appeared on DEV Community and was authored by Suhail Kakar