KCC New Media Arts - Chris Gargiulo's Faculty Web Site

Kapi‘olani Community College, University of Hawai‘i - NMA Interface Design

ART 285

Interface Design Studio

Interface Design Exploration

Interface Design Studio provides studio experience for students to work on large-scale interface design projects by going in depth into the full design process. Students can work indivually or collaboratively to explore an interface design project of their choice.

Interface Design Studio

Introduction and Course Overview

Interface Design is a broad field that builds upon a foundation in fine art and graphic design and overlaps with multiple domains such as communications, computer science, art, and human-computer-interaction. This class is an opportunity for students to go in depth into a chosen area of focus by utilizing the studio model of learning in a curricular environment structured by the creative process for interface design.

One of the limitations of any digital media curriculum is impossibility to offer courses that comprehensively cover all facets of a dymanic field that is driven by an actively growing industry that changes rapidly. So many new technologies and techniques are being developed at alarming rates, that it creates a difficult challenge for both students and educators. This course is designed to address this problem on a curricular level by providing an opportunity for students with varying interests to choose one semester-long project that best suits their individual goals and style of self-learning. Individual (and group) projects may take several different forms, such as creating a custom designed web site using a content management system, or creating a responsive web site designed to adapt to multiple screen sizes, or an app for a mobile device, or a video that uses advanced motion graphics, or a fine art gallery installation, or an advertising campaign that spans multiple media. The possibilities are endless.

Course Structure

1 Project. 17 Weeks. The Full Creative Design Process.

The structure of the course is determined by the creative process. Students work on one large-scale project for the entire semester (16 weeks) by going through the full creative design process consisting of three primary phases: Pre-Production (Weeks 1-4), Production (Weeks 5-10), and Post-Production (Weeks 11-16). The final project is due during the last week of the semester (Week 17).

  • PHASE 1:
    Pre-ProductionAnalysis & Planning
    PHASE 2:
    ProductionDesigning, Shooting, Animating, Etc.
    PHASE 3:
    Post-ProductionCoding, Editing, Testing, Etc.
    Final
    DueCritique
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

500 Point Grading System

Your course grade is based upon a total of 500 Points.

There are nine deliverables for this course: a creative brief (50 points), conceptual plans (50 points), three rounds of visual designs (Rounds 1, 2, & 3 - worth a total of 100 points), two drafts (1st & 2nd - worth a total of 100 points), and the final project (100 Points).

The final project is graded using a detailed grading a rubric. Class participation (100 Points) is graded based upon how much you participate a) during formal critiques and b) online via Laulima. There are two formal critiques: the midterm critique (Week 8) and the final critique (Week 17). All other critiques will be informally conducted and take place on a bi-weekly basis on odd numbered weeks. All even numbered weeks will be in-class working periods.

  • PHASE 1: PRE-PRODUCTION - (100 Points) Research, Analysis, Writing, Planning & Pre-Production:
    20%
    Brief 50 Pts
    Plans 50 Pts
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
    100 Pts
  • PHASE 2: PRODUCTION - (100 Points) Designing, Prototyping, & Production:
    20%
    Visual Tests0 Points
    Design 140 Pts
    Design 230 Pts
    Design 330 Pts
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
    100 Pts
  • PHASE 3: POST-PRODUCTION - (100 Points) Coding, Multiple Drafts, & Post-Production:
    20%
    Technical Tests0 Points
    Draft 150 Pts
    Draft 250 Pts
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
    100 Pts
  • FINAL PROJECT - (100 Points) Final Presentation, Final Display, & Project Launch:
    20%
    Final100 Pts
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
    100 Pts
  • CLASS PARTICIPATION - (100 Points) Online Discussions via Laulima & In-class Critiques:
    20%
    LaulimaVariable Points
    Crit~50 pts
    LaulimaVariable Points
    Crit~50 pts
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
    100 Pts

Calendar

A monthly overview of the semester

Course Content

A Week-by-Week Breakdown including all links, lessons, assignment details, etc.

​
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
1 Intro to the Course Expand/Collapse

Week 1: This week we will go over the course and the major assignments and deliverables. Lessons include an intro to the creative design & production process for interface design.

