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.

KATY EDIT THIS

https://emilywall.github.io/hci/resources/index.html

Visual Design Icons / Images / Media 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 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 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 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 D3js Vega Vega-Lite P5js Tableau Additional Texts The Design of Everyday Things by Don Norman. Data Census.gov Data.gov Tableau Data /r/opendata Quandl Metro Boston Data Common CDC Real Climate UK Office for National Statistics World Bank Data Catalog Basketball UN Data WHO Data OECD Stats Miscellaneous 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)