Print2Web Class 3

Homework check-in

Link multiple pages together using link tags to build a website.

Help users plan their commute via city bus
Marcus has just started a new job downtown and wants to commute by bus. Each week he starts work at 8:30am and leaves work around 5-6pm
Create a solution that helps Marcus plan his commute
What information would the system need to help Marcus plan his commute?
What resources would the system need to accomplish its tasks?
What exceptions might exist in the regular schedule?
What additional information might be delivered to users?
How might the system update users about delays?

Using the information gathered sketch out a basic website for an online city bus service
Sketch out a storyboard of how Marcus would use the site to plan his commute
Don't get too specific; think thumbnails with titles
Feel free to draw a process (not just UI) if it helps develop the idea

Analyze the content of the site
Place types of content in buckets
IA principles help guide the systematic organization of content within a website
We'll discuss IA in more detail in Class 4

Content-only wireframes: Powerpoint is used to define the key pages of the site. Name of the page, and a list of content items are captured on each page without information about layout or placement. This technique can be used to quickly capture client requirements and sketch out a site without having to go through the labor intensive work or creating detailed wireframes.
Block diagram wireframes: This type of wirefames is one step higher than the Content-only wireframes in that it offers basic layout information through blocks of functionality, and content grouping. These wireframes can be used in conjunction with detailed wireframes to provide a high level strategic overview to the wireframes before diving into the details.
Detailed wireframes: Fully-loaded wireframes with layout, content, web elements information along with notes and annotations on page behavior.

If you are in a presentation meeting with many stakeholders that are seeing the wireframes for the first time, ask around to get a sense of how many people have never seen a wireframe before
Include a couple of presentation slides (or handout) that outline what wireframes are, and how they should be read; Remind the meeting attendees that wireframes show only content and layout (and is missing graphic treatment) and that "it is not what the site is actually going to look like" (see above section: What are wireframes). It is surprising how many people actually do think that this is what the site is going to look like
Provide simplified block diagrams of home page, and sub-page that illustrate general organizational and navigational strategies before showing the detailed wireframes.