Agenda:

  1. Introduction to the course
    • In this class we will go through in detail the design process of planning and designing one large scale interface design related project.
  2. Game plan for the semester
    • Overview of the syllabus
    • One project, eight deliverables
  3. We will take a look at student work from other classes that fits well within the scope of this course.
  4. Group brainstorming sessions - we will hear project idea pitches from all students, then discuss and help each student by sharing thoughts, ideas, recomendations, resources, etc.

The Full Design Process for Interface Design:

The Full Design Process for Time-Based Media:

Class examples + related links:

CMS-driven Sites:

Responsive Design:

Mobile Apps:

Motion Graphics:

Print/Graphic Design:

Fine Art/Installation:

Assignment: Project BriefDue: Week 2

  1. Set up your class web page.
  2. Come to class with your project idea(s) and be prepared to pitch and discuss them during group brainstorming sessions. Important questions to address:
    • Who is the client?
    • How many deliverables will you be creating and what are they exactly? (clearly define all deliverables)
  3. Start researching your project in order to write up the Project Brief (due Week 2) and to begin your Concept Plan (due week 4) for your project.
  4. Conduct as many visual and technical tests as needed to enable your project to be a success. Early tests are essential for complex technical projects.
2 Pre-Production - Project Briefs Due Expand/Collapse

Week 2: Project Briefs are due this week. Next, you should be working on your pre-production conceptual plans.

Agenda

  1. A clarification of conceptual plan and project deliverables.
    • In-class exercise: Use this semester planning pdf to map out all of the deliverables and key milestones/due dates for your project for the semester. Please note that everyone's project is different, therefore the deliverables and due dates will be different for each student.
  2. We will discuss each student's game plan (deliverables and milestones) and conceptual plans for the semester.

Assignment: Conceptual PlansDue: Week 4

  1. After you have chosen your project and completed your creative brief, begin to conceptually plan your project. Start by clearly defining all deliverables and sketching what they may eventually look like.
  2. Begin conducting visual and technical tests that will help determine the potential manifestations of your project.
  3. Consider conducting and creating other pre-production exercises (not required as part of this course) such as creating mood boards, typography tests, early prototypes, etc.).
3 Work Week Expand/Collapse

Week 3: Work Week. You should be working on your pre-production conceptual plans.

Assignment: Conceptual PlansDue: Week 4

  1. After you have chosen your project and completed your creative brief, begin to conceptually plan your project. Start by clearly defining all deliverables and sketching what they may eventually look like.
  2. Begin conducting visual and technical tests that will help determine the potential manifestations of your project.
  3. Consider conducting and creating other pre-production exercises (not required as part of this course) such as creating mood boards, typography tests, early prototypes, etc.).
4 Pre-Production - Concept Plans Due Expand/Collapse

Week 4: Conceptual plans are due. Next, begin transitioning from pre-production to production by working on the visual designs, graphical assets, etc. in preparation for a Round 1 visual design review.

Agenda:

  1. Informal working critique of conceptual plans.

Assignment: Round 1 Visual DesignsDue: Week 6

  1. After you have clearly defined your deliverables and visually mapped out your conceptual plans, begin working on the final look-and-feel of your project, which may vary from project-to-project, but may include visual mockups/comps, final illustrations or character designs, principle photography/video, etc. Motion design pieces require a story reel/animatic as part of a round 1 visual design.
  2. Continue conducting visual and technical tests that will help determine the outcome of your project.
5 Work Week Expand/Collapse

Week 5: Work Week. You should be working on all graphical assets that you will need for your project, in preparation for a Round 1 review of the visual designs for your project due next week.

Assignment: Round 1 Visual DesignsDue: Week 6

  1. Continue production of your round 1 designs in preparation for review next week. All designs should be complete and polished, ready for a hypothetical client presentation and approval meeting.
  2. Continue conducting visual and technical tests that will help determine the outcome of your project.
  3. Since this is a work week, please take advantage of in-class time to get 1-on-1 support time with the instructor.
6 Production - R1 Visual Designs Due Expand/Collapse

Week 6: Round 1 Critique of Visual Designs. Be prepared to present your visual designs in multiple thematic directions for all graphical assets for all deliverables, ready for client review.

Agenda:

  1. Informal working critique of your Round 1 visual designs.

