the studio education

Education > Introduction to Design

UX/UI Design Spring 17


Catalog description - The technological changes of the past 10 years have expanded the possibilities for graphic interface design in countless ways. From devices, to wearables, to the Internet of Things, providing an intuitive and enjoyable experience via a Graphic Interface is critical to both attracting and keeping users. Core concepts of Graphic Design, such as hierarchy, information architecture and narrative flow, grids, and basic typography are central to successful designs and experiences. In addition to reinforcing these basics, this class aims to demystify user experience by having students engage in rapid prototyping of Interfaces using contemporary methods and tools. Students will not only create workable prototypes of their designs and apps, they will rapidly test them with an audience, gather feedback and rework their designs based on that feedback. These experiences will give students a practical and simple introduction to what UX is while also explaining some of the core concepts of usability.

Prerequisites: 1 year of graphic design training or permission of instructor



(Below you see a broad overview of the course. Please download the Course Syllabus file to see the current and complete schedule)

Course Overview and Assignments


Course Introduction:

Course Syllabus



d.School Crash Course:

A1_Communicate Transportation Options method

A2-UCI Transportation Options

A2-UCI Website

Case/CIA Challenge



UCI Workday

Emotions and User Experience

Methods: Look and Ask

Read Pretotype It!



Present A2

Emotion and User Experience

Methods: Learn and Try

Start Semester Projects

Prepare semester projects.

Empathy Maps

Empathy Map Samples

How to Craft a Design Challenge

Service Design Tools




A3 Individual Projects begin

Breaking Boundaries, Influencing Experiences

UI: Site Maps, Wireframs, and Space Plans 1

Journey Maps

UX Checklist on GitHub



Principles and Patterns in Design Language

Project Planning 101


Build an Experience Map



Storytelling As UX Guide

UI: Site Maps, Wireframes, and Space Plans 2




A3: Projects Presentation

User Testing 101 (How to sort out valuable feedback)

How to Write Surveys

A3b: Project Plans



Spring Break (no classes this week)



Evaluating User Experience

Information Architecture and Interaction within Design

UX Methodology



Presentations of A3 and A3b



Best Practices, New Insights



Work Day

Prep for Final

Template for Boards



Work Day

Best Practices

History of the Hamburger

UX Analysis of Windows 8




Spring Show - Date TBD



Final Critique

Final presentation and critique


Telos Alliance UX Resources

Web Resources

UX Mastery

User Focus

The Nielsen Norman Group


Competency Star

Key Competencies

Stanford d.School Brainstorm

Empathy Map

Journey Map



Methodology: Look and Ask

Stakeholders and Empathy Maps

Design 101

Course Extras

External Links

LinkedIn Redesign; Positive Response

LinkedIn Redesign; Negative Response

Penn Station Atlas Project

5 Designers on Tools They Can Not Live Without

ReadWrite Blog

Camille Magnon Website

Layout User Flow (with Sketch)

Basic User Flow Layout

Device Metrics


Does a Designer's Opinion Mean More Than The User's

UX Case Study: How Hubspot Redesigned Their Homepage

This is Your Brain on Shakespeare

Pretotype It!

Mobile App Playbook

Wireframes - The Beginner's Guide

What Is A Minimum Viable Product?

“You’re selling the vision and delivering the minimum feature set to visionaries not everyone.” — Steve Blank

Facebook's Perfect Impossible Chatbot

“The first chatbot was created in 1964, by MIT professor Joseph Weizenbaum. It trotted out canned lines in response to specific keywords, most successfully when playing the role of a therapist. To Weizenbaum’s annoyance, many people who tried it, including his own secretary, were smitten despite knowing that the bot, called Eliza, knew nothing. “I had not realized that extremely short exposures to a relatively simple computer program could induce powerful delusional thinking in quite normal people,” he later wrote.”

Vox is a leader in "card" design on the web and devices. The site combines standard, online journalistic practices with stacked information with their award-winning cards.

"Level Five" by Paula Scher

Paper by FiftyThree from FiftyThree on Vimeo.