COVID-19 Announcement

See Online Schedule & Details Below

ART 285

Interface Design Studio

@ KCC New Media Arts
ART 285

Interface Design Studio

Interface Design Exploration

Teacher: Chris Gargiulo

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 individually or collaboratively to explore an interface design project of their choice.

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 dynamic 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.

ART 285 Syllabus

Course Info

The Schedule

Points
Grade
50
Define
10%
50
Draft
10%
100
Tests
Design
20%
100
Tests
Develop
20%
100
Portfolio Site
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

10%
Definition Phase

Project Brief
50 Points

10%
Draft Phase

Conceptual Plan
50 Points

20%
Design Phase

Three Rounds of Designs
100 Points

20%
Development Phase

Two Versions of Drafts
100 Points

20%
Final

Project + Portfolio Site w/ Portfolio Entry
100 Points

20%
Class Participation

Critiques
100 Points

The Calendar

Calendar loading...

Process for Web & Print Projects

1

Define

Define the project, problem(s), and stakeholder's primary goals via the project brief. Gather background info to define user profiles, goals, & tasks.

2

Draft

Brainstorm conceptual solutions, draft the information architecture, site maps, wireframes, prototypes, content hierarchy & structure.

3

Design

Visualize and communicate the UI via mood boards, type studies, color studies, prototypes, iterative mockups, & multiple rounds of refinements.

4

Develop

Build the interactive, fully functioning product using web standard compliant, accessible, valid, semantic markup, styling, & scripting.

5

Diligence

Via due diligence, fix all bugs and conduct multiple tests for quality assurance across multiple platforms, browsers, devices, and screen-sizes.

Process for Motion Graphics & Video Projects

The Deliverables

Project Brief

Due: Week 2

50 Points

Conceptual Plans

Due: Week 4

50 Points

Designs R1-3

Due: Weeks 6, 8, & 10

100 Points

Drafts V1-2

Due: Weeks 13 & 16

100 Points

Final Project

Due: Week 17

100 Points

Covid-19 Update

Distance Learning Plan

Online Course Schedule & Details

For Spring 2020 Only

Due to the coronavirus pandemic, this course will be delivered online after spring break. Below are related updates including all course-related details regarding Chris's distance learning plan for ART 285 Interface Design Studio.

No More Face-to-Face Classes

Effective immediately, we will be conducting all remaining classes online “asynchronously” (on your own time), where each week I will post a short "Weekly Video" (~10 minutes) with class related announcements, updates, and weekly instructions. Please watch the videos each week and follow the instructions posted within each weekly sub-section (see below).

Work Independently

You are to continue working independently on your two main projects (deliverables) for ART 285:

  1. Your Main Product (be sure to post links to all assignments due thus far)
  2. Your Coded Portfolio Website (+ portfolio entries for all projects).
One-on-One "Open Thursdays"

Every Thursday, from 8am-10:45am, I will be available to meet with students 1-on-1 via Zoom (meeting id and password will be sent via email). On even-numbered weeks (Weeks 12, 14, & 16), you will have pre-set times to meet with me 1-on-1. On odd-numbered weeks (Weeks 13 & 15), Effective Week 14 all Zoom sessions will be optional "Open Thursdays." I will be online each Thursday from ~8am-2pm to meet with those that are able to join in at any time and/or sign-up for a time slot in advance via Calendly.

Book a 1-on-1 Meeting
Final Critique

The final critique will be conducted online “synchronously” (live) via zoom on Thursday, May 7th from 8am-2pm. We will all connect via zoom at the same time and each student will take turns sharing your screens to present your final products and portfolio sites.

Have a Question?

