Production Processes

Interactive Design

One Semester Project

Interactive design for websites and apps. This project will include a working, navigable website or app plus a document capturing the design and development process.


  • Project definition documentation
  • Benchmarks
  • Content map
  • Wireframes
  • Design
  • Development
  • Testing
  • Process Document (PDF, Google Doc or Other)

First Review: Project Definition

1 - 2 Sentence Log Line That Includes:

  • genre
  • target audience
  • delivery system
  • objective
  • emotional connection

Example log line: "In this Storybook Tablet App, three road construction toys, just children themselves, come to life and help each other work through typical emotional trials and tribulations. We aim to teach kids, ages 3-6, how to understand their emotions and move past feelings like frustration and anger to feelings of joy, laughter and purpose."

Function Benchmarks

  • Minimum 3 benchmarks with great UX that is similar to your project - screen shots with links

Brand Benchmarks

  • Perform a differentiation search and list at least 3 other benchmarks that are already in your conceptual space. Show screenshots of them (and link if avail.)
  • Describe how you will differentiate your concept and make it memorable

Aesthetics Benchmarks

  • Minimum 3 benchmarks utilizing designs that will create similar emotions - screen shots with links

UX Development

Content Map

Wireframe layouts for all targeted display screens (at correct pixel dimensions). Design Wireframes for all targeted delivery methods (ie: desktop, tablet, phone, vr, etc.)


Visual Design

  • Full color layout of landing screen plus all internal pages/screens.
  • Don't place in interactive environment yet
  • For Apps: design screens at the correct pixel dimensions so they can be used in the site construction
  • For Websites: use this KCAD DAD Website Layout Template
  • Design and integrate any content needed to complete the screens
  • If you are using video or other media yet to be produced - create a custom thumbnail image for it
  • Check color shift and contrast and adjust to work on a variety of computer displays (create jpegs screens for the tests)
  • Pay attention to type conventions & visual hierarchy

Third Review: Build

Visual Design

  • All pages/screens visual design refined (based on committee reviews) Full color layout of all screens.

All graphics Placed Into Development Environment

  • For every screen

Multimedia Only: Sound Design Plan

Fourth Review: Development

Site/App Functionality

  • Link all navigation
  • Complete any advanced functional coding
  • Animation, video & sound integrated
  • Finish all copy

Add Committee Notes To Journal (Options Below)

  • Allow them to edit your document directly
  • Write your own notes based on their verbal feedback
  • Copy and paste notes from email or other correspondence
  • Include any visual image mark-ups (place them directly in the document)

Final Review: User Tested & Tuned Final

Tested And Tweaked

Turn In

  • All associated files for website or app only (not the design .psd, etc. files)
  • Complete PDF or Google Slides pitch that includes every element from Reviews 1 & 2 listed above. Include a link if it is live.