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, Slack me.
Hall of Fame
The Hall of Fame contains stellar examples from CSC 363 in years past. Find inspiration here.
Visual Design Icons / Images / Media
These resources have (free to use) collections of icons, images, and media. Note: links are not regularly checked and may be out of date.
- Wikimedia Commons: search for images, audio, and video.
- BBC Sound Effects Library: browse sound effects by category.
- Creative Commons Search: browse over 500 million images, available for reuse.
- Subtle Patterns: a great collection of unobtrusive background patterns for a website.
- icons8: huge collection of icons.
- Noun Project: enormous collection of well-designed icons. Many are free (at least with attribution).
- Flat Icon: sets of icons with visually consistent design.
- FindA.Photo: search engine for free stock photos that includes search-by-color.
- Pexels: high quality free stock photos that you can use.
- FontAwesome: icons that can be used as in-line text with html.
Type
To find fonts and typefaces for your webpages and prototypes.
- 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
To help you pick color palettes and check for color blindness accessibility.
- 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
How to structure your writing for the web, which is different from writing an essay.
- How we really use the Web (from “Don’t Make Me Think”): what do people look for when they read online?
- How Users Read on the Web (Jakob Nielson): concrete tips about how to improve readability/engagement.
- Voice And Tone: best practices for the writing in your app - how do you create a clear, appropriate voice?
Prototyping
Software for creating prototypes.
- 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
Help for design patterns for Android and Apple apps.
- 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
Explore!
- 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
- The Design of Everyday Things by Don Norman.
Data
- Census.gov
- Data.gov
- Tableau Data
- /r/opendata
- Quandl
- Metro Boston Data Common (there’s a similar one for New York City)
- CDC
- Real Climate
- UK Office for National Statistics
- World Bank Data Catalog
- Basketball
- UN Data
- WHO Data
- OECD Stats
Miscellaneous
Other useful tools to help with this class.
- CamScanner: useful for scanning in paper sketches to submit assignments online.
- Google Design Resources: big repository of all kinds of design resources from Google.
- How to Conduct a Heuristic Evaluation: a quick and dirty set of guidelines to think about when creating a user interfaces.
- Design Methods (by Amy Ko)
- Clean Up Your Mess: A Guide to Visual Design for Everyone: a good, quick ‘how-to’ guide for visual design.
- Navigating a Career in HCI Research (Meredith Ringel Morris)