Portfolio: Interface Design

GWDB202: Interface Design, Winter 2017


Interface Design deals specifically with the planning, layout, and functionality of how we interact with a device or piece of technology. In this class we focused on interfaces as they relate to screen-based apps and web sites. The focus was on planning the functionality of an interface to address specific problems. Understanding the needs of the user and incorporating that understanding into the design was emphasized throughout the course.

Course Description and Objectives

Below is a synopsis of the course syllabus.

  • Course Title: Interface Design
  • Course Number: GWDB202 A
  • Session/Year: Winter 2018
  • Day/Time: Tuesdays and Thursdays 6:00pm – 8:45pm, Lab 807
  • Instructor: Patricia Kruep
  • Contact Info: pkruep@aii.edu
  • Office Hours: Tuesdays & Thursdays, 1:30 – 2:00pm
  • *appointments preferred

Course Description: An exploration of the synthesis of visual and information design principles This course will examine the conceptual and practical design of interfaces.

Core Course Competencies: Upon successful completion of the course, the student should be able to:

  • Define the principles of interface design
    • Describe the principles of design in the context of visual interfaces
    • Describe the relationship between user needs and interface design
  • Apply the principles of design to interfaces
    • Create hierarchies with layout, color, type, and image
    • Combine design elements to communicate the tone and message
  • Develop navigation systems
    • Solve user-centered design problems with interface design
    • Combine the principles of usability and design to create effective interface systems


My primary goal for this course was to emphasize the purpose and functionality of an interface in the context of solving and identified problem. Aesthetics and visual design do a play a role in interface design, but I wanted the students to develop and understanding of the interface components as means to solve a problem without getting hung up on colors or typefaces.

My secondary goal was to have the students collaborate to solve the problems put before them. Interface design is a team sport and involves multiple disciplines, egos, and view points. Open collaboration is key to developing a successful product. To that end, I created two projects for the entire class to work on as a group (there were only eight students). For both projects, detailed below, the students took the lead in shaping the projects’ outcomes. I took on a role of creative director and sometimes facilitator, to help guide them along. As a group, we decided on the tools we would use to design, create, and share the works in progress.


In addition to a handful of smaller, individual assignments, the course centered on two primary projects. The first project, a UI kit, was the stepping stone for the second project. Not only was this project their trial run for figuring out how to work as a group, they would also use the UI kit to design the second project. The second project was to design the interface for an app that connected people who needed help with people who were volunteering to help. More on the app is below.

UI Kit

A UI kit is a collection of typefaces, color palettes, widgets, interface elements, and components that share a cohesive visual design theme. As a group, the UI kit is a subset of a larger design system. A design system typically includes UI elements and guidelines for branding, styles, voice (copy style), motion, and coding, among others. Google’s Material Design is a prominent example of a design system.

The students’ task was to design a UI kit. They would use this UI kit for their next project. Consequently, the components, colors, typography, and design had to be something they could all work with. To start, the students researched existing kits to get a sense of the components needed to build a kit. Each student then worked on their own take of design elements, starting with colors and typography. As a group, the students selected one or two color and type palettes to refine into a single palette of type styles and colors. The process was repeated to design the interface components. The students split the list into two parts with half the class taking one part and the other half taking the second part. As they worked on the components, the students would evaluate and discuss each other’s progress. The project culminated in a completed set of interface components.

Euidee Bay HELPS app