Contrast and Uniformity

As far as the visual uniformity and contrast, I ftp'ed a basic design for my Instructional Website. I will replace the basic colors, especially the links on the bottom, with gifs that look a bit more professional. I'm addressing uniformity by simply copy and pasting the basic structure of my website to every page I create. I really haven't decided what font my site is, but that's something I will decide later (there are more important things I need to consider right now).

One important contrast/uniform trick I'm employing is a color code that matches the progression the user will take through the site. For example, the user begins at the "First Third Link" (poorly named, but it's just a place holder) and its color is green. All the sublinks below it are green, and in the main content area, the color of the border will be green also. The middle content box background will either be white or a dull color, but the content will be text. Hopefully, this will draw people's eyes down to the bottom of the page where all the links are and at the same time, give the user a visual clue as to where he or she is relative to the other steps.


NOTE: To temporarily alleviate my div tag issue, I'm doing tables within tables to basically get a similar effect, but I really don't want the user to have to load a brand new page to do this (which is what tables within tables forces the user to do).

Delayed Workday Post

As a quick note: I've been working on the skeleton of my instructional site and I've run into a problem in Dreamweaver 8: it's not recognizing new div tags (aka layers) I've added to the code. As a result, it's not allowing me to add behaviors to my bottom links. I'm going for a "onMouseover" behavior for my bottom links so that the sub-links will appear below it. I had originally put the div tags inside the table, but now, I think I'm going to absolutely position them so that they aren't technically in the table, but just appear so. If that doesn't work (as in, DW8 finally recognizes what I'm trying to do) then I'm going to attempt to put the script in and change the "id" tag in the script call. I might also try this in MX tomorrow.

My Portfolio Site according to Chapters 5 and 6

The portfolio site is a bit easier to nail down in terms of structure and navigation: basically because the functional and the content requirements are prescribed already.
The conceptual model will be a file system in a cabinet where each big folder will be organized according to different criteria. The nodes will be placed in a hierarchy (although this site will be so small, it will also be almost organic) with the main topics: Goals, Biography, Sample Works. The "Goals" page will have two sibling pages: personal and program goals. The "Biography" page will have, as of now, one sibling (because most of the content will be on the biography page anyway) which will be a "Useful and Favorite Links" page. At a later date, it might also include a second sibling, a photo gallery. The "Sample Works" page will be chronologically organized starting with the 1st jury, 2nd jury, and 3rd jury. Depending on the amount of content, all 3 juries could be on the same page with the links to sample works below each jury and organized chronologically. The navigation will be global, with local options available under the main nodes (a "mouseover" effect that looked like the local options appeared from under the global links would make for clean navigation). Any user error will be minimal because the user feedback will come in the form of a "Contact me" e-mail link. Ensuring clean and concise navigation will address user error.

My Instructional Website according to Chapters 5 and 6

As I'm still struggling with the content of the site (I'm learning something new), I can still make design decisions based on its nature from a top-down perspective. For example, its structural layout/architecture will be linear and its conceptual model will be a tabbed, spiral bound manual (this particular spiral bound notebook is bounded horizontally/landscaped with the tabs at the bottom). Garrett does not like taking conceptual metaphors literally, and I'll heed his warning! I won't incorporate a spiral picture at the top of my page, for example, but it's the tabbed section on the bottom of the page where this metaphor applies. Hopefully, the user won't make a conscious connection between my site and an actual tabbed manual.

Why this metaphor? Because building an interactive photo gallery is step by step process, and I can color code (a wayfinder if you will) the tabs so that the user can easily navigate (and be aware of where they are) to the section that suits his or her level of technical comfort and be able to go back to sections that need to be reviewed. So the "organizing principle" is levels of difficulty/a progression of steps (as one gets further into this project, the difficulty increases). Specifically, this arrangement would be like this: I'll group beginning/1st steps together (web hosting decisions, choosing a database, php basics, creating a webpage template), intermediate skill/middle steps (building the database, incorporating php commands into the template), and advanced/final steps (dynamic acquisition of content/pictures, dynamic creation of new pages, additional options).

Navigationally, the problem will be, "Can I fit all of these options as links on the bottom of the page?" I think so: it'll be a two tiered navigation bar where the higher nodes are placed in one row, and in the row below, the "tabs" will change to the subsections of the higher node. This navigation system will be global in nature, but there's another consideration: linking terms to definitions or examples. In this case, the global navigation will be supplemented by contextual navigation (some or most of these links will also go to external sites). There might also be some local navigation with "next page" and "previous page" links.

As a last note, as far as user error is concerned, the problems will arise from people not being able to identify where they need to "jump in" at (and not providing user feedback). They might select a step further on in the process, like an advanced step, when they actually need to jump to something that's intermediate or beginning!