Smart Board Sketches

From Meda360 Spec

Here are some images saved from a class session where we discussed the basic structure of this website.

captions refer to the image above them

Image:ui_divisions.jpg
The positioning of the four main content areas in the big picture
Image:landing_point.jpg
The landing spot. Has an intro and four way navigation. Overlays the main UI and disappears once the user moves away (?)
Image:content_nav.jpg
Three zoom levels: content - intermediate - big picture. Clicking in empty space goes to big picture, clicking in content goes to close up, use the zoom utility (utility nav) to hit the intermediate mark. Ghosted arrows appear at the corners of all sections for navigating away.
Image:general_contentUI.jpg
All content UIs use a similar grid system, but elements are placed such that they look hand-drawn and slightly askew. All use a multi-pane approach built from separate movieclips.
Image:highlights_majors.jpg
In the course overview, all the courses are listed to the left. At the top-left are the majors (symbolized), when selected each major, highlights in a particular color. When courses have videos, the course listing gets a video badge. Otherwise the course description calls up a text/image combination.
NOTE: we need a UI "widget" for DE-selecting a major and going back to the "ALL majors" view.
Image:player_UI.jpg
Video players will be simple. Just a play/pause toggle, and a scrubber.
Image:utility_nav.jpg
Footer/utility nav includes copyright, "help", and zoom controls. The Help will bring up the intro-text, and links to each section of content. This will be a static bar that sits below all interfaces.

Next Section: bigPicture

Return to: Design concepts

Retrieved from "http://editthis.info/meda360_spec/Smart_Board_Sketches"
Personal tools