Resources for CS 485/584 - Design Studio in HCI

This page represents a growing compilation of resources you may find helpful throughout the semester. If you are aware of other helpful resources that ought to go on this page, email me.

Visual Design Icons / Images / Media

Type

  • Web Typography Resources: “A growing list of web typography related apps, tools, plugins and other resources for web designers and web developers.”
  • Fontpair: collection of fonts that go well together.
  • Beautiful Web Type: showcases the most beautiful fonts from Google’s free WebFonts collection.

Color

  • Adobe Color: interactive web app to help you choose nice color schemes.
  • Colour Lovers: a community of people who post and vote on color palettes.
  • Colorgorical: research-driven model to help you create color palettes that are both aesthetically pleasing and optimized for communicating data.
  • Color Oracle: a free color blindness simulator for Windows, Mac, and Linux.
  • LOLColors: curated color palette inspiration.
  • Color Contrast Checker: determines whether a foreground/background color combination provides enough contrast for the purposes of accessibility.
  • Viz Palette: Demonstration of various color palettes for data visualization (includes accessibility toggles).
  • Color Brewer 2.0: select sequential, diverging, or qualitative color palettes with 3-12 levels. Has colorblind-safe and print-friendly options.
  • 0 to 255: "makes it easy to lighten and darken colors... perfect for hover states, borders, gradients, and more."

Tips on Writing for Usability

Prototyping

  • Figma: create prototypes for web or mobile. Includes design kits with reusable components.
  • inVision: create prototypes for web or mobile. Lots of integrations.
  • Marvel: create desktop and mobile prototypes. Integrates with Sketch. Nice free plan.
  • Facebook Design Resources: a set of images and tools curated by Facebook to be used during UI prototyping.
  • Adobe XD: Far from free, but if you have access to an Adobe account, a wonderful app for prototyping.
  • Sketch: Mac OS X app to help you draw new designs. Free trial or $50 student license.

Mobile Resources

  • Android Design Guide: design guidelines and patterns that are consistent with the android experience.
  • iOS Design Guide: design guidelines and patterns that are consistent with the iOS experience.

Design Inspiration

  • Dribbble: showcase of what designers are working on.
  • Awwwards: awards for design, creativity, and innovation on the internet.
  • Niice: sort of a more design focused pinterest site that can be used to create moodboards (and explore ones created by other people).
  • muzli designers: browse the work by a number of designers.
  • From Up North: trendy, curated design inspiration.

Visualization Tools

Additional Texts

Data

Miscellaneous