f ICL: E-Learning > COGS 187A
 Projects > E-Learning


COGS 187A - Multimedia Design (1)

  Keywords: Cognitive Science 187a, Elearning, Multimedia Design, HTML, CSS, Information Architecture, Metaphors, Navigation, Hypertext, Interactivity, Usability Heuristics, Task Analysis  

This class consists of lectures and labs designed to work together to introduce the student to the dynamic field of web design and information architecture. The lectures will present and examine key issues that thoughtful designers need to understand to improve user experience. Initial help on HTML programming will be available during lab sessions, but overall the course is setup to help students find the programming tutorials and help they need on the web.

At the end of this course you should have a basic technical competence in html coding, simple javascript, cascading style sheets, and usability evaluation. At a more theoretical level you should understand the core principles of information architecture, understand the influence of layout on comprehension, the pros and cons of using hypertext in communication, and glimpse the possibilities of new narrative structures.


Course Website

Browse the COGS 187A course website.

Visit Course Website

  HTML and CSS Review

The beginning of the course starts with a brief review of the basics of HTML and CSS. The students then apply their knowledge of HTML and CSS to the following theories of multimedia design.



Site Design

Information Architecture
Information architecture is the construction of a structure or the organization of information. On the Web, information architecture is a combination of organizing a site's content into categories and creating an interface to support those categories. From site navigation to designed "spaces," an effective information architecture leads to more usable Web-based networks.

Metaphor is a mechanism for shaping expectations. It uses similarity to cases we already know about to help us through new situations. Using metaphors in novel situations provides you with much needed hints, advice, and enough constraint or a sufficiently intuitive context of action to make it obvious what to do.

Designers have a variety of organizational principles they can apply to design a site to be easily navigable. Navigation is about being able to find by traversing links. The labels, links and graphics that help users browse through a system.





Hypertext is the language that links the Web. On Web pages, hypertext is anything that is "clickable" - text, images, music, applications, etc. For example: you use links and anchor tags to create hypertext on Web pages. All these things are linked together in a non-linear manner.

Humans interact in all sorts of surprising ways with texts, and as designers we need to understand these to create good page layouts and good web sites.




Usability is about experience - the feeling of being able to do what you want to do easily, comfortably, without mental strain. Heuristic evaluation is a quick way to determine what is wrong with a site. What follows is a lecture on the main ideas of heuristic evaluation.




Task Analysis

Task analysis is a way of determing how effectively transactions are designed. A well conceived task analysis can help designers determine the required interface and interaction design for transactions, and web site owners determine how well designed the transactions are compared with other sites. They need to continually understand how each and every transaction works.


  Project Team  
David Kirsh
(202) 623-3624
Office: CSB173
Justin Kodama
(858) 455-0965
Shailendra Rao
(858) 455-0965
Andy Guerrero
(858) 822-2475
Office: CSB 206B
Gregory Elliott