New to design and not sure where to start? Read this first:
Design student wanting to get more involved with tech? Read this:
Resources I use frequently are bolded or rich embedded.
Resources under Learn are tutorials or guides with explicit end-results, or basic foundations.
Resources under Read are longer-form treatises you should read when you have time.
Color
Premade palette resources
javierbyte.github.io/cohesive-colors
[Microsoft Platform] Windows 10 Default User Colors
Guidelines and tips for using color
IBM Design Language Guidelines + Palettes
[Google Platform] Color Guidelines + Palettes
[Apple Platform] iOS HIG Color Guidelines
How to Design for Color Blindness
Patterns + Texture
Resources
Learn
Typography
Sites with fonts + typefaces
free
not free
Common Typefaces:
Tools
Pairing Typefaces
Google Web Fonts Typographic Project
Learn
Butterick’s Practical Typography
HackDesign | Dive Into Typography; Typography in Product Design; Exploring the World of Typefaces ; Typography in Practice, and Where to Go from Here
The Value of Multi-Typeface Design
Inspiration
Iconography
Fontello (Icon font generator)
Simple Icons (SVG Icons for Popular Brands)
The Noun Project (Repository of Open Source Icons)
[Google Platform] Material Design Icons
[Microsoft Platform] Segoe MDL2 Glyphs Cheatsheet
[Apple Platform] iOS Standard Bar/Button Icons
Icons8 (Free 3rd Party Platform Icons for iOS, Windows, and Android)
Twemoji (Twitter Emoji)
Maki (Icons for maps + cartography from Mapbox)
Guidelines
[Google Platform] Material Icon Design Guidelines
[Apple Platform] iOS Bar/Button Icons
Learn
HackDesign | Using Icons in Interfaces; The Medium and Mechanics of Iconography
Motion
Tools
Framer JS (Coffeescript-based prototype tool good for UI motion — think Sketch for animation)
Adobe After Effects (Raster effects + animation tool good for high fidelity motion — think Photoshop for animation)
Principles
HackDesign | Animation, Direct Manipulation & Feedback
The Principles of UX Choreography
Improve the payment experience with animations
Learn Framer
New to Framer? Just 3 Things to Get You Started
Learning Framer — 10 step by step tutorials
Framer.js for people who think things like Framer.js are weird and hard
Learn After Effects
Adding a little motion to your portfolio (Mini-tutorial for After Effects which assumes no prior experience!)
How to Use After Effects for Web Animation Prototypes
Animate easily your vector illustrations with After Effects CS6
UI animation prototyping in After Effects [Videos]
Read
Devices
UI Design + Information Architecture
Learn
5 UX plays to start your design on good tracks
Designing For Mobile User Input
Read
Using design patterns responsibly
The Hamburger Menu Doesn’t Work
Research
Inspiration
Tools
Product Design + Design Thinking
Design Process
Learn
Design in 36 Hours: Ideating 101
Practicing Empathy in Product Design
HackDesign | A Holistic Guide to Product Design
Examples
Design Research
Interface Paradigms
Virtual/Augmented Reality
Learn
Immersive Design: Learning to Let Go of the Screen
Virtual reality: Templates for UI design in VR
Designing humane augmented reality user experiences […and what happens if we don’t]
Design + Storytelling Practices in Virtual Reality
Get started with VR: user experience design
Leap Motion VR Design Best Practices
From product design to virtual reality
Read
Resources
A Note:
As almost inevitably happens when lists start getting too complex, one discovers that a strictly hierarchical taxonomy becomes increasingly rigid and unfit for the task. This list will eventually get replaced by a lightweight website that’ll let you more easily find what you’re looking for, but until then, stay strong and use CTRL+F.
Any suggestions? Feel free to write a response!