Assignment: Round 2 Visual DesignsDue: Week 8

  1. Based upon the feedback from your Round 1 designs, continue production of your visual designs in preparation for a Round 2 review in two weeks.
    • For those designs from Round 1 that were working successfully, you should be enhancing the designs by making them stronger.
    • For those designs from Round 1 that were not working well, you need to decide if they should be cut completely and redone from scratch, or reworked significantly for Round 2.
    • All designs should be complete and polished, ready for an iterative client presentation and approval meeting.
  2. Continue conducting visual and technical tests that will help determine the outcome of your project.
7 Work Week Expand/Collapse

Week 7: Work Week. You should be working on all graphical assets that you will need for your project, in preparation for a Round 2 review of the visual designs for your project due next week.

Assignment: Round 2 Visual DesignsDue: Week 7

  1. Based upon the feedback from your Round 1 designs, continue production of your visual designs in preparation for a Round 2 review in next week.
    • For those designs from Round 1 that were working successfully, you should be enhancing the designs by making them stronger.
    • For those designs from Round 1 that were not working well, you need to decide if they should be cut completely and redone from scratch, or reworked significantly for Round 2.
    • All designs should be complete and polished, ready for an iterative client presentation and approval meeting.
  2. Continue conducting visual and technical tests that will help determine the outcome of your project.
  3. Since this is a work week, please take advantage of in-class time to get 1-on-1 support time with the instructor.
8 Production - R2 Visual Designs Due Expand/Collapse

Week 8: Round 2 Critique of Visual Designs. Be prepared to present your visual designs in multiple thematic directions for all graphical assets for all deliverables, ready for client review.

Critique Schedule:

Tuesday Thursday Time
----- SETUP ----- 10:45-10:55
#1 #8 10:55-11:05
#2 #9 11:10-11:20
#3 #10 11:25-11:35
#4 #11 11:40-11:50
----- 20 Min. BREAK ----- 11:55-12:15
#5 #12 12:15-12:25
#6 #13 12:30-12:40
#7 #14 12:45-12:55
----- CLOSING REMARKS ----- 12:55-1:15

Assignment: Round 3 Visual DesignsDue: Week 10

  1. Based upon the feedback from your Round 2 designs, continue production of your visual designs in preparation for a Round 3 review next week.
    • If you have not chosen a single, final thematic direction for each of your deliverables, please take advantage this time and the Round 3 critique to create the final options for the client to choose from (or for your critics to help you choose).
    • If you have already chosen the final thematic direction, consider re-clienting your other visual design(s) and themes to repurpose them as potential additional portfolio items.
    • Be sure to reflect upon all of the feedback gathered during the critique to enhance all designs by making them stronger.
    • All designs should be FINAL and polished, ready for a client presentation and FINAL visual design approval meeting.
  2. Continue conducting visual and technical tests that will help determine the outcome of your project.
9 Work Week Expand/Collapse

Week 9: Work Week. You should be working on all FINAL visual designs for your project, in preparation for a Round 3 review next week.

Lesson:

Assignment: Round 3 Visual DesignsDue: Week 10

  1. Continue production of your FINAL Round 3 designs in preparation for an informal review next week.
    • If you have not chosen a single, final thematic direction for each of your deliverables, please take advantage this time and the Round 3 critique to post the final options for the client to choose from (or for your critics to help you choose).
    • If you have already chosen the final thematic direction, consider re-clienting your other visual design(s) and themes to repurpose them as potential additional portfolio items.
    • Be sure to reflect upon all of the feedback gathered during the critique to enhance all designs by making them stronger.
    • All designs should be FINAL and polished, ready for a client presentation and FINAL visual design approval meeting.
  2. Continue conducting visual and technical tests that will help determine the outcome of your project.
  3. Since this is a work week, please take advantage of in-class time to get 1-on-1 support time with the instructor.
10 Production - R3 Visual Designs Due Expand/Collapse

Week 10: Round 3 Visual Designs are due. Be prepared to present your visual designs in an infomal, working critique.

Agenda:

  1. Informal working critique of Round 3 visual designs.

