Wednesday, May 20, 2009

In-Class Final Exam


Create an outline for content on, focusing on the Management directory only for content below the second level. Use the numbering system explained in the "Site Diagrams" article (in the "Specifying levels and numbering pages" section).

Start with the home page ("1. Time Warner Home") and then list all the top-level landing pages (starting with "1.1 About Us" and "1.2 Management"). Below that level, only continue for the content under "1.2 Management" -- so your next entry should be "1.2.1 Board of Directors" and you should continue from there.


Using the outline you just developed, create a simple tree diagram (site map) for the content you've just inventoried. This diagram only has to include the first three levels of information (1 through 1.x.x levels), but you are welcome to include the whole Management directory tree if you'd like. (If you read about how to represent ranges of similar pages with nothing below them -- like bios, for example -- you could include them easily, but it's not required.)

What I'll be looking for on this diagram is that each page represented is numbered according to your outline (I should see a number on each and every page icon) and contains a short version of the page name.


Create low-fidelity wireframes for the following two pages that you've just outlined and diagrammed:

Make sure to label the wireframes for each page using the corresponding number from your outline and the name of the page. This can appear as a simple text header above the wireframe.


Send your work to me as email attachments. Send the message to and use "Final Exam" as the subject line. Use the following naming convention for any file attachments:

[first 2 characters of last name]_final-[file number]_adv3560.[file suffix]

If you use, you can use the sharing feature to send me your work on the tree diagram. If you do that, please be sure to use, rather than my City Tech email address.

Good luck. Or congratulations, if you're reading this after finishing...

Friday, May 1, 2009

Final Exam Preview

Your final exam will be given on May 20, our last class meeting. As I mentioned on Wednesday, your grade on the final will be determined by an evaluation of your class blog, as well as an in-class exercise.


Your class blog will be evaluated for two things: completeness and consistency.

In short, you should have an article and a set of terms posted for each week that our class met since Wednesday, March 4 (i.e., you can exclude Spring Break weeks). The presence of all posts (regularly maintained content) will be the basis for your rating on completeness.

You should also have a style that is consistent for each type of post from week to week. Each news article post should look very much like every other; likewise for the terms. Styles should be carried through consistently.

I would also strongly recommend that you have each type of post labeled to provide an easy way for me to view them in their respective groups. If you didn't add a "labels" gadget yet, this would be a good time to do it.

As I said on Wednesday, if you have any concerns about the way the Blogger tool has affected the appearance of your posts (fonts not appearing as you intended), please bring this to my attention by email and discuss it with me at our next meeting.

In-Class Exam

For the in-class portion of the exam, you'll be asked to demonstrate your ability to apply the skills that we've been learning in the second half of class. You may be asked to create a numbered outline/inventory of a website, create a basic site diagram, and create one or more wireframes. There will be no surprises on this portion of the exam. If you practice these skills in class, you should be well-equipped to complete the in-class portion of the exam.

Optional Midterm Exercise (Due No Later Than May 13)

As we discussed in class, students who received a B+ or lower on the midterm can complete this optional assignment to raise their grade up to two steps (e.g., C to B-, or B- to B+).


The assignment is to create two separate guides to adding posts on your blog, one for each type of post (i.e., a guide to adding terms and a guide to adding news articles). This does not have to be written in essay form. You can write this as a set (or two sets) of step-by-step instructions, numbering each step or using a combination of short paragraphs and bullet points.

The important thing for you to accomplish in this assignment is to give someone enough information to add content to your site, format it correctly, and label it properly. You DO NOT need to give instructions for how to log in to Blogger. From the technical standpoint, you can begin with the instruction to create a new post, assuming basic knowledge of logging in.

For each guide you should, however, explain briefly how to find the appropriate type of content to post. Give a brief explanation of the sort of terms you post, or what topics and/or sources for articles you usually use (for example, "Perform a Google search for the phrase 'information design news' and ..." or "Go the New York Times Technology section and ...").

Make sure you cover how text should be formatted, how posts should be titled, what labels should be applied, how dates should be handled, whether images should be included (if so, then where, what size, and what format?). The more of this sort of information you clearly convey, the better.

Submission Guidelines:
For this assignment, please submit a typed, double-spaced hard copy only. No electronic submission for this assignment.

Please be sure that your name and date are included on the hard copy.

Due Date:
6 p.m., Wednesday, May 13 (You are welcome and encouraged to submit this assignment earlier. Wednesday, May 13, will be the last day it is accepted.)

HW Assignment #6 (Due May 6)


For next week's class, please read the following two articles. The first article is the same one that appeared in an earlier post. It goes into a little more detail about diagramming websites. After our class discussions, it should be mostly review.

The second article is a great short summary of wireframes. It explains what they are, what purpose they serve, and how they fit into the design process.

There is no written homework due for the next class, but you should be prepared to discuss and apply the concepts in these two articles.

Site Diagrams: Mapping an Information Space
by Jason Withrow

The what, when and why of wireframes
by James Kelway

Due Date:
6 p.m., Wednesday, May 6

Wednesday, April 29, 2009

Mapping Sites

Two useful links for our class discussion tonight. The first is an article from a site (Boxes and Arrows) that's a great resource for topics related to information architecture. The second is a Web 2.0 application that's attempting to take some of the pain out of diagramming sites.

Site Diagrams: Mapping an Information Space


Clouds Gathering (?/!)

Two more articles following threads of our in-class conversations about industry news.

Swine Flu Outbreak Tracked With Twitter

Tech giants form open cloud standards group

Wednesday, April 1, 2009

Team Right

This is the list created by Team Right, which consisted of:

  • Wen
  • Dalal
  • Clifton
  • Sam
  • Taka
  • Grace

Who is target audience?

What are we offering?

How are we offering content?

Why did you choose the blog title and URL?

Why did you choose your layout?

Should the blog title and URL be the same?

Should they be easily memorable?

Are they memorable?

How are they spelled?

How should the blog be laid out?

How does the headline connect with your target audience?

How does it relate to your content?

Should your gadgets be on the left or right side?

What font should you choose and why?

What size are your fonts sizes?

What font colors should you choose?

Should you change the colors of you predetermined layout and if so, why?

What gadgets should you choose?

Should you create your blog using HTML or the readymade layouts?

Should you add a labeling gadget to your page?

How should you design your archive (date?)

What labels should you choose?

How detailed should the labeling terminology be?

Should your blog be personalized?

Should take advantage ability to use ad space on your blog?

Should your link and label colors be attractive?

Why did you choose that specific color?

Do you want to create your own header/title?

What color should it be?

Should it stand out or be related to the rest of your layout?

Should your post titles be specific to your content?

Should you use color to create importance?

Is your blog content heavy/specific?

Should your color hierarchy reflect this?

Should visited links have a separate color?

Should you use different fonts for your overall layout?

Do you want a blog archive?

How do you want other people to feel about your blog?

Would you change anything if you suddenly had a large about of followers?

Should you have a list of followers on your blog?

Should you use video and or images on your blog?

Do you want feedback on your blog?

Have you taken different monitor sizes and browser windows into account?

Do you want subscribers to your blog and if so, do you want to display that?

Do you want RSS feed on your blog?

Should you label?