Lecture Notes for 333

Theory:

Creativity Resources

Origins of UX and UI

HCI Process

Interface Design

Interaction Design

Nielsen Norman Group
https://www.nngroup.com/topic/interaction-design/#videos

UI Design Basics
https://www.usability.gov/what-and-why/user-interface-design.html

Best Practices for UX Design
https://docs.mendix.com/howto/front-end/ux-best-practices

Why UX and UI design should remain separate
https://uxdesign.cc/why-ux-and-ui-should-remain-separate-7d6e3addb46f


Shape Psychology:

"How to Craft a Powerful Logo Shape"
https://www.creativebloq.com/logo-design/psychology-logo-shapes-8133918

"Logo Design and the Psychology of Shape"
https://fabrikbrands.com/gut-feeling-and-trusting-your-instinct/

Logos and Branding:

"6 tips for using grids in logo design"
https://www.creativebloq.com/logo-design/6-tips-using-grids-logo-design-11513984

"A systematic logo design process to design any logo", By Adham Dannaway, 9/26/12
https://www.adhamdannaway.com/blog/branding/a-systematic-approach-to-logo-design

"Who Made That Android Logo?, By Pagan Kennedy, NY Times, 10/11/13
http://www.nytimes.com/2013/10/13/magazine/who-made-that-android-logo.html

"Interview with Sagi Haviv", By Debbie Millman, Adobe Create Magazine
https://create.adobe.com/2018/8/16/sagi_haviv_interview.html

"What’s a Picture Worth? Images, Type, and Logos", By Charles Purdy, Adobe Create Magazine
https://create.adobe.com/2017/8/21/what_s_a_picture_worth_images_text_and_logos.html

"Skeuomorphism vs. flat design vs material design"
https://99designs.com/blog/trends/skeuomorphism-flat-design-material-design/

Identity Style Guides from Around the World
https://www.logodesignlove.com/brand-identity-style-guides

Stony Brook University identity program
https://www.stonybrook.edu/brand/our-brand/

Evolving the Google Identity
https://design.google/library/evolving-google-identity/


Typography basics

Font Psychology
https://www.nickkolenda.com/font-psychology/

8 Rules for Creating Effective Typography
https://designshack.net/articles/graphics/8-rules-for-creating-effective-typography/

Type Specimen Sheets
https://printedmatterclass.wordpress.com/2012/11/10/type-specimen-sheets-homework-assignment/

"A Non-Designer's Guide to Pairing Fonts", By Nayomi Chibana
https://visme.co/blog/pairing-fonts/

Google Web Fonts Repository
https://fonts.google.com/

Browse Adobe Fonts
https://fonts.adobe.com/fonts


Color

https://color.adobe.com/create/color-wheel

Understanding Color: A Visual Guide
https://creativecloud.adobe.com/cc/discover/article/understanding-color-a-visual-guide

5 Ways to Build a Color Palette
https://creativecloud.adobe.com/cc/discover/article/five-ways-to-build-a-color-palette


Icons

A Brief History of Computer Icons
https://design.tutsplus.com/articles/know-your-icons-part-1-a-brief-history-of-computer-icons--psd-9805

6 Easy Steps to Better Icon Design
https://www.smashingmagazine.com/2016/05/easy-steps-to-better-logo-design/

How to Design a Top Quality Icon
https://www.creativebloq.com/graphic-design/how-design-top-quality-icon-10135092

The Story Behind Susan Kare's Iconic Design Work for Apple
https://milanote.com/the-work/the-story-behind-susan-kares-iconic-design-work-for-apple

Susan Kare, Iconographer
https://vimeo.com/97583369


Animation

"Understand Disney's 12 principles of animation" By Tammy Coron, 1/25/2021
https://www.creativebloq.com/advice/understand-the-12-principles-of-animation

"Physics of Animation", NSF Science Nation
https://www.youtube.com/watch?v=h6iu7e7jS1o

"The Rules of Cartoon Physics", Science On Screen
https://www.youtube.com/watch?v=5In4JG7YChU

"Laws of Motion n a Cartoon Landscape", By Andy Holder
https://www.youtube.com/watch?v=1XxVq34jY78

Neil deGrasse Tyson discusses the Cartoon Laws of Physics (National Geographic TV)
https://www.youtube.com/watch?v=8tD4CFgc3S8

Eadweard Muybridge studies of human locomotion
https://archive.org/details/Eadweard_Muybridge_-_The_Human_Figure_in_Motion

Animated Muybridge motion studies
https://commons.wikimedia.org/wiki/Category:Eadweard_Muybridge_animations


US Web Design System (USWDS)
https://designsystem.digital.gov/design-principles/


Practicals:

Web Design with Photoshop

Web Design with Dreamweaver

CSS Intro

Working with Images

HTML5 Media

Media Tricks

HTML DOM

Intro to JavaScript

Intro to JQuery

Drawing on the Canvas

Animating the Canvas

HTML5 Forms

Saving Form Data in a Google Spreadsheet

Responsive Web Sites


Examples:

Design Brief

CodeRead Design Brief

Flowlines

Presbytery of Long Island Web Site

DinoDig Educational Computer Game

SmartStep Math Learning Software

Wireframes

CodeRead version 1

CodeRead version 2

Typography

Kermit Communications Software Logo Sketches

Kermit Communications Software Logo

Tilles Center for the Performing Arts at LIU

CEAS Logotype

Icons

National Park Service Icon Sketch

National Park Service Symbol Set

Logos

Brooklyn College Learning Cafe Logo


Archive:

Mobile HCI Guidelines