ART 229

Interface Design 1

@ KCC New Media Arts
ART 229

Interface Design 1

Intro to User Interface Design

Teacher: Chris Gargiulo

User Interface Design (UI) can be defined as the design process for creating visual interfaces. Combined with Information Architecture (IA) and User Experience Design (UX), UI is arguably one of the most important aspects of the web design and development process. Informed UI designers try to embrace User-Centered-Design (UCD) principles to help improve the usability of interactive systems.

In the context of web design, UI design can be defined to be as specific as the sole process of designing visual mockups, or more broadly to include the larger process of discovering, defining, and designing a design system from start to finish. This class is more closely aligned with the latter, where students learn the basics of how to structure complex information systems; how to set meaningful usability goals; how to layout content for multiple screen sizes and dimensions; how to define navigational menus that site visitors will immediately understand; and how to synthesize a design to ultimately create an enjoyable experience for users while meeting the needs and requirements for all stakeholders and target audiences. Quality interfaces that meet both client and user needs can be successfully created when designers go through the full creative design process. Integral to this process are the deliverables and documentation used in the industry for client based projects that help to ensure that the final product meets all of the primary project goals and objectives. In this class, students plan and design two web sites over the course of the semester, one during the first half of the semester and one during the second half. For both projects, students will go through the same process of choosing a client, researching the industry, defining the information architecture, drafting necessary conceptual planning documentation (such as site maps and wireframes), then going through multiple rounds of visual design revisions until a mockup is created that best suits the project demands and end user.

ART 229 Syllabus

Course Info

The Schedule

Points
Grade
100
Define
Define
20%
100
Draft
Draft
20%
100
Design
Design
20%
100
Midterm
Final
20%
100
Crit
Crit
20%
500
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
100%

Grading System

20%
Definition Phase

Project Brief
100 Points

20%
Draft Phase

Conceptual Plan
100 Points

20%
Design Phase

Three Rounds of UI Designs
200 Points

20%
Class Participation

Critiques
100 Points

The Calendar

Calendar loading...

The Process

The Deliverables

Project Briefs

Due: Week 2; 10

100 Points

Conceptual Plans

Due: Weeks 4 & 5; 11 & 13

100 Points

UI Designs

Due: Weeks 6, 8, & 9; 13, 15, & 17

100 Points

Final Presentations

Due: Week 9; 17

100 Points

Course Content

  1. Introduction

  2. Definition Phase

  3. Drafting Phase

  4. Design Phase

Course Deliverables

10 Deliverables for Site #1

Definition Phase

  1. Project Brief Week 2

Drafting Phase

  1. Site Map Week 4
  2. Lo-Fi UX Wireframe Prototype Week 5
  3. Style Tiles Week 5

Design Phase

  1. Round 1 UI Mockup Design: Home Page A Week 6
  2. Round 1 UI Mockup Design: Home Page B Week 6
  3. Round 1 UI Mockup Design: Home Page C Week 6
  4. Round 2 UI Mockup Design: Home Page D Week 8
  5. Round 2 UI Mockup Design: Home Page E Week 8
  6. Final/R3 UI Mockup Design: Home Page F Week 9

15 Deliverables for Site #2

Definition Phase

  1. Project Brief Week 10

Drafting Phase

  1. Site Map Week 11
  2. Lo-Fi UX Wireframe Prototype Week 13
  3. Style Tiles Week 13

Design Phase

  1. Round 1 UI Mockup Design: Home Page A Week 14
  2. Round 1 UI Mockup Design: Home Page B Week 14
  3. Round 1 UI Mockup Design: Home Page C Week 14
  4. Round 2 UI Mockup Design: Home Page D Week 16
  5. Round 2 UI Mockup Design: Sub Page D1 Week 16
  6. Round 2 UI Mockup Design: Home Page E Week 16
  7. Round 2 UI Mockup Design: Sub Page E1 Week 16
  8. Final/R3 UI Mockup Design: Home Page F Week 17
  9. Final/R3 UI Mockup Design: Sub Page F1 Week 17
  10. Final/R3 UI Mockup Design: Sub Page F2 Week 17
  11. Final/R3 UI Mockup Design: Sub Page F3 Week 17

Students

Current Students

Past Students

About

This is the faculty web site for KCC New Media Arts instructor Chris Gargiulo. Chris is a designer, animator, and filmmaker with experience in print design, web design, front-end web development, motion graphics, and animation for various film, web, and multimedia projects. This site is for his students and for all who are interested in web design related topics and techniques.

Contact

For specific information about this site and the Interface Design concentration of courses within New Media Arts program at Kapi‘olani Community College, please contact:

Chris Gargiulo

Telephone: 808-734-9707
Email: gargiulo [at] hawaii.edu

For more general information about New Media Arts program at Kapi‘olani Community College, the Associates degree, and the admissions process to become a student, please contact:

Steve Harris

Telephone: 808-734-9510
Email: snharris [at] hawaii.edu
Chris Gargiulo KCC New Media Arts