Loading presentation...
Prezi is an interactive zooming presentation

Present Remotely

Send the link below via email or IM

Copy

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.

DeleteCancel

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
by

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:
Creative
Technical
Business / Communication skills

History of Interactive Media:
ARPANET
Tim Berners-Lee

Module one:

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

Art / Design concepts

Color
Shape
Texture
Space
Form
Design principles
Unity/Harmony
Balance
Hierarchy
Scale/proportion
Dominance/emphasis
Similarity and contrast

Traditional Color Theory
Complementary
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
Browsers
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:
Processor
RAM
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:
ARPANET
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
bandwidth
browser
content
convergence
digitally manipulated
distributed resource
DVD
font
integrated multimedia
linear
multimedia developer
nonlinear
platform
scripting
storyboarding
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
ARPANET
bandwidth
Domain Name System (DNS)
File Transfer Protocol (FTP)
Hypertext Transfer Protocol (HTTP)
Internet
local area network (LAN)
network
plug-in
TCP/IP
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
INTERNET DOMAIN:
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.

SEARCH ENGINES:
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 BROWSERS:
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


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

Composition/Design:
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.

Content:
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:


Unity:
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.
Proportion:
There is a comparative fitness in the interrelationship of parts.
Scale:
The proportional relationship among parts.
Contrast:
Change of stress and accent or emphasis to set off elements against each other.
Sequence:
Change or movement producing a progression; rhythmic tensions and transitions between linear and spatial movements.
Harmony:
The adaptation of parts to one another so as to form a coherent whole.
Rhythm:
Regular recurrence or alteration in sequence.
Balance:
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
anti-aliasing
dithering
dots per inch (dpi)
icon
kerning
leading
pixel
rasterizing
rollovers
sans serif /serif
tracking
typeface
white space

Chapter 3
autotracing
Bézier
BMP
clipboard
CMYK
GIF
hexadecimal
JPEG
lathe
modeling
pixelation
PNG
Hue:
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.
Value:
It refers to the lightness or darkness of tone, not to its color quality.
Tint:
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.

Light:

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.

rendering
RGB
shading
TIFF

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

Chapter 9
alpha
beta
change order
client sign-off
contingencies
creative strategy
deliverable
executive summary
feasibility study
Gantt chart
Request for Proposal (RFP)
scope
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:
Processor
RAM
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)
assets
background layer
cross-platform
drawing software
Ethernet
FireWire
image-editing application
Internet service provider (ISP)
local area network (LAN)
Microsoft Windows
mirroring
painting software
parent and child
platform-independent
RAM
Score
sprite
stage
terabyte
WiFi
Chapter 12
Adobe Dreamweaver
helper application
HTML editor
marking up
Semantic Web
streaming
TCP/IP
video stream
Definitions and terms:
Chapter 1
DHTML
HTML

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