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/

Heraldry and symbols:

Heraldry video
https://www.youtube.com/watch?v=zexpH6GCOh8

Heraldry symbols
https://www.english-heritage.org.uk/siteassets/home/easter/herladry-activity-pack-1.pdf

40 common symbols and their meanings
https://visme.co/blog/symbols-and-meanings/

The difference between a seal and a logo
https://www.thinkleapfrog.com/blog/your-visual-identity-seal-vs-logo#:~:text=Most%20schools%20have%20an%20official,and%20where%20you%20are%20going

Logos and Branding:

"The 7 types of logos and how to use them"
https://www.vistaprint.com/hub/types-of-logos
Video:
https://www.youtube.com/watch?v=mKNAWeKIMfo

"Pictorial Mark Logos and Their Story of Success"
https://www.youtube.com/watch?v=Y2TeshINuJ8

"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


Infographics

7 Common Types of Infographics
https://www.youtube.com/watch?v=A6_7zC0mB9w

Infographics Overview from California State University San Marcos
https://www.csusm.edu/iits/services/ats/idesign/toolkits/infographics.html

Profile of Edward Tufte
https://washingtonmonthly.com/magazine/mayjune-2011/the-information-sage/

The 5 Most Influential Data Visualizations of All Time
https://ir.westcliff.edu/wp-content/uploads/2019/07/5_most_influtential_visualswp.pdf

The Art of Data Visualization (PBS video)
https://www.youtube.com/watch?v=AdSZJzb-aX8

Tufte: Beautiful Evidence
https://www.youtube.com/watch?v=Th_1azZA2OY

Tufte’s Visualization Principles
https://thedoublethink.com/tuftes-principles-for-visualizing-quantitative-information/

Web Design Based on Tufte’s Principles
https://chnm.gmu.edu/digitalhistory/links/cached/chapter4/4_13b_tufte.htm

Hans Rosling’s Gapmider Visualizations
https://www.gapminder.org/tools/

Download Gapminder Vis Tools
https://www.gapminder.org/tools-offline/

Hans Rosling TED Talk
https://www.ted.com/talks/hans_rosling_the_best_stats_you_ve_ever_seen

Ben Shneiderman’s Treemap Art
https://treemapart.wordpress.com/full-views/


Wireframes

Benefits of Wireframes : Why Wireframes are beneficial
https://creately.com/guides/wire-frame-benefits/

What Is A Wireframe? A Comprehensive Guide
https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/

How to Draw a Wireframe (Even if You Can’t Draw), Nielsen Norman Group
https://www.nngroup.com/articles/draw-wireframe-even-if-you-cant-draw/

Prototypes vs. Wireframes in UX Projects
https://www.nngroup.com/videos/prototypes-vs-wireframes-ux-projects/

Video : https://www.youtube.com/watch?v=miVcrftnhzM


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

Animation Principles for the Web
https://cssanimation.rocks/principles/

UX Animation
https://blog.tubikstudio.com/web-animation/

Icon Animations
https://medium.com/inspiration-supply/icons-animations-8e0539f8857e

UX Animations - NN Group
https://www.youtube.com/watch?v=nV0ahPAxSbI


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


Game UI

Game UI
https://www3.cs.stonybrook.edu/~tony/ui/lectures/game_design/gameUI.pdf

Level Design
https://www3.cs.stonybrook.edu/~tony/ui/lectures/game_design/leveldes.pdf

Game Mechanics
https://www3.cs.stonybrook.edu/~tony/ui/lectures/game_design/GameMechanics.pdf

Celia Hodent - Game Ui in Fortnite
https://www.youtube.com/watch?v=4DE_4HUX94E

Amy Jo Kim - Cooperative Gaming
https://www.youtube.com/watch?v=NIayQD4qcYc

Amy Jo Kim - Smart Gamification
https://www.youtube.com/watch?v=F4YP-hGZTuA


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

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