MEDIA DESIGN / HYPER MEDIA DESIGN

This course will provide a solid introduction into media design and hyper media design, including color, color theory, typography, multi media, and corporate identity design. The class will teach how to create basic Web pages using Hyper Text Markup Language (HTML), devise and develop basic multi media projects; understand and apply color theory, and use fonts, type and typography. The course will cover the basic HTML framework, font, type, and text formatting, images and graphics, as well as different color and perception models. Students will focus on design and aesthetic considerations but special attention will be devoted to readability, usability, coding syntax and implementation methods.

Students will apply the lessons from the class, and create and design several multi media projects, homepages, and portfolios. Projects assigned include a resume, a personal portfolio, logos, self created fonts, the application of type, corporate identities, hypermedia projects, and marketing campaigns.

• CLASS INFORMATION
  
• CLASS SCHEDULE
  • Week 1 - Introduction
  • Week 2 - HTML and WWW I
    Internet, World Wide Web And HTML
  • Week 3 - HTML and WWW II
    Organizing and Formatting of Text
  • Week 4 - HTML and WWW III
    Images and Tables
  • Week 5 - HTML and WWW IV
    Cross Compatibility, Usability Engineering, GUI
  • Week 6 - Color I
  • Week 7 - Color II
    Models and Systems
  • Week 8 - Font, Type, and Typography
  • Week 9 - Font, Type, and Typography II
  • Week 10 - Font, Type, and Typography III
  • Week 11 - Multi Media I
    Sound, Video, and Animation
  • Week 12 - Multi Media II
    Animation, Banner and Online Marketing
  • Week 13 - Branding, and Marketing I
  • Week 14 - Branding, and Marketing II
  • Week 15 - Final Presentation

• MATERIAL
  
• REQUIREMENTS

Image Types and Formats/ BMP/ TIFF/ PSD/ JPG/ PNG /GIF
IMG Tag/IMG Tag Attributes/ Image Sizing And Scaling/ HSPACE, VSPACE, and BORDER
IMG Alignment/ BR Attributes/ Background images
More Information on Graphics on the Web
Introduction/ Alignment/ WIDTH And HEIGHT/ Vertical Alignment
Spacing In Table cells/ Table Cell Color/ Usage/ Column And Row Spanning
HTML and WWW: Frames
Framed Pages/ FRAMESET/ Frameset Rows ROWS And Columns COLS/ Row And Column Sizes And Combinations/ Individual Frames/ Frame Sequences/ Nested Frames With Framesets/ Nested Frames Using/ FRAME SRC

Third Assignment
Portfolio Review

Site Navigation/ Text Based Site Navigation/ Image Based Side Navigation
Image Maps/ Creating And Embedding Of Image Maps
Screen Resolution/ Browser Compatibility
Visualization/ Usability Engineering
Graphical User Interface/ Skin/ Theme

Resource
browsers.evolt.org (Browser Archive)
Nielsen, David. Killer Websites.
Nielsen, Jakob. useit.com
Usability Testing and Human Factors Resource.
Yale University. Web Style Guide.
Accessible Design Guidelines.
2 Minute Usability Test.
Bobby. Web Page Accessibility Checker.
Wichita State University. Usability News.

Third Assignment
Portfolio Due for Presentation

Fourth Assignment
Color Wheel Due for Review with Instructor at Week 6
Create a Color Wheel with a diameter of 18 centimeters, an outer ring consisting of 12 colors, a center in 50% neutral Grey, with 4 steps in between. It is recommended to prepare the assignment based on several color samples.

Example
Thiele, Frédéric Philipp. Color Wheel. Handmade and Digital. 2002

Introduction/ Meaning of Color/ History
Fashion/ Perception/ Environment/ Culture/ Religion/ Politics/ Flags
Primary Colors/ Secondary Colors/ Related Colors/ Complementary Colors/ Neutral Colors

Book
Itten, Johannes. The Color Star
Goethe, Johann Wolfgang von. Farbenlehre
Long, Jim and Joy Turner Luke. The New Munsell Student Color Set.

Resource
Virtual Colour Museum. 59 Colour Theories
Color Matters. Perception, Psychology, and Culture


Fourth Assignment
Color Wheel Review

Presentation Assignment.
Each student is required to deliver a personal presentation. It is the responsibility of each student to propose and confirm the topic of the presentation with the instructor. The presentations have to reflect the curriculum of the next classes. Each presentation should be around 15 minutes, supported by appropriate media and accompanied by a one-page handout following the DIN A4/8.5”x11” template provided by the instructor. Examples might include a specific color (Red, Yellow, Blue, Orange, Green, Purple, White, or Black), focusing on color history, social, cultural and religious usage and effects, fashion, politics. Other topics can discuss a specific font (Times, Times New Roman, Arial, Helvetica, Futura, Garamond, Courier, Antiqua, Tahoma, Sütterlin, Cyrillic, Kanji, or Verdana), history, creator, usage, specifics, and attributes etc.

Required
Presentation. Handout.

Example
Kahlau, Matthias. Font Family Garamond. 2002.