black background

Portland Community College

Cascade Campus

cascade campus

Term: Summer 2017

Course: MM120
Instructor: Sean-Paul McKee

Course: MM130
Instructor: Beth Fitzgerald

Course: MM140
Instructor: Greg Walters

MM120

Multimedia Design

  • Introduces the multimedia development and design process.
  • Identifies the functions and skills of a multimedia team, project goals and target audience.
  • Utilizes information architecture and user experience design principles. Evaluate projects to determine deliverables and resource needs.

MM130

Graphic Video & Audio Production

  • Introduces graphic, audio and video development for multimedia.
  • Use of industry standard tools to produce digital media elements composed of graphics, audio and video.

 

 

MM140

Multimedia Authoring I

  • Covers production of an interactive multimedia project using industry standard authoring software.
  • Incorporates graphics, text, video, and audio.
  • Uses the principles and practices learned from the MM120 and MM130 courses.

The Workflow

This section describes the workflow that was used in the making of the interactive multimedia project, "The Crow’s Influence".

The Crow's Influence Home page Play

**Instructions**

For best viewing and user experience:

  • Please use a desktop.
  • Not for mobile or tablet devices.
  • Wait for the media to load.
  • There will be a "delay" before it starts.

MM120

Planning Stage

Mood Board

Mood (Style) Board

1. Mood Board

Creating a mood (style) board in your brainstorming process helps to identify the mood that you want to convey to your client and or audience.

A mood board can help the creative direction by incorporating the following to inspire an idea:

  • Color
  • Textures
  • Composition
  • Shapes
  • Images
  • Fonts
  • Lighting
  • Era
  • Photography Style
  • Graphic/Illustration Style
  • Mood: Bright, Dark, Soft, Bold, etc.
Color Palette

Color Palette

2. Color Palette

This is a good time to start thinking about the colors that you may want to use in your project.

There are numerous articles on the web that provide information on color theory and how to design your own color palette. Smashing Magazine provides a great article on this.

Try and establish consistency for your project by identifying the following:

  • One Background Color
  • One Highlight (contrast) Color
  • 3-5 Harmony (anchor) Colors
  • Template 1
  • Template 2
Project Overview

Project Overview

3. Project Overview

The next step is to write a project overview. The overview should have the following:

  • Images
  • Project Title
  • Project Goal
  • Project Overview
User Persona

User Persona

4. Target Audience

When creating a persona, think about the audience and the type of people who may use your interface.

Questions to consider during persona development:

(source: usability.gov)

  • What is the purpose of the site?
  • What is the age of the person?
  • What is the gender of the person?
  • What is the highest level of education?
  • How much work experience does the person have?
  • What is the person's professional background?
  • Why will they come to your site?
  • Where and when will the user access the site?
  • What devices does your person use on a regular basis?
  • How much time does your person spend browsing the web?
  • What is your person motivated by?
Bubble Diagram

Bubble Diagram

5. Brainstorming

Place the topic in the middle of page and create bubble groups for each subject that relates to the topic.

  • Think environments
  • Think dimensionally
  • Think scale
  • Think vantage points
Site Map

Site Map

6. Mapping the Site

Create a site map and identify where and if you will have the following for each page:

  • Navigation
  • Audio
  • Video
  • Images
  • Slideshow
  • Contact Details
  • Exit Page
Sketch Board Template

Sketch Board Template

7. Sketching the Interface

Sketch out potential page layouts for project.

Use words on back of cards to describe:

  • This is what the user sees.
  • You can interact with these.
  • This is where (x, y, z) takes you.
  • This is the feedback you get.
  • This is what it sounds like.
Asset Checklist Template

Asset Checklist

7. Asset Checklist

The last step is to sketch out all the assets and label. Sketch out all the buttons that have rollover states and label. Sketch out all the animations and label. Then create a checklist for each asset and label.

Action definition checklist:

  • Simple Animations
  • Fade In/ Fade Out
  • Move (from one place to another)
  • Zoom / Shrink
  • Rotate
  • Button States
  • Rollover Graphic
  • Rollover Graphic + Sound
  • Rollover Graphic + Sound + Animation
  • Button Actions
  • Go to Page .....

MM130

Create Assets

Music Multimedia Page

Music page

1. Graffic (png) Files

I created all my graphics in Photoshop. You can use Illustrator or any graphic software to create your png images.

All the elements together will create the visual environment of your project's main interface.

Save each asset in their different states:

  • Static Background
  • Normal states
  • Roll over states
  • Animation states
Background #1 Background #2 Background #3 Various Assets
Movie Page

Premier Pro

2. Audio & Video Files

All my MP3 audio and MP4 video files were created and or edited in Premier Pro.

Premier Pro screenshot #1

Video Editing

Premier Pro screenshot #2

Audio Editing

MM140

Building the Interface

Adobe Edge Screenshot

Edge Animate

1. Behind the Curtain

This is where all the magic takes place to create the interface.

The software used was Adobe's Edge Animate CC 2015 which is no longer being supported by Adobe.

Adobe is now promoting Animate CC which was formerly known as Flash.

Adobe Edge screenshot #1 Adobe Edge screenshot #2

Your design will change and evolve throughout the entire process.