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
Three Rounds of UX + UI Designs
Two Site Drafts
Define the project, problem(s), and stakeholder's primary goals via the project brief. Gather background info to define user profiles, goals, & tasks.
Brainstorm conceptual solutions, draft the information architecture, site maps, wireframes, prototypes, content hierarchy & structure.
Visualize and communicate the UI via mood boards, type studies, color studies, prototypes, iterative mockups, & multiple rounds of refinements.
Build the interactive, fully functioning product using web standard compliant, accessible, valid, semantic markup, styling, & scripting.
Via due diligence, fix all bugs and conduct multiple tests for quality assurance across multiple platforms, browsers, devices, and screen-sizes.
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.
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.
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.
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.
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.
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.
Note: ignore ~40min to ~52min to skip the trouble-shooting of the google font bug/error.
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.
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:
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: