Best Design Resources for Developers - II
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
- Books and zines
- Browser features
- Brushes
- Colors and color palettes
- Fonts
- 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.govs 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 W3Cs 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
- Meggs 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 Artists 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 products 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 childrens 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 webfonts 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 its 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 Panczyszyns "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 Googles 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
- Wikipedias 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 its 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 Designers 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 Googles 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
- Its Nice That creative inspiration worldwide
- Mind Sparkle Mag print, brand, interior, industrial design features
- Trendlist graphic design trends for the designers 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 theyre 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
Original Link: https://dev.to/suhailkakar/best-design-resources-for-developers-ii-2g5a
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To