Assignment: 1st Draft (v1)Due: Week 13

  1. Based upon all of the feedback from your visual design reviews and all of your visual and technical tests to date, now is the time to synthesize all of your assets into a final product.
    • Consider a blog-style or Behance-style portfolio entry, with multiple images displaying the final product as a mockup and a series of images/photographs of your creative design process.
    • Consider a case-study style portfolio entry that one might find on your personal portfolio web site.
  2. John Doe Examples (as one example of a portfolio entry that evolved from version-to-version with the final product displayed as mockups and the process imagery changing over time):
  3. Each round of drafts will vary from project to project (deliverable to deliverable), but regardless of the client and medium, all drafts should be 100% complete, ready to be given to the client.
11 SPRING BREAK Expand/Collapse

Week 11: SPRING BREAK. Get some rest, but be prepared to present your 1st Round Drafts after the break.

Assignment: 1st Draft (v1)Due: Week 13

  1. Based upon all of the feedback from your visual design reviews and all of your visual and technical tests to date, now is the time to synthesize all of your assets into a final product.
    • Consider a blog-style or Behance-style portfolio entry, with multiple images displaying the final product as a mockup and a series of images/photographs of your creative design process.
    • Consider a case-study style portfolio entry that one might find on your personal portfolio web site.
  2. John Doe Examples (as one example of a portfolio entry that evolved from version-to-version with the final product displayed as mockups and the process imagery changing over time):
  3. Each round of drafts will vary from project to project (deliverable to deliverable), but regardless of the client and medium, all drafts should be 100% complete, ready to be given to the client.
12 Work Week Expand/Collapse

Week 12: Work Week. You should be working on your first round drafts of your final product.

Agenda:

  1. In-class working time. Please take advantage of in-class time to work with the instructor for 1-on-1 feedback on your project.

Assignment: 1st Draft (v1)Due: Week 13

  1. Based upon all of the feedback from your visual design reviews and all of your visual and technical tests to date, now is the time to synthesize all of your assets into a final product.
    • Consider a blog-style or Behance-style portfolio entry, with multiple images displaying the final product as a mockup and a series of images/photographs of your creative design process.
    • Consider a case-study style portfolio entry that one might find on your personal portfolio web site.
  2. John Doe Examples (as one example of a portfolio entry that evolved from version-to-version with the final product displayed as mockups and the process imagery changing over time):
  3. Each round of drafts will vary from project to project (deliverable to deliverable), but regardless of the client and medium, all drafts should be 100% complete, ready to be given to the client.
13 Post-Production - 1st Draft Due Expand/Collapse

Week 13: Working critique of your 1st Round Drafts.

Agenda:

  1. Working critique of your 1st Round Drafts.

Assignment: 2nd Draft (v2)Due: Week 16

  1. Based upon all of the feedback from your visual design reviews and all of your visual and technical tests to date, now is the time to synthesize all of your assets into a final product.
    • Consider a blog-style or Behance-style portfolio entry, with multiple images displaying the final product as a mockup and a series of images/photographs of your creative design process.
    • Consider a case-study style portfolio entry that one might find on your personal portfolio web site.
  2. John Doe Examples (as one example of a portfolio entry that evolved from version-to-version with the final product displayed as mockups and the process imagery changing over time):
  3. Each round of drafts will vary from project to project (deliverable to deliverable), but regardless of the client and medium, all drafts should be 100% complete, ready to be given to the client.
14 Work Week Expand/Collapse

Week 14: Work Week. Continue refining your final product for final portfolio presentation.

Agenda:

  1. In-class working time. Please take advantage of in-class time to work with the instructor for 1-on-1 feedback on your project.

Assignment: 2nd Draft (v2)Due: Week 16

  1. Based upon all of the feedback from your visual design reviews and all of your visual and technical tests to date, now is the time to synthesize all of your assets into a final product.
    • Consider a blog-style or Behance-style portfolio entry, with multiple images displaying the final product as a mockup and a series of images/photographs of your creative design process.
    • Consider a case-study style portfolio entry that one might find on your personal portfolio web site.
  2. John Doe Examples (as one example of a portfolio entry that evolved from version-to-version with the final product displayed as mockups and the process imagery changing over time):
  3. Each round of drafts will vary from project to project (deliverable to deliverable), but regardless of the client and medium, all drafts should be 100% complete, ready to be given to the client.
15 Work Week Expand/Collapse

Week 15: Work Week. You should be working on your second round drafts due next week.

