design CSS
Need help with design-resources?
Click the β€œchat” button below for chat support from the developer who created it, or find similar developers for support.
skullface

Description

πŸ“ Select websites, tools, assets, and readings for working in and learning about design.

128 Stars 35 Forks 62 Commits 7 Opened issues

Services available

Need anything else?

Design Resources

πŸ‘‹ Hi, I’m @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.

⭐️ 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 reproduced in full below!


Table of contents


Accessibility resources

Checklists

Guidelines

Industry leaders, educators, and consultants

Online courses

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

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
History
Independent practice, consulting, freelancing
Process and mindset
User experience and interaction design
User research

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

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.