Portland Community College
Term: Summer 2017
Instructor: Sean-Paul McKee
Instructor: Beth Fitzgerald
Instructor: Greg Walters
- 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.
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.
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.
This section describes the workflow that was used in the making of the interactive multimedia project, "The Crow’s Influence".Play
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.
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:
- Photography Style
- Graphic/Illustration Style
- Mood: Bright, Dark, Soft, Bold, etc.
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:
3. Project Overview
The next step is to write a project overview. The overview should have the following:
- Project Title
- Project Goal
- Project Overview
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:
- 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?
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
6. Mapping the Site
Create a site map and identify where and if you will have the following for each page:
- Contact Details
- Exit Page
7. Sketching the Interface
Sketch out potential page layouts for project.
- Sketch Board Template
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.
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
- Button States
- Rollover Graphic
- Rollover Graphic + Sound
- Rollover Graphic + Sound + Animation
- Button Actions
- Go to 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
Building the Interface
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.
Your design will change and evolve throughout the entire process.