Design Resources


105 bookmarks. First posted by ericaheinz july 2017.


Select websites, tools, assets, and readings for working in and learning about design.
design  resource  list  webdesign  web  image  icon  colour  photo  font  wireframe  mockup  video  graphic 
8 weeks ago by stevecopley
Select websites, tools, assets, and readings for working in and learning about design.
resource  web 
9 weeks ago by dweidner
Select websites, tools, assets, and readings for working in and learning about design.
Design  Webdesjgn  CSS  Accessibility  Stock  Photos  Lists 
12 weeks ago by 1luke2
Select websites, tools, assets, and readings for working in and learning about design.
design 
august 2017 by ajturner
Big collection of resources.
design  resources 
august 2017 by davidconrad
Unmatched Style
Design  resources 
august 2017 by dougvs
It’s design resources!
design  resources 
august 2017 by abberdab
Select websites, tools, assets, and readings for working in and learning about design.
design  resource  reference 
august 2017 by jpkoudstaal
Select websites, tools, assets, and readings for working in and learning about design.
design  resources 
august 2017 by aaronsalmon
Select websites, tools, assets, and readings for working in and learning about design.
resources  design  color  development  reference  accessibility  designtools  list 
july 2017 by DillonIanCarter
Select websites, tools, assets, and readings for working in and learning about design.
july 2017 by jasonwhittemore
Design Resources
Select websites, tools, assets, and readings for working in and learning about design.

made by @skullface · view/contribute on GitHub
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
Please note: none of the following links are affiliate links.
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
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
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
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 — [paid] — pretty 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
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 Simonson
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
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
… [more]
design  website  web-design  web-development 
july 2017 by enochko
Select websites, tools, assets, and readings for working in and learning about design.
web_design 
july 2017 by decembr14
Select websites, tools, assets, and readings for working in and learning about design.
web  design  collection  resource  tool  tutorial  learning 
july 2017 by vicchow
Select websites, tools, assets, and readings for working in and learning about design.
Design  resources 
july 2017 by kenleyarai
Select websites, tools, assets, and readings for working in and learning about design.
design  resource  collection 
july 2017 by kogakure
Select websites, tools, assets, and readings for working in and learning about design.
design  resources  stockphoto 
july 2017 by beery
Great collection of guides, tools and assets for better design:
from twitter_favs
july 2017 by the_claus
list of dev/design, accessibility resources
webdesign  accessibility  webdev 
july 2017 by jshwlkr
Select websites, tools, assets, and readings for working in and learning about design.
design  resources 
july 2017 by lucasalvini
Select websites, tools, assets, and readings for working in and learning about design.
july 2017 by martinbalfanz
Select websites, tools, assets, and readings for working in and learning about design.
design  tool  resources 
july 2017 by robnero
Select websites, tools, assets, and readings for working in and learning about design.
resources  browsers  WebDesign  Design 
july 2017 by amason
Select websites, tools, assets, and readings for working in and learning about design.
design  reference  web  development  css  stock  photography 
july 2017 by stevesong
Select websites, tools, assets, and readings for working in and learning about design.
design  resources 
july 2017 by nezz
Select websites, tools, assets, and readings for working in and learning about design.
design 
july 2017 by chrishadley
Select websites, tools, assets, and readings for working in and learning about design.
#resource 
july 2017 by owencorrigan