ART 285

Interface Design Studio

@ KCC New Media Arts

Intro

Course Content

Teacher

Contact

Students

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 Content

The Schedule

3 sites in 17 weeks

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

500 Points Total

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 Entry
100 Points

20%
Class Participation

Critiques
100 Points

The Calendar

Week-by-week due dates

January 2015

SunMonTueWedThuFriSat
28293031123
45678910
11121314151617
WEEK 1
18192021222324
WEEK 2
Project Brief Due
25262728293031
WEEK 3
1234567
WEEK 4
Conceptual Plans Due

Process for Web & Print Projects

5D: Five steps for all design 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

3P: Three steps for the production of all time-based projects

1

Pre-Production

Writing, Story Development, Design Exploration, & Pre-Visualization

2

Production

Video / Film / Photography, Design, Animation, & Sound/Audio Recording.

3

Post-Production

Editing, Compositing, Sound Design, Refinement, & Rendering.

The Deliverables

Course Assignments

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

Lessons

What is a Project Brief? The Essentials To Starting a Design Project

A Brief Summary

A project brief is a practical and useful tool used as a first step in summarizing creative projects. It is used as foundational framework for developing strategic creative solutions to real-world project challenges.

Considerations
  • What is the primary design problem that needs to be solved?
Essential Elements to include
  • Project Name
  • Client Name
  • Brief Summary
  • Primary Objective(s)
  • Target Audience
  • Assets needed
  • Deliverables
Other Elements to consider
  • User Profiles (User Personas & Scenarios)
  • A list of key goals, features, functionalities, & technologies
  • Competitive Analysis (examples of competitor sites)
  • Precedents (similar examples to highlight/note)

How to Begin Planning? A Guide to Conceptual Planning

Conducting Tests The Importance of Early Testing

Interactive Wireframes An Intro to Coded Prototypes

Comp Sites An Interface for Client UI Mockups

Comp Sites

One of the easiest and most effective ways to share user interface (UI) mockups for client review is a simple comp site. A comp site is basically a set of html pages designed to qucikly and easily display a series of UI mockup images inside of the browser in a manner that ensures that the image is displayed properly across platforms and browsers. The goal is to present the UI designs quickly and easily while reducing the risk of client confusion.

Considerations
  • What is the best way to share UI designs with a client remotely?
  • How can you avoid technical problems, misunderstandings, and confusions when presenting work to a client?
Lesson:
Wireframes Comp Sites: An Interface for Client UI Mockups

Portfolio Entries Options for Presenting Designs

Portfolio Entries

An important part of being a designer is showcasing one's work, but what is the best way to do so? There are no industry standard rules for how to present work in a portfolio, therefore it is up to each designer to decide how to do so, knowing that their decisions will ultimately reflect their personality (and design skills). To help figure out the best approach, try putting yourself in the client shoes and go through the full design process to find the best design solutions.

Considerations
  • How much info do I need to prepare/provide for each project?
  • What's the best way to stage my work across different media?
  • What are the best UX design patterns for the user to view/experience my portfolio?
Lesson:
Wireframes Portfolio Entries: Options for Presenting Designs

Week-by-Week

1 Intro to the Course Expand/Collapse

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. A clarification of 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 might be different for each student.
  4. We will take a look at student work from other classes that fits well within the scope of this course.
  5. 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

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

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

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

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

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

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.

In-class exercise:

Intro to Custom Themes in Wordpress:

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

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

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

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

Agenda:

  1. Daily Inspiration: a quick look at related projects and portfolio entries on behance.
  2. 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

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

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

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

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

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

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

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

About

The Teacher

Chris Gargiulo

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.

Learn more about Chris

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

Assistant Professor & NMA Program Coordinator

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

New Media Arts Counselor

Telephone: 808-734-9510
Email: snharris [at] hawaii.edu