- Assignment 2: Rich Graphic Design for CluelessPC/NovicePC (CPC/NPC)
Original Proposal 8/18/08: "Pure Design of site and implementation of design to "skin" existing content in rich graphical "Victorian science" themed CSS design. Implemented online."
This assignment is the weakest of the four. The major accomplishment of this design is that it is a successful "liquid" 3-column, style-sheet driven design. Some of the benefits of this can be revealed by stretching and distorting [resizing the window of] a browser full of text and watching it stay visible. Also, visiting the page with a mobile device should yeild equally good results, even without the use of a mobile style sheet.
The pyramid graphic is also a triumph of engineering. For the record, it does use tables, although I'm uncertain if this is an example of a place where tables are avoidable or not. The general behavior is that mouseover shows either green or red (depending on context), and the resting table cells show the state of the unit of content's quiz results (blue for unattempted, green for success, and red for failure).
It may not be apparent, but the problem of designing graphics to be aligned 1 over 2 over 3 over 4 with symmetry and alignment, as well as substitutions, and no dithering between the graphics is actually a devilish basic design problem. The goal behind the design is to elegantly show the state of the quiz results for the content units, while showing their hierarchical relationship to one another. Perhaps unwisely, the pyramid is one component of two dueling interfaces -- the other being the traditional vertical nav.
"The rest" of the "rich" graphical design just never rose to the surface. The pyramid took me about a week to design, but so much of even that work was coding php and css; other aspects of the pyramid (like what the heck it's doing on the page) were neglected. Soon enough interaction design took over and graphic design became something to do later.
The style sheet design also burned a lot of time and ultimately hurt the graphic design process. This 3-column liquid design is unusual because it avoids the use of certain basic css properties (like margin and padding) by designing overlapping divs (some of which are transparent), which effectively "add up" to the same kind of design as you would expect, apparently without the drawbacks and quirks which plague many liquid designs. Like being able to change them. The result is that this design is very inflexible and will happily be replaced with a simpler liquid 3-column design for the next major redesign.
