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?

Team Left

Here is the list produced on March 25 by Team Left, which consisted of:

  • Lana
  • Eduardo
  • Jimmy
  • Karolina
  • Kin
  • Oscar
  • Kenson

1- URL - what's my url? is it remarkable? is it related to my content? is the URL the same as my Blog title?

2- Blog title - is it appropriate? does it define the blog purpose?

3- Colors scheme: What kind of feelings/impression are you trying to convey?

4- Fonts: is the content the right size? readable?

5- Layout / template: -which template should we pick?

6- background: - Is the background helping to convey the design mood?

7- Labels - Should I use labels? if yes, How should I label them?

8- images: Should I use images? are the appropriate to the content? Should I mention credits?

9- subtitles / headers: should they be different from the body style? Should they be consistent? Should I use the same title of the article?

10 links: Should I add links to the articles? should I mention the entire URL?

11- Banner Choices: Should I keep the same banner? Should I include a banner in my blog?

12- Usability: What do you mean by usability? is user friendly?

14-Interaction: Can people comments?

15- right Context: Is the context related to the theme?

16- right Content: is the information related to the theme?

17- source: Should I give credits to the

18- Define unknown terms

19- target audience

20- mission

21- Personal Information

22- Copy rights

23- Consistency

24- Credits

25- Index

26- Post dates

27- Meta-tag

28- How many post per page

Privacy and Persistence

It seems that the two issues we touched on last week are really alive in the press these days. Consider these three articles:

Should You Worry About Data Rot?

Storage: The bytes build up – but where can we put them?

Brussels to investigate consumer profiling by online advertisers

First, I hope you noticed the two different headline capitalization styles (the first clip is from the New York Times, the second two are from the Financial Times). Presentation aside, these are interesting in light of our discussion last week.

The first two articles address the question of backing up data. The "Data Rot" article looks at the question of storage alternatives from the individual consumer's point of view. It may not say much for the safety of CDs and DVDs as backup media, but read what the person interviewed thinks of online backups!

The second article considers the incredible rise in data volume produced by business. It also strongly questions the viability of any kind of cloud-based backup solution.

Finally, the third article speaks to our discussion of privacy when surfing the Web. European policy officials will be meeting to consider the problems posed by the way data is collected online.

The depth of what's available to interested commercial parties transcends anything as simple as cookie tracking or disingenuous data collection forms. Essentially, users are asked to waive fundamental rights to privacy when simply accessing the Web from home. Very interesting reading.

There may not be much that can be done to change persistent data trails left by the nature of the Web medium, but the article mentions transparency about that data trail as one goal of a more appropriate online environment. This sort of transparency is absolutely something that can be reinforced by choices in information and interaction design.

Thursday, March 26, 2009

RealAge: Ethical Information Collection?

I came across this article tonight and it seemed especially interesting after our discussion about information collection, privacy, and information design in class earlier today.

Online Age Quiz Is a Window for Drug Makers

The article explores the issues raised by the RealAge online test. This is a case in which information is being collected in a way that is currently legal, but may not be wholly ethical.

There are no criminals stealing credit card information, but instead large corporate interests using marketing data to sell products. The ethical design question lies in how the data collection process is represented to users.

The user experience emphasizes the potential benefit to end users of being more aware of the effect of life choices on their health and longevity. It minimizes the fact that the information users enter is being aggregated in a large marketing database. According to the article, there are also many opportunities to opt in for membership (which includes consent to be contacted concerning health-related products) that may not be apparent to typical users.

How would you assess a case like this in light of our earlier discussion? Are there opportunities to change the design of the user experience to be more transparent without losing the target audience? Comments are welcome.

Wednesday, March 25, 2009

CUNY Online Security Course

Thanks to Wen's sharp eye, we have access to a course in online security. As I mentioned, the "Security Awareness Training" is described as "approximately 30 minutes in length, covering the basics of why information security is important and best practices."

I'll be very curious to hear how this connects to our discussion of security on the Internet and the Web. To take the course, just go to the URL below and "enter [your] full name, City Tech email address and CUNY School."

Good luck to any takers.

Sources for Articles

I heard some feedback after class last week about people wondering where to find good articles. I have a few suggestions that I'm offering in this post.

I also want to remind everyone that you should be writing about why the article you've selected is relevant to class. What's interesting about it? What connects it to information design, or some part of the future direction of the Web or Internet that makes you choose it?

You don't really need to include an article summary, per se. You can just refer to the piece as you discuss its relevance.

With no further ado, here are some sources that you may find interesting, or may already use:

Financial Times Digital Business Section

InfoDesign: Understanding by Design


New York Times Technology Section





If you have a special interest in issues about privacy, intellectual property, and ethical uses of technology, then the following sites might lead you good places:

Creative Commons

Electronic Frontier Foundation

Electronic Privacy Information Center

Wednesday, March 18, 2009

Editing Blog Posts

I've received a few questions about problems formatting text using Blogger's WYSIWYG editor. I want to offer a couple of tips.

First, you may want to cut and paste and text that you intend to use on your blog into a text-only editor before pasting it into Blogger's editor. This will strip out any residual formatting that may be carried from programs like Microsoft Word. You can then apply formatting in Blogger.

If you're a Windows user, then using Notepad should do the trick. On the Mac side, you may want to consider a free program like Textwrangler ( Although TextEdit can also be used the same way, it defaults to retain some formatting from other contexts.

Second, if your WYSIWYG options seem to disappear (e.g., you can't find the dropdown menu for changing the font), make sure you are in the right editing mode. There are three separate modes in Blogger's editor and you can switch between them using the buttons at the top right. See the illustration below.

Friday, March 6, 2009

Midterm (Terms Due March 10; Exam on March 11)


As we discussed last Wednesday, your midterm will have two parts.

Part 1
The first part will require you to define eight terms without using the computer for reference (no Google!). You choose the terms from those you've been collecting for your blog.

Please send the eight terms you select with their definitions in the body of an email by 6 p.m. on Tuesday, March 10 (the day before class). I do not want this list sent as an attachment (if you've already sent it by the time you receive these instructions, I'll make an exception).

After giving this some thought, I've decided to distribute the terms to you as an exam on paper. On Wednesday, you'll each receive a final exam specifically created for you. I'll ask you to write the definitions out by hand, so please bring a pen and a sheet or two of paper to class.

Part 2
For the second part of your exam, I'd like you to write about the blog that you've created. I'd like you to begin with a general statement about the mission of the blog and the audiences (users) that you expect it to serve. I then want you to discuss every decision that you made, from selecting a title to choosing font sizes.

Tell me how and why each decision you've made fits with your understanding of how your target users will interact with the content on your blog. You should pay particular attention to the way you've labeled information on your site and think about how this enables users to find what they're looking for.

Remember that there is more than one way to be right -- you don't have to make the site fit one particular idea of what it should be. You do have to explain how your choices are consistent with what you expect the site to accomplish.

You may begin writing this part of your midterm now. If you'd like to complete Part 2 before entering class, you are welcome to do that. You will be given time in class, however, to complete this part of the midterm.

You are also free to make changes to your blog between now and Wednesday, but after Wednesday, you'll be expected to leave the formatting intact until your midterms have been returned. Good luck!

Friday, February 27, 2009

HW Assignment #5 (Due March 4)

HW Assignment #5


Your assignment for this week is to make a list with brief notes about all of your classmates' blogs. That means you should have a total of 16 entries with brief comments about the design of your each blog. You should use the list on this site to go to each of the blogs, and visit them in the order you find on the list (alphabetized by first name).

In this case, I want you to concentrate on the presentation of information, not the content of what they submitted as previous assignments. Your comments don't have to be whole sentences, but I'd like you to tell me what you notice. Comments can be positive and can also be critical -- but always be polite in how you phrase your notes.

You should email a copy of these comments to me as homework, but also bring a copy (digital is fine, as long as you can access it) to class. We're going to discuss your findings.

Also, be prepared to introduce your own blog and talk about the choices that you made. You don't have to prepare comments about your own blog in writing, but be ready to talk about it.

ONE IMPORTANT NOTE: PLEASE DO NOT CHANGE THE FORMAT OF YOUR BLOG UNTIL AFTER WEDNESDAY. You may get ideas from looking at your classmates blogs (this is good), but please don't change things until after we talk about your first attempt.

You can and should, however, also add two new posts to your blog: another article and five more terms with definitions and citations.


For this homework assignment, I'd like you to use the following layout convention in your document:

[Number]. [Name of Classmate] ([Blog URL])
[Notes about Blog]

This means that if I started a list, the first two entries would look like this:

1. Anna (

Interesting use of ... ; I also like ...; I wonder why the blog ...; etc.

2. Aziza (

Interesting use of ... ; I also like ...; I wonder why the blog ...; etc.

Otherwise, usual standards apply: typed, double-spaced Word, PDF, or text document with 12 pt font size. (I strongly prefer .doc files to .docx files.)

Submission Guidelines:
Email as an attachment to or with "HW Assignment #5" as the subject line.

Please include your name and assignment number in the body of the document.

Due Date:
6 p.m., Wednesday, March 4

Wednesday, February 25, 2009

Online-Only Class: The Shortest Lecture You'll Ever Attend


Welcome. I am about to invite you to the shortest class that you'll probably ever attend. I have been working to produce an interesting interactive experience, or at least an unconventional one based heavily in Web 2.0 tools. I've encountered a few challenges that have been educational for me and I'll discuss those with you in class.

I'll begin by mentioning that I produced about 45 minutes of video content to deliver to you as an online lecture. Doesn't sound short, does it?

In fact, though, it will be very short, because I'm going to deliver less than ten minutes of this information due to encoding limits. I'd like to propose that you download the original 700MB file, but I'm really not so cruel.


So, I'm going to ask you to watch two short videos that were reduced to very low quality to facilitate speedy upload.

The first short upload.

The second short upload.

Once you've watched these videos, I'd like you to register your attendance at class by adding a comment to this blog post. Please include your first name in the comment, so that I know you've been here, and also include the link to your blog (the link that you should have emailed to me by now).


The next thing that I'd like you to do is watch the following tutorial video. It contains instructions for how to create a spreadsheet that you'll use to keep track of your list of terminology. Essentially, you are taking the first steps toward building a small relational database. The very first steps. Don't worry, it's not so bad.


Finally, I'd like you to read the following two news articles about the New York Times website. After reading them, I'd like you to give them some thought and make some short comments about them -- by phone. Yes, I'd like you to call a phone number that I'll be sending you by email and follow the instructions it gives you to leave a short voicemail message.

Times 'Updates' Make Clark Hoyt Want to URL

At Times 'Hack Day,' Geeks Are Invited to Make a Newspaper Work on the Web

In the message, please start by stating your name, then leave a short comment -- no longer than two minutes -- offering a brief response about the articles, or asking any questions that come to mind after reading them. I know this is wide open and unusual, but part of the point is to create some multimedia content.


Now, just as after a normal class, all you have to do is wait for your homework assignment to come on Friday. If you want to get a jump on other work, know that I will expect you to collect five new words for your terminology list, as well as to add one new article to your blog.

Class dismissed!

Saturday, February 21, 2009

HW Assignment #4 (Due February 25)

Assignment #4


For this assignment, you are going to create a new blog and add at least two posts to it.

1. Go to and create a blog using the Blogger platform.

You can create a new email address just for this account, or if you want to tie it to an existing address or Blogger account, that's fine, too. Just make sure that this is a completely new, dedicated blog for use in class (at least until the semester's over...).

2. Select a format that you think will suit the purpose of the blog.
There are no restrictions on your choices, but you should make them for a reason. These reasons should relate to the context of your site (an Info Design class), the primary users who will visit the blog (i.e., me and your fellow students), and the content that you'll post (for now, that will be news clips and terminology definition lists).

Without needing to know how to write any code, you have the ability to change background designs and colors, add or remove page elements, and format text and hyperlinks in individual posts. When you make decisions about how to format your posts, please think about why you're making choices and how they'll perform over time. You don't need to write this down now, but this thought process may be part of a later assignment.

Some elements not to overlook in your consideration:
A. Post names
B. How you'll use dates to organize information
C. Whether or not you'll use tags to identify your posts
D. Font color(s) and size

3. Use Assignments #2 and #3 to create your first two posts.
Use the list of terms that you submitted for Assignment #2 as the prototype for one type of post. Use the article summary and review as the prototype for a second type of post. You'll be adding posts of this kind at least once every week.

4. Email me the URL of your new blog.
That's it. Once you've created the blog and added your first two posts, please send me the URL and I'll add it to our class site.

Email body text only.

Submission Guidelines:
Send your blog's URL in the body of an email to or with "HW Assignment #4" as the subject line.

Due Date:
6 p.m., Wednesday, February 25

Updated Naming Convention

As we discussed in class on Wednesday, the naming convention that we originally chose for homework files had a few shortcomings. This new version should address the things we missed the first time.

Please follow this updated file-naming convention when submitting assignments as attachments.

hw[assignment number]-[file number]_adv3560_[first 3 characters of last name].[file suffix]

If I were submitting Assignment #3 and I needed just one attached file, I would name it:


If I were submitting Assignment #3 and I needed to include three attached files, I would name them:


[post updated with correction (explanation in comments) on 3/4/09, 5:02 p.m.]

Friday, February 13, 2009

HW Assignment #3 (Due February 18)

Assignment #3

Your assignment this week is a short one. I'd like you to find one article published online within the last two weeks that pertains to the Web or information technology in a way that you think is significant (or just interesting).

First, I'd like you to write a very short summary of the article (think two to three sentences at most). Then I'd like you to explain briefly what it is about the article that you think would be of interest to the class.

Be sure to include a link to the original article. It could be a blog post, but if so, it should not be a post that merely recapitulates an article from another source. If it is, then just go to the source article and note that you discovered it through a blog.

Please follow our new file-naming convention when submitting the assignment. For anyone who didn't note it:

hw[number]_adv3560_[first initial][first 3 characters of last name].[file suffix]

So, if I were the one submitting this assignment as a Word document, I'd send a file that was named:


Typed, double-spaced Word, PDF, or text document with 12 pt font size. (I strongly prefer .doc files to .docx files.)

Submission Guidelines:
Email as an attachment to or with "HW Assignment #3" as the subject line.

Please include your name and assignment number in the body of the document.

Due Date:
6 p.m., Wednesday, February 18

Tuesday, February 10, 2009

Class Location Change

N-1101 to N-1102

You should have received an email today letting you know that we'll be changing locations for the remainder of the semester. Starting tomorrow, please come to N-1102, the computer lab next door to our old meeting place, for class.

Saturday, February 7, 2009

HW Assignment #2 (Due February 11)


For next week's class, you'll be reading the following two articles, both published in 2005. They address two topics still very relevant to Web development in 2009: Web 2.0 and Ajax.

What Is Web 2.0
Design Patterns and Business Models for the Next Generation of Software
by Tim O'Reilly

Ajax: A New Approach to Web Applications
by Jesse James Garrett


Assignment #2


The written part of your assignment is to make a list of at least 10 key terms from the two articles that you think are important to understanding them. Provide short definitions for each of the 10 terms (these can include company names or products), citing any sources you use to help you define them.

After you've written the terms and definitions, write a short description of how you researched these terms. You can use one term as an example, or you can explain your research process in general. I'm curious to know if you go to a particular search engine first, or if there are other resources you use. Do you often use more than one source?

So, that means the written assignment has two sections:
A. Key terms with definitions
B. Short explanation of research process

Typed, double-spaced Word, PDF, or text document with 12 pt font size. (I strongly prefer .doc files to .docx files.)

Submission Guidelines:
Email as an attachment to or with "HW Assignment #2" as the subject line.

Please include your name and assignment number in the body of the document.

Due Date:
6 p.m., Wednesday, February 11

Friday, January 30, 2009

HW Assignment #1 (Due February 4)

It is officially time for your first, short assignment. If you have any questions about what you read below, please don't hesitate to email me.


Your first writing assignment is very brief. Take a page or so to tell me how you make critical judgments about websites. When you visit a website, how do you decide if it's good or bad? Useful or not?

You don't actually have to critique a specific website; just share some information with me about the way you think about websites. Explain what goes on in your mind when someone sends you a website link and asks you what you think. That's it.


Typed, double-spaced Word, PDF, or text document with 12 pt font size. (I strongly prefer .doc files to .docx files.)

Submission Guidelines:

Email as an attachment to or with "HW Assignment #1" as the subject line.

Please include your name and assignment number in the body of the document.

Due Date:
6 p.m., Wednesday, February 4

Wednesday, January 28, 2009

Meeting Dates for Spring 2009

Welcome to the primary website for section 2260 of City Tech's course ADV 3560: Information Design for the World Wide Web. I'll use this blog to post written assignments for class, as well as assigned reading, news clips, and miscellaneous other things that relate to upcoming in-class projects.

For this first post (and at the risk of being redundant), I'm including our planned meeting dates, excerpted from the syllabus to be distributed in our first class.

I'll generally send an email to the class when updates are made to the site. Please feel free (even encouraged) to leave comments on any posts that interest you.

Meeting Dates:

January 28

February 4

February 11

February 18

February 25

March 4

March 11 MIDTERM

March 18

March 25

April 1



April 22

April 29

May 6

May 13