GD202 Interactive Design I

An Introduction to User Interface and User Experience Design

Planning and sketching for interactive design. Photo by Helloquence on Unsplash.

Course Overview

Introduction to interactive mediums and the fundamentals of the interactive experience. With a focus on information architecture, interface design, and usability students will explore digital screens for web sites, mobile applications, and data-driven information systems.

Learning Outcomes

Upon successful completion of this course, students will be able to:

• Recognize effective user interfaces for web sites, mobile applications, and data driven information systems.
• Define User Centered Design (UCD) principles in various media platforms.
• Organize a body of information based on User Experience (UX), User Interface (UI) design, and Information Architecture (IA).
• Identify the principles of usability and human factors in interactive communications based on field research and usability testing.
• Prepare layout design, presentation graphics and integrate web typography for responsive interactive screens.
• Organize a body of information to an information design.
• Prepare layout and presentation requirements for information design.

Weekly Schedule

Week 1

January 8

Introduction to Interactive Design

• Defining interactive design.
• Terminology: the difference between UX and UI.
• Design skills and design tools.
• The work of a designer.
• Critiquing interface design.
• User interface design basics: interacting with users, behaviors and action, simplicity, learnability
• Exercise 1: Website User Interface Design Research. Due January 15.

The Importance of User Personas

• Research user personas to your advantage. Assimilate target market and niches for your digital target audience. Evaluate user persona demographic, psychographic and thought processes.
• Exercise 2: User Persona Mind Map

Week 2

January 15

Planning Features

• Plan a features list for an app. Learn about the implementation of information architecture and the planning process of data for an interactive web application.
• Explore different methods on how to organize navigation, and layout of an app using sitemaps, sketch prototype, and flow charts.

The Importance of the Iteration Process

• Review the design process: Features List, Sitemap, and Prototypes (sketches and wireframes), Mockups
• User Goals in interface design.
• Due: Exercise 1: Website User Interface Design Research.
• Due: Exercise 2: User Persona Mind Map.
• Assign Project 1: Features List. Due March 12.

Week 3

January 22

Site Maps

• Design Kit, A human-centred approach to design: Inspiration, Ideation and Implementation.
• Brainwriting as a way to generate ideas. Leveling the field for introverts and extroverts.
• Information Architecture (AI), wayfinding, and digital placemaking.
• Assign Project 2: Sitemap. Due March 12.

Week 4

January 29

Prototypes: Sketches and Wireframes

• Prototypes to quickly conceptualize and test ideas.
• Assign Project 3: Sketch Prototype. Due March 12.
• Assign Project 4: Wireframe Prototype. Due March 12.

Week 5

February 5

Styles and Mockups

• Design patterns, systems, and frameworks.
• Design critique: test and refine prototype concepts.
• Lab Time.
• Refine Project 3: Sketch Prototype.
• Refine Project 4: Wireframe Prototype.

Week 6

February 19

Prototyping and Wireframing with UX Design Tools

• Discuss available tools and approaches to prototyping and wireframing.
• Tools: Layouts, mockups, symbols, groups, images, icons.
• Use a UX design tool to create interactions for presentation.
• Lab Time.

Week 7

February 26

Publishing with Medium, Markdown and GitHub

• Site publishing platforms, open source and the democratization of the web.
• Learning to publish with text editors, markdown, Medium, and GitHub.
• User Testing on Multiple Screens.
• Conduct user testing methods on the wireframe process for good interactivity.
• Assign Project 5: User Testing & Iteration. Due March 12.

Week 8

March 5

Visual Design for Web Applications

• Learn how to create a style tile.
• Explore color theory, visual design, composition, for web applications. Digital Typography.
• Explore font pairings for the web in Google fonts, legibility on screens, typography rules for web applications.
• Assign Project 6: Style Tile Variations. Due March 26.

Week 9

March 12

Responsive Web Design

• Intro to Grid Layouts in Web Design.
• Tools for Website Design.
• Tools & Skills: guides, grids, shape masks, layer groups, buttons, textures
• Defining layout sizes for the interactive platform. Exploring image optimization for the web. Planning web design in Photoshop, Illustrator & XD.
• Assign Project 7: Responsive Website Design Mockup. Due April 17.
• Lab time.
• Due: Project 1: Features List.
• Due: Project 2: Sitemap.
• Due: Project 3: Sketch Prototype.
• Due: Project 4: Wireframe Prototype.
• Due: Project 5: User Testing & Iteration.

Week 10

March 19

Introduction to HTML

• Understanding web semantics and learn basic HTML tag structure.
• Discussion and design critiques.
• Lab time.

Week 11

March 26

Introduction to CSS: Web Typography & Google Fonts

• Applying google fonts in CSS, line height, font styles, and tracking.
• Lab time.
• Due: Project 6: Style Tile Variations.

Week 12

April 2

• Easter Monday
• No class.

Week 13

April 9

• Continue to work on projects.
• Lab time.

Project Submissions

• Project 7: Custom Responsive Website Design Project.
  Due at 1:00 pm, Tuesday, April 17, 2018.

Textbooks, References, Materials

• UFV Library Abbotsford
• Additional resources and support material will be distributed in class.

Recommended

• Lynda.com: Online UX Design Tutorials