Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Columbus State Community College - IMM 1100: Principles of Interactive Design

These are four modules to guide students through Interactive Media Design, how it works and the skillsets needed to be in this environment

Jon Lundquist

on 3 September 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Columbus State Community College - IMM 1100: Principles of Interactive Design

Interactive Media
IMM 1100 - Principles of Interactive Design
Four Modules- book
Module one:

History of Interactive Media
Web / Internet basic knowledge
Skill sets needed in the Interactive Media area
Module Tw0:
HTML , source code, web development tools, basic web concepts
Module Three:
Design concepts and principles, color scheme knowledge, layout and user interface design
Module Four:
Software needed to be successful, understanding of hardware used, putting it all together
Chapter 1. What is Multimedia
Chapter 2. Text
Chapter 3. Images
Chapter 4. Sound
Chapter 5. Animation
Chapter 6. Video
Chapter 7. Making Multimedia
Chapter 8. Planning and Costing
Chapter 9. Designing and Producing
Chapter 10. Content and Talent
Chapter 11. The Internet and Multimedia
Chapter 12. Mobile Multimedia
Chapter 13. Delivering
Web / Internet basic knowledge:
What is multimedia?

Skill sets needed:
Business / Communication skills

History of Interactive Media:
Tim Berners-Lee

Module one:

Software : Adobe Products
After Effects
Illustrator - Print / web
Autodesk Maya - 3D Modeling
Module Four:

Art / Design concepts

Design principles
Similarity and contrast

Traditional Color Theory
Warm vs. cool
Tints and shades
Color harmony
Module Three:

Basic web concepts and terms
Source code- HTML5, CSS, Javascript
Web development tools
Module Two:

Chapter 1. What is Multimedia
Chapter 11. The Internet and Multimedia
Internet domains
Search Engines
Chapter 2. Text
Chapter 3. Images
Chapter 8. Planning and costing
Chapter 9. Designing and Producing
Chapter 7. Making Multimedia
Chapter 12. Mobile Multimedia
In this IMM 1100 course you will learn how to:

Understand the essential elements of media, including text, images, sound, animation, and video
Learn how to use bitmap, vector, and 3-D images
Principles of web source code and development tools
Create animations
Principles of shooting and editing digital video and audio
Selecting the best hardware, software, and authoring tools for your project
Determine the scope and cost of a multimedia project: design, produce, and test your project
Learn basic html and syntax
Design dynamic web content
Understand the use of apps for mobile devices, including tablets, readers, and smartphones
Deliver multimedia over the Internet and on CD-ROM and DVD
Layout and user interface design
Components needed
Type of Interaction
Communication devices
Computer hardware:
Monitor size
Hard drive space
Other media needed:
Module one:

Module Two:

Module Three:

Module Four:

Web / Internet basic knowledge:
Skill sets needed for Interactive Media:

History of Interactive Media:
Tim Berners-Lee

Where is Interactive Media?
Delivering Interactive Media
What is Interactive Multimedia?
Interactive media refers to products and services on digital computer-based systems which respond to the user’s actions by presenting content such as text, graphics, animation, video, audio, games.
Definitions and terms:
Chapter 1
authoring tools
digitally manipulated
distributed resource
integrated multimedia
multimedia developer
web site
Interactive media can be found in business, schools, at home and in public places.