Need help? Wondering how to best get in touch with me? There are multiple ways to contact me (e.g. email, Laulima, office phone, etc.), but the quickest, easiest, and best way is via Slack. You can either message me directly/privately (@Chris Gargiulo) or send a larger group message to the entire class via our private Slack channel (#art285a). Designers and developers at top agencies use Slack, so should you. :)

Week 11

The primary goal of this week is to go over the new online format of the course (DLP) and to make sure that we complete all Visual (UI) Designs (Round 3)

  • Complete Round #3 UI Designs for your Main Product (be sure to post links to your final designs)
  • Get Ready for First Drafts (v1) Due in Two Weeks! (Week 13) Two deliverables:
    1. Main Product
    2. Coded Portfolio Site + Portfolio Entries

Due to the holiday, there will be no Thursday 1-on-1 Zoom sessions this week. 1-on-1 Thursdays will begin next week (Week 12).

Week 12

Primarily a work week to work on a) the production of your final product and b) the coding of your portfolio website. For the latter, you should be focusing on the overall structure of the site (working from "the outside in, top down") along with the overall UX (what patterns will you be using?) and overall aethetic (low risk minimalist? or high risk bold?) Do not be afraid to try multiple times and start from scratch until you get it right.

  • You are working on two clear deliverables (first draft v1's) due next week:
    1. Your Main Product (v1)
    2. Your Portfolio Site (v1) + Portfolio Entries
Thursday 1-on-1 Schedule:
Time Student
10:45 am - 11:00 am Ariana
11:00 am - 11:15 am Chris G.
11:15 am - 11:30 am Eryn
11:30 am - 11:45 am Christy
11:45 am - 12:00 pm Melissa
12:00 pm - 12:15 pm Koko
12:15 pm - 12:30 am Miyuki
12:30 pm - 12:45 am Yoon
12:45 pm - 1:00 pm Emily
1:00 pm - 1:15 pm Tomy
1:15 pm - 1:30 pm Joanna

Week 13

This is a big deadline week! First round drafts (Version #1) of both your product and portfolio sites should be complete. No placeholder images. No lorem ipsums. All final content should be in the markup (html). Visual bugs (css) and functional bugs (js) are OK and expected.

  • First drafts (v1's) due this week:
    1. Your Main Product (v1)
    2. Your Portfolio Site (v1) + Portfolio Entries

This week's Thursday 1-on-1 Zoom sessions are optional. There is no pre-set schedule and all time-slots are open and able to be booked by apointment only.

Book a 1-on-1 Meeting

Week 14

Primarily a work week to continue coding your two final projects. You should be working toward your next due date: second drafts (v2) due next week (week 15).

  • You are working on two clear deliverables (second drafts v2's) due next week:
    1. Your Main Product (v1)
    2. Your Portfolio Site (v1) + Portfolio Entries
New "Open Thursdays" Schedule

This week, and all remaining Thursdays from here on out, will be "Open Thursdays" which are optional 1-on-1 Zoom sessions from 8am-2pm. Unfortunately, due to recent schedule changes, my availability on Thursdays is hereby limited and subject to change on a week-by-week, day-to-day basis. Therefore, there will be no more pre-set, mandatory 1-on-1 schedules and all previously scheduled Thursday 1-on-1 time-slots are now open and able to be booked by apointment in advance. Please watch this weeks video for more details.

Book a Thursday 1-on-1 Meeting

Week 15

Second Round Drafts are due this week. At this point, your main product and portfolio sites need to be 100% complete and ready for launch (if needed). They should not be unfinished or incomplete at all (no placeholder content or lorem ipsums). This week you should be focusing on making any last minute hard decisions, such as how much time do you have left and where should you best allocate your time and energy over the next two weeks.

  • Second drafts (v2's) due this week:
    1. Your Main Product (v2)
    2. Your Portfolio Site (v2) + Portfolio Entries

This week's Thursday 1-on-1 Zoom sessions are optional. There is no pre-set schedule and all time-slots are open and able to be booked by apointment only.

Book a 1-on-1 Meeting

Week 16

Primarily a work week to finish the production of your final product and the coding your final portfolio website. You should be focusing on quality assurance testing, code refactoring (cleaning up), and adding bonus features like UI animation.

  • You are working on two clear deliverables (FINAL versions) due next week:
    1. Your FINAL Product
    2. Your FINAL Portfolio Site + FINAL Portfolio Entries

This week's Thursday 1-on-1 Zoom sessions are optional. There is no pre-set schedule and all time-slots are open and able to be booked by apointment only.

Book a 1-on-1 Meeting

Week 17

This week we will all be meeting "synchronously" on Thursday May 7th from 11:00am-12:00 via Zoom for a quick (1 hour) show-n-tell (celebration) of your portfolio sites and final products. To save time, I will share my screen and click through them all briefly (~5min each).

  • FINAL projects are due this week:
    1. Your FINAL Product
    2. Your FINAL Portfolio Site + FINAL Portfolio Entries
Optional Student Videos:
  • OPTIONAL: Short "Show-n-tell" Student video
    • For those that would like to ask for specific feedback from your classmates (e.g. on your portfolio site, or final product, or anything specific), please feel free to post a video this week (Week 17) via your class website or our class Slack channel (#art285a) and we will be sure to take a look and give you feedback. This is not a requirement for this course. This is OPTIONAL.
Thursday May 7th Zoom Schedule:
Time Class
9:00 am - 10:30 am ART 128 Interface Programming 1
11:00 am - 12:00 pm ART 285 Interface Design Studio
12:30 pm - 1:30 pm ART 293 NMA Internship

Course Content

  1. Introduction

  2. Definition Phase

  3. Drafting Phase

  4. Design Phase

    • Different UI techniques for Designing High Fidelity Web Page Mockups Lesson
    • Round #1 Designs Assignment
    • Round #2 Designs Assignment
    • Round #3 Designs Assignment
  5. Development Phase

  6. Diligence Phase

Course Deliverables

12 Assignments

Definition Phase

  1. Project Brief Week 2

Drafting Phase

  1. Conceptual Plans Week 4

Design Phase

  1. Round #1 Visual Designs Week 6
  2. Round #2 Visual Designs Week 8
  3. Round #3 Visual Designs Week 11

Development Phase

  1. Version #1 First Drafts (Main Product v1 + Portfolio Site/Entry v1) Week 13
  2. Version #2 Second Drafts (Main Product v2 + Portfolio Site/Entry v2) Week 15

Diligence Phase

  1. Final Product Week 17
  2. Final Portfolio Site + Portfolio Entry Week 17

Students

Current Students

Past Student Projects

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

Office Hours

Due to COVID-19, all face-to-face office hours for the second half of the spring 2020 semester will be held online and integrated into a single one-on-one online scheduling system that will occur online (via Zoom) on Thursdays from 8am-2pm for enrolled students only.

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