ART 249

Interface Design 2

@ KCC New Media Arts
ART 249

Interface Design 2

The Full Web Design Process

Teacher: Chris Gargiulo

Interface Design 2 covers the full creative design process for interaction design of researching, planning, designing, coding, and testing a custom web standard compliant HTML/CSS web site for a chosen client and target audience.

Quality web sites that meet both client and user needs can be successfully created when designers properly 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, design, and code one HTML web site over the course of the semester. During the first few weeks of the semester students choose a client, research the industry, and define the information architecture of their chosen site by drafting the necessary conceptual planning documentation such as site maps and wireframes. During the middle of the semester, students go through multiple rounds of design revisions until a mockup is created that best suits the project demands. During the final weeks of the semester, students code and test the web site across platforms, devices, and browsers for quality assurance.

ART 249 Syllabus

Course Content

The Schedule

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

Grading System

10%
Definition Phase

Project Brief
50 Points

10%
Draft Phase

Conceptual Plan
50 Points

20%
Design Phase

Three Rounds of UX + UI Designs
100 Points

20%
Development Phase

Two Site Drafts
100 Points

20%
Final

Web Site
100 Points

20%
Class Participation

Critiques
100 Points

The Calendar

Calendar Loading...

The Process

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.

The Deliverables

Project Brief

Due: Week 2

50 Points

Conceptual Plans

Due: Week 3

50 Points

UX + UI Designs

Due: Weeks 6, 8, & 10

100 Points

Coded Drafts

Due: Weeks 12 & 15

100 Points

Final Site

Due: Week 16

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

A Plan For Success

Conceptual plans are the blueprints for any design project. Conducted early in the design process, they can include any number of documents and exercises that will be helpful in communicating ideas to all stakeholders and instrumental in insuring a quality end product and user experience. The primary goal is to map out the project using a user-centered approach. Planning documents should try to be style/design independent, with a focus on the user's experience, goals, & tasks to help determine the best possible site structure and content hierarchy.

Considerations
  • Who is the user and why are they coming to this site?
  • For each page of the site, what information or content is the user looking for?
Essential Elements to include
  • Site Map
  • Wireframes
Other Elements to consider
  • A Content Document (containing all site imagery & copy)
  • Color Studies
  • Type Studies
  • Mood Boards
  • Style Tiles
  • User Flow Maps & Screens
  • Prototypes & Interactive Wireframes
  • A series of tests (visual & technical)

Interactive Wireframes An Intro to Coded Prototypes

Wireframes

Traditional wireframes (flat images) and paper prototypes are great tools to communicate to both clients and internal team members how an interface might look structurally, but they can potentially fall short in both determining and communicating the user experience. One quick and efficient tool is to create interactive wireframes. They have multiple advantages, such as acting as an early prototype to help designers and developers determine best practices for increased usabiltity.

Considerations
  • What is the overall site structure and does this translate as a means of interface navigation?
  • What is the content hierarchy for each page (i.e. what content is most important to the user? what order should it be presented?)
Essential Elements to get started
  • Site Map
  • Wireframes
Lesson:
Wireframes Interactive Wireframes: An Intro to Coded Prototypes

Conducting Tests The Importance of Early Testing

Tests

Tests are an important part of the design process for creative professionals such as UI/UX designers and front-end web developers. One of the challenges faced by many young design students, is how does one find the best solution to a particular design problem when there are multiple possible solutions? One way of finding the best solution is to conduct a series of tests early in the design process.

Considerations
  • What visual elements require exploration early in the design process?
  • What technologies might be potential solutions that need to be explored and tested early in the design process?
Example Tests to consider:
  • Typography Tests
  • Grid Systems
  • Design Patterns
    • Responsive Navigation
    • Sliders/Carousels
    • Modals/Lightboxes
  • Third-party solutions
    • Front-end Frameworks
    • Jquery Plugins
Lesson:
Tests Testing: The Creative Design Process of Conducting Tests

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?

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?

In-Class Video Lessons

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