HOME  •  SYLLABUS/SCHEDULE  •  ASSIGNMENTS  •   COURSE RESOURCES   •   YOUR PAGES   •   YOUR FEEDBACK

 

NOTE From DJ:  I AM GOING TO INCLUDE THIS AS AN INTRODUCTOIN TO THE PRACTICUMS>.. DO NOT CHANGE IT NOW.  DJ 

 

Design Dynamic: A Visual Design Guide for HTML          

 

 

Questions to Ask Yourself

·      What’s the purpose of the site? (art > > > commerce)

·      What’s the presentation style of the site? (gallery > > > library)

·      What changes and how often? How is this reflected in your choice of technology? (boutique > > > dynamic)

·      Understand WHAT YOU CAN’T CONTROL (your user’s connection speed, installed fonts, browser size, additional plug-ins or functionality). 

·      SCALE YOUR MEDIA + EXPECTATIONS + EXPERIENCE (“Degrade gracefully”)

 

 

Major Structural (Functional) Elements

·      Navigation

·      Content (images, text, plug-ins)

·      Additional Elements (advertising, copyright notice, etc.)

 

  

Your Design Vocabulary (what you’re working with)

 

·      Text

o     Headings and Titles (also called banner or display text; might be text or could also be graphic elements)

o     Body Text (generally, standard fonts)

o     Interactive Text (hypertext links, and text on rollover)

 

·      Images

o     Inline Graphics (images in the body of the page)

o     Background Graphics (single image in the background; tiling/non-tiling)

o     Interactive Graphics

§      Buttons with Image Swap (see Javascript)

§      Image Maps

 

·      Layout Containers

o     Tables

o     Layers

o     <div> tag

o     Frames

o     I-Frames

 

·      Plug-in Media from other sites (Web 2.0)

o     Video (YouTube, Vimeo, etc.)

o     Sound (embedded .mp3, various players)

o     Images (Flickr, Slide.com, Photobucket)

o     Widgets, gadgets, applets (Google Gadgets)

 

·      EMPTY SPACE (#1 most important design element!)

 

 

This Vocabulary Changes Dramatically When You:

 

·      Use Javascript (from controlling window size to animating elements – also used on image swap buttons)

 

·      Decide to create a dynamic site using server technologies (php, asp, dot net, ruby on rails, etc)

 

·      Use Flash – adds motion graphics, animations, sound, and video

 

 

 

 

______________________________________________ 

(previously . . . .Visual Design vs. Information Design on the Index Page)

 

Function:

Navigation

a.    links internal to page

b.    links internal to site

c.    links to external sites

 

Content

a.  Text (static/dynamic)

b.  Images (still/motion)

c.  Audio and/or Video

 

(Advertising)

 

 

Style:

Gallery (sparse, deliberate, arty, restrained)

1    Just single image or video

2.   Image/video plus a few choice links (internal)

a.    2D: Grid based

b.    2D: Cloud, Network based

c.    3D navigable space

3.    Image/video, some links, and exit links (usually advertisement, might actually be art)

 

Library (super busy, lots of choices, usually dynamic, commercial)

1.    Endless Grids: arrangements of columns, rows, banners. How are different functions articulated?

2.    3D navigable space