Suhail Kakar

Posted on Aug 19, 2021

Best Design Resources for Developers - II

#javascript #design #react #programming

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

Accessibility resources
Books and zines
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
macOS 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

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

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

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

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