Agenda:

  1. In-class working time. Please take advantage of in-class time to work with the instructor for 1-on-1 feedback on your project.

Assignment: 2nd Draft (v2)Due: Week 16

  1. Based upon all of the feedback from your visual design reviews and all of your visual and technical tests to date, now is the time to synthesize all of your assets into a final product.
    • Consider a blog-style or Behance-style portfolio entry, with multiple images displaying the final product as a mockup and a series of images/photographs of your creative design process.
    • Consider a case-study style portfolio entry that one might find on your personal portfolio web site.
  2. John Doe Examples (as one example of a portfolio entry that evolved from version-to-version with the final product displayed as mockups and the process imagery changing over time):
  3. Each round of drafts will vary from project to project (deliverable to deliverable), but regardless of the client and medium, all drafts should be 100% complete, ready to be given to the client.
16 Post-Production - 2nd Draft Due Expand/Collapse

Week 16: 2nd Drafts are due this week. Next, begin refining your final product for final portfolio presentation.

Agenda:

  1. Informal "Working" Critique: 1-on-1 with the instructor.
  2. We will discuss each student's 2nd draft presentation approach and discuss the pro's, con's and potential strategies for improving the work for the final presentation.

Assignment: FINALDue: Week 17

  1. Based upon all of the feedback from your visual design reviews and all of your visual and technical tests to date, now is the time to synthesize all of your assets into a final product.
    • Consider a blog-style or Behance-style portfolio entry, with multiple images displaying the final product as a mockup and a series of images/photographs of your creative design process.
    • Consider a case-study style portfolio entry that one might find on your personal portfolio web site.
  2. John Doe Examples (as one example of a portfolio entry that evolved from version-to-version with the final product displayed as mockups and the process imagery changing over time):
  3. Each round of drafts will vary from project to project (deliverable to deliverable), but regardless of the client and medium, all drafts should be 100% complete, ready to be given to the client.
17 FINAL Expand/Collapse

Week 17: Final Critique. Be prepared to present your final project in an formal critique for client review.

Critique Schedule:

Student Time
----- SETUP ----- 8:00-8:10
#1 8:15-8:25
#2 8:30-8:40
#3 8:45-8:55
#4 9:00-9:10
#5 9:15-9:25
#6 9:30-9:40
----- 10 Min. BREAK ----- 9:45-9:55
#7 10:00-10:10
#8 10:15-10:25
#9 10:30-10:40
#10 10:45-10:55
#11 11:00-11:10
#12 11:15-11:25
----- CLOSING REMARKS ----- 11:30-12:00

Quotes

Random quotes that are relavent to this class

"The design studio is a type of professional education, traditional in schools of architecture, in which students undertake a design project under the supervision of a master designer. Its setting is the loft-like studio space in which anywhere from twelve to as many as twenty students arrange their own drawing tables, papers, books, pictures, drawings and models. In this space, student spend much of their working lives, at times talking together, but mostly engaged in private, parallel pursuits of the common design task"

Schon, Donald. (1983). The reflective practitioner: How professionals think in action. New York: Basic Books.
Lackey, J. A. (1999). 'A History of the Studio-based Learning Model.' Accessed 12th April 2005.

"Studio-based learning has emerged from the design discipline of architecture. Lackey (1999) identifies the important features of studio-based learning, setting the design problem, periodic lectures, critique of student work (four distinct types: desk critique; pin-up; interim/midterm critique; and final critique), and assessment by jury. In the studio, the design teacher engages the student in action-based activity. (Kvan, 2001) The relationship in this setting between teacher and student, is framed by the master-apprentice approach. (Schön, 1987) The four fundamental steps in the studio-based learning process have been described (Kvan, 2001). First, there is the formulation of the design problem, then exploration of solutions through action-based activity, followed by problem re-examination. The student recycles through these steps before the student proceeds to the final step of examination by jury."

Ellmers, G. (Ed.). (2006). Reflection and graphic design pedagogy: Developing a reflective framework to enhance learning in a graphic design tertiary environment. Proceedings of Thinking the Future: Art, Design and Creativity: ACUADAS 2006 Conference. Melbourne, 27- 29th September 2006. University of Melbourne.

↑ back to the top ↑