Interactive media is appropriate whenever a human user is connected to electronic information of any kind, at the “human interface.” Multimedia enhances minimalist, text-only computer interfaces and yields measurable benefit by gaining and holding attention and interest; in short, multimedia improves information retention. When it’s properly constructed, multimedia can also be profoundly entertaining as well as useful.
Multimedia projects often require a large amount of digital memory; hence they are often stored on CD-ROM or DVDs.
Multimedia also includes web pages in HTML or DHTML (XML) on the World Wide Web, andcan include rich media created by various tools using plug-ins
The Internet began as a research network funded by the U.S. Defense Department in 1969.
In 1989, the National Science Foundation took over its management, and research organizations and universities became increasingly heavy users of this ever-growing “Internet.”
Commercial and business use of the Internet was not permitted until 1992, but businesses have since become its driving force.
The World Wide Web (www.w3.org/) started in 1989 at the European Particle Physics Laboratory (CERN) as a “distributed collaborative hyper-media information system.” It was designed by Tim Berners-Lee as a protocol for linking a multiplicity of documents located on computers anywhere within the Internet.
Chapter 11
Domain Name System (DNS)
File Transfer Protocol (FTP)
Hypertext Transfer Protocol (HTTP)
local area network (LAN)
Uniform Resource Locator (URL)
Network –
several computers connected together with purpose of sharing resources including data,information and hardware.
Internet –
worldwide collection of computers interconnected to one another either wired or wireless including all computers that we use at home, in schools, offices and many other places.
World Wide Web –
a collection of resources and information interconnected via the internet.
Web page –
a formatted page within a website that may contain text,graphics, video and multimedia.
Home page -
usually the first web page of the website which usually provides information about the website, its purpose and contents.
Basic web concepts and terms
Module Two:

Module Two:

Source code- HTML5, Cascading Style Sheets (CSS), Javascript
Web development
A domain name is a unique name that identifies an internet resource such as a website. It is an identification string that defines a realm of administrative autonomy, authority or control on the Internet. Domain names are formed by the rules of the Domain Name System (DNS).
Any name registered in the DNS is a domain name.
In 2014, the number of active domains reached 271 million.

A web search engine is a software system that is designed to search for information on the World Wide Web.
The search results are generally presented in a line of results often referred to as search engine results pages .

Web browser, or browser, is application software that allows users to access and view Web pages.
Some examples include:
IE or Internet Explorer: A graphical web browser designed and develop by Microsoft Corporation
Mozilla Firefox: A free and open source web browser. Developed by Mozilla Corporation,this is the second most popular web browser.
Safari: Web browser for MAC OS developed and designed by Apple Inc using the WebKit engine.
Google Chrome: A newer web browser from Google Inc, the creator of the most popular search engine Google.
Web programming refers to the writing, markup and coding involved in Web development, which includes Web content, Web client and server scripting and network security.

The most common languages used for Web programming are XML, HTML, CSS, JavaScript, Java and PHP.
Web programming is different from just programming, which requires interdisciplinary knowledge on the application area, client and server scripting, and database technology.
Art / Design concepts

A comprehensive idea or generalization that brings diverse elements into some basic relationship. Possibly a quick sketch that conveys the idea.

The arrangement of the visible elements. Often used interchangeably to refer to the organization of elements. Composition implies the assemblage of existing parts. Design suggests a more intentional arrangement.

Material that has meaning, shaped by an designer's/artist's concept or intent, and expressed in symbolic, abstract and concrete form.

Line and Shape:

Shape: The specific spatial character of an area or line.
Size: The extent of a shape, or length of a line.
Volume: A shape having three dimensions or one that gives the illusion of mass.
Linear or lineal: Usually used interchangeably, pertaining to a line. All lines are linear.
Outline: The edge of a shape.
Contour: The outline or edge, and those lines that move across a shape or volume.
Design Principles:

The whole or total effect of a work of art that results from the combination of all of its component parts. A unified work is one in which the elements all work harmoniously together in support of the concept.
There is a comparative fitness in the interrelationship of parts.
The proportional relationship among parts.
Change of stress and accent or emphasis to set off elements against each other.
Change or movement producing a progression; rhythmic tensions and transitions between linear and spatial movements.
The adaptation of parts to one another so as to form a coherent whole.
Regular recurrence or alteration in sequence.
The equilibrium of all forces involved.
Color Terms and Definitions
Layout and user interface design
Module Three:

Module Three:

Module Three:

Definitions and terms:
Chapter 2
dots per inch (dpi)
sans serif /serif
white space

Chapter 3
This designates the common name of a color and indicates its position in the spectrum or in the color circle.
Intensity (chroma):
The saturation or strength of a color determined by the quality of light reflected from it. A vivid color is of high intensity, a dull color of low intensity.
It refers to the lightness or darkness of tone, not to its color quality.
A hue at a lighter value than the one at which it appears at greatest intensity, i.e., a color with white added.
Shade (color):
A hue at a darker value than the one at which it appears at greatest intensity, i.e., a color with black added.

Color Schemes:

Complementary colors: Two colors that are directly opposite each other on the pigment color wheel. A primary color would be complementary to a secondary color, which is a mixture of the two remaining primaries.
Color Triad: A group of three colors spaced an equal distance apart on the color wheel. There is a primary triad, a secondary triad, and two intermediate triads on the twelve-color wheel.
Neutrals: Surface tones that do not reflect any single wavelength of light but rather all of them at once. No single color is then notice but only a sense of light or dark, such as white, gray or black.


Tone (light): The character of a color or value of a surface determined by the amount or quality of light reflected from it.
High Light: The reflection upon the surface of an object of the source of light. It is generally located where the surface of the object is at right angles to the direction from which the light is coming. The smoother the surface, the more distinct will be the high light, (Not to be confused with the term “High Light” in the Value Scale).
Half tone: In representational painting the tone of the area on the surface of an object between the lighted side and the shaded side of the object. It is generally that portion of the surface that is parallel with the direction from which the light is coming.
Shade (light): The tone of that area of an object that is turned away from the source of light and is thus deprived of direct light.
Shadow: The tone produced upon a surface when light upon it is obscured by an object. Also called “cast shadow.” It is generally colder and more opaque than shade. Reflected lights may occur within cast shadow as well as in shade, but are likely to be less noticeable.
Users have become familiar with interface elements acting in a certain way, be consistent and predictable in your choices and their layout. Doing so will help
with task completion, efficiency, and satisfaction.

Interface elements include but are not limited to:

Input Controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles, date field
Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
Containers: accordion

Best Practices for Designing an Interface

Keep the interface simple.
Create consistency and use common UI elements.
Be purposeful in page layout.
Strategically use color and texture.
Use typography to create hierarchy and clarity.
Make sure that the system communicates what’s happening.


Chapter 8
audio specialist
information designer
instructional designer
interface designer
project manager
subject matter expert
team building
video specialist

Chapter 9
change order
client sign-off
creative strategy
executive summary
feasibility study
Gantt chart
Request for Proposal (RFP)
Module one:

Module one:

Module one:

Module Three:

Software : Adobe Creative Suite
Dreamweaver - web
After Effects - video
Photoshop/Fireworks- graphics
Flash Professional - animation
Premiere - video
Muse - web / mobile
Edge - animation
PhoneGap - mobile
Illustrator - Print / web

Autodesk Maya - 3D Modeling
Computer hardware:
Monitor size
Hard drive space
PC requirements
MAC requirements
Other media needed:
CD or DVD burner
Color Inkjet Printer
Color Flatbed Scanner
Digital Camera
External hard drive (1tb)
Flash drive (1gb)
Module Four:

Module Four:

Chapter 7
3-D modeling software
Apple Macintosh operating system (OS)
background layer
drawing software
image-editing application
Internet service provider (ISP)
local area network (LAN)
Microsoft Windows
painting software
parent and child
Chapter 12
Adobe Dreamweaver
helper application
HTML editor
marking up
Semantic Web
video stream
Definitions and terms:
Chapter 1

Chapter 11
Cascading Style Sheets (CSS)
Common Gateway Interface (CGI)
Extensible Markup Language (XML)
HTML editor
IP address
Structured Query Language (SQL)
Web 2.0
Example from logosurgery.com
Definitions and terms:
Full transcript