Week 05

Week 05 – Topics

Reminder: Your midterm project is due by noon on Friday, May 20 (instead of May 17) . Please be sure you post your midterm project on the server
http://www.everythingaboutweb.com/grdes66

Midterm Project Critiques
Information architecture
Create a site map
CSS-based layouts: 3-column
More CSS Box Model
CSS selector types
Positioning:Floats
Quiz 3

Assignment 5

Here are your assignments. Please check dates. Some projects are due Tuesday, May 24th and others are due Tuesday, May 31.

READ

Please read the following before Tuesday, May 24.
1. Information Architecture Tutorial
2. 10 Questions About Information Architecture?
3. Grey Box Methodology
4. All About Floats
5. Float Basics
6. Tutorial: Floating an image thumbnail gallery

WATCH

Please watch the following before Tuesday, May 24. Approximately 75 minutes total so plan your time accordingly.
1. Three Column Fixed Width: CSS Based Layouts Part 1
2. Three Column Fixed Width: CSS Based Layouts Part 2
3. Three Column Fixed Width: CSS Based Layouts Part 3
4. Three Column Fixed Width: CSS Based Layouts Part 4
5. CSS Box Model Properties Part 1
6. CSS Box Model Properties Part 2
6. CSS Box Model Properties Part 3
8. CSS Box Model Properties Part 4
9. Using Descendant Selectors
10. Inheritance and Precedence

WRITE

Please create a blog post on your own site where your fellow students can post their critiques of your midterm project. Complete a web critique for your fellow students. Each student will complete a midterm critique for each of their fellow student. See the class notes below for more information. Please post your critique on your fellow students’ WordPress blog by noon on  Tuesday, May 24.

Here is the URL to the midterm projects:

http://www.everythingaboutweb.com/grdes66

EXERCISES

1. Using Photoshop or Illustrator, create a sitemap for your midterm project. Please be sure to indicate not only the main sections (Landing pages/Level 1) but also the sub-navigation (Level 2) and sub-sub navigation if necessary (Level 3). Refer the class notes below for more information on how to create a site map. Please post an image of your site map to your WP blog by noon Tuesday, May 31.

2. Create a CSS Based 3-column layout. Now that you’ve watched my video demonstration on how to create a 2-column structure, build a three column structure that follows the layout of the photoshop document (photo below). Here is the Cupcake Mama website Photoshop file you’ll use as a guide for the layout. (The four videos on the Three Column Fixed Width CSS Based Layouts and the information about Positioning: Floats will be helpful to you for this exercise). Upload your web files as a zip file to the “Drop box” on smconline.org site by noon on Tuesday, May 31.

Cupcake Mama home page

QUIZ 3

Click here to take Quiz 3
Complete Quiz 3 by noon on Tuesday, May 24.

Website critiques

Part of  your assignment for this week will be to critique your fellow students’ midterm projects. One of the best ways to learn more about web design is to look at as much web work as you possibly can. By analyzing other’s work you begin to understand more fully what makes a web site effective and well-designed. Different types of web sites have different goals. What make a good web site?

Seven Criteria for discussion

These are the seven general criteria we will talk about in this class. It’s not enough to determine a web site “good” or “bad.” What is it about the site that makes it more effective or less effective? Below are seven different criteria to look at when you are evaluating the design of a web site.

  • Look & feel / Attitude of site
    Does the design or “look and feel” of the site represent the attitude of the company/client?
  • Use of color
    Does the use of color effectively communicate the attitude and “look and feel?” Using red and black for the color palette for a web site communicates something different than using a light blue and white color palette.
  • Composition / layout
    Does the layout of the site effectively accommodate the content? Is there room for text and images? Is the navigation in an easily accessible location?
  • Typography
    Is the type on the site readable? Is there a good mix of font size and font weight to communicate hierarchy for the content?
  • Content
    Is the content well-written? Is there HTML content on the site. (You want to avoid creating web pages where text is inserted as image files.)
  • User experience
    Is the site easy to navigate? Is it east to find content on the site?
  • Navigation
    Is the navigation well-organized. Is the navigation consistent from page to page?

Midterm Project Web sites to critique

Using the Seven Criteria for discussion, offer your fellow students constructive advice on how they may make their midterm web project more effective. How might they work on the following criteria as it relates to their project? Look & feel, Use of color, Composition / Layout, Typography, Content, User Experience, and Navigation.

Here is the URL to the midterm projects:

http://www.everythingaboutweb.com/grdes66

Information architecture
Who is an Information Architect?

Below are some quotes from people who work as Information Architects
Jessie James Garrett says:

Information architecture encompasses a wide range of problems. But regardless of the specific context or objectives of a given information architecture project, our concern is always with creating structures to facilitate effective communication. This notion is the core of our discipline.

The Information Architecture Institute defines Information Architecture as:

The art and science of organizing and labeling web sites, intranets, online communities and software to support usability and findability.

Lastly, to quote Andrew Hinton:

Flickr allows me to upload my pictures and organize them, tag them, however I see fit. There is no central authority telling me what to tag my pictures. This is partly because itʼs not going to hurt anybody if I do it ʻwrongʼ … Flickr isnʼt a mission-critical system. Itʼs a playful social platform…if you want a serious photo library, then use a system like the national archive or Corbis has, but not Flickr. Thereʼs a difference between managing information, and designing the infrastructure to let others manage it themselves. But both approaches are architectural.

The information architect must focus on a number of things: the target audience, the technologies related to the website, the data that will be presented through the website, and (hopefully) the results of early usability tests regarding the site ideas.

What does an Information Architect do?

An information architect will generally do the following activities as part of a project team:

  • Research the audience and the Business

IAs take on a myriad of responsibilities for the project. To learn about the project’s audiences, IAs should have access to the results of, or conduct: usability tests, card sorting exercises, stakeholder interviews, user polling, etc. The goal is to provide as much information about what factors are influencing the project as possible. Information architects need to know what people will do with your application, how people will use information provided by the application, and what mental models user’s create while using your application

  • Analyze Data

The IA takes knowledge gained from the discovery period to define what the site’s primary objectives are and how it will realize those goals. At this point, it’s helpful for the IA to work hand-in-hand with the designers, developers, and other members of the team with an interest in the project deliverable. By analyzing data, the IA may generate a set of user personas.
A user persona is a representation of the goals and behavior of a real group of users. In most cases, personas are synthesized from data collected from interviews with users. They are captured in 1–2 page descriptions that include behavior patterns, goals, skills, attitudes, and environment, with a few fictional personal details to make the persona a realistic character. For each product, more than one persona is usually created, but one persona should always be the primary focus for the design. www.wikipedia.org

  • Develop labeling/navigation/site structures

Finally, an Information Architect will, in essence, architect the site. IAs will produce things such as site maps, site-flow diagrams, and wireframes to convey how the site will work from a practical perspective. Indeed, the best Information Architects will take all perspectives into account while creating these deliverables: business, technological, and social (user). From this point on, the IA will help make decisions about the overall direction the site gravitates towards. For example, the IA should be involved in periodically testing the site, reading the copy, and evaluating any user-testing that is occurring during development cycles.

Information above from Complete Beginner's Guide to Information Architecture

Sitemap (aka Site Map, Site Hierarchy Map, Site Diagram, Blueprint, Web Map)

Site maps are one of the most critical and widely used web information architecture tools (along with wireframes). They show the overall structure and hierarchy of a Web site. They can be used as the first step in laying out the web information architecture of a site, and will provide the framework upon which to base site navigation. When I set out to understand the IA of a current site, or design an IA for a new site, I start by sketching out a ruff site map. Site maps can be constructed in a wide variety of formats, but the general structure and principles remain relatively consistent.

Link to an example of a site map

How to Draw a Site Map

When using a site map to plan your site you can be as simple or as complex as you need to be. In fact, some of the most useful site maps are those that are done quickly and without a lot of conscious thought.

1. Grab a piece of paper and a pen or pencil.
2. Draw a box near the top and label it “home page”.
3. Under the home page box create a box for every major section of your site, such as: about us, products, FAQ, search, and contact, or whatever you want.
4. Draw lines between them and the home page to indicate that they should be linked from the home page.
5. Then under each section, add boxes for additional pages you would like in that section and draw lines from those boxes to the section box.
6. Continue creating boxes to represent Web pages and drawing lines to connect them to the other pages until you have every page you want on your website listed.

Tools You Can Use to Draw a Site Map

As I said above, you can use just pencil and paper to create a site map. But if you want your map to be digital you can use software to build it. Things like:

* Photoshop, Paint or another graphics program
* Mindmapping software like Freemind
* Flowchart software like Flowchart.com
* Site map software like WriteMaps.com
* Lovely Charts http://lovelycharts.com/

Above Information from http://webdesign.about.com/od/strategy/qt/plan_site_map.htm

Assignment Reading: Information Architecture
Information Architecture Tutorial
10 Questions About Information Architecture?
Grey Box Methodology

CSS Based Layouts

Note: Make your width 1000 px, not 800px as he indicates in the videos below.

Part 1

IFRAME Embed for Youtube

http://www.youtube.com/watch?v=tw41Jl-x98g&p=6F90F447A2A0DC00

Part 2

IFRAME Embed for Youtube

http://www.youtube.com/watch?v=jOOggBkyuBI&p=6F90F447A2A0DC00

Part 3

IFRAME Embed for Youtube

http://www.youtube.com/watch?v=K9q8tKiVpBA&p=6F90F447A2A0DC00

Part 4

IFRAME Embed for Youtube

http://www.youtube.com/watch?v=trvLPvX9zIU&p=6F90F447A2A0DC00

More CSS Box Model

CSS Box Model Properties Part 1

IFRAME Embed for Youtube

http://www.youtube.com/watch?v=fpAxwOgTseg&playnext=1&list=PL23720641C70E95E6

CSS Box Model Properties Part 2

IFRAME Embed for Youtube

http://www.youtube.com/watch?v=ciQSXnSRYZw&feature=related

CSS Box Model Properties Part 3

IFRAME Embed for Youtube

http://www.youtube.com/watch?v=ZLufT7co3ec&feature=related

CSS Box Model Properties Part 4

IFRAME Embed for Youtube

http://www.youtube.com/watch?v=XG3-zY68K3c&feature=related

More CSS

Using Descendant Selectors

IFRAME Embed for Youtube

http://www.youtube.com/watch?v=bpZiyAED-R8&p=23720641C70E95E6

Inheritance and Precedence

IFRAME Embed for Youtube

http://www.youtube.com/watch?v=NFQDZStwUWk&p=23720641C70E95E6

Positioning: Floats
Reading Assignment: Floats

All About Floats
Float Basics
Tutorial: Floating an image thumbnail gallery



Comments

No comments yet.

Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Graphic Design 66