Week 02

Week 02 – Topics

The Nature of the Medium
The Basics of Web Design
The Grid: Composition and Layout
Color Theory
Navigation design
Design principles
Creating a design comp
Quiz 1


Below are your assignments due next week by noon, Wednesday, November 7.

Our first classroom meeting is Thursday, November 8 (yea!) so have your assignments finished before our class.

Gr Des 65 Classroom meeting
Thursday, November 8, 2012
2:00pm – 5:05pm
AET 105  <– Please note there is a room change, we’re meeting in room 105, not 106.


1. All class notes from Week 2
2. Assigned Reading from Textbook – Chapter 4: Creating a Simple Page
3. Online Readings

Discussion is due by noon, Monday, November 5. Please post by this date.

Discussion – Assignment 2: Knowing your Target Audience
Answer and discuss the questions posted in the Discussion section of  smconline.org class website. Please respond and discuss your answers with your fellow students. I”m happy to lead the discussion but I want everyone to actively participate. The more discussion we have in this class, the better.

Discussion – Assignment 2: Site map Critiques
Reviewing the site maps provided, answer and discuss the questions posted in the Discussion section of  smconline.org class website. Based on our discussion, make revisions to the site map you completed for Assignment 1. See “Exercises” below for more information.


VIDEO: The Nature of the Medium
Jason Santa Maria explains why things on the Web look the way that they do.

SVA Dot Dot Dot Lectures: Jason Santa Maria from MFA Interaction Design on Vimeo.


Answer the following questions from The Principles of Beautiful Web Design reading.  Post the answers to your class Tumblr blog:

  • What is “Grid Theory” and why is it important to web design?
  • In addition to “balance,” what are the other design principles important also to Web design?
  • What are the “Bread and Butter Layouts” in web design?
EXERCISES (3 parts)

Part 1 – Create a design comp. After reading the class notes and “The Basics of Web Design” reading from the everything about web website, design the home page for the Monday May Design creative studio. Here’s the details:

  • Monday May Design is a fictitious name so this company doesn’t really exist but I’d like you to pretend they’re your client. Pretend they’re a creative studio based in Los Angeles and they want you to design their website. A couple questions to answer for yourself before designing:  Who is the target audience for this site? How does Monday May Design want to visually represent themselves? What does their “brand” represent? Are they quirky, artsy, techy, intellectual, conservative, serious etc. How would they describe themselves? Look at other creative studio websites for inspiration.
  • Take time to do research and to look for inspiration. Start here: Best Web Gallery
  • Create your design comp in Photoshop following the instructions in the class notes. (Scroll all the way to the bottom of the notes)
  • Please optimizie your design for a 1024 x 768 monitor resolution. This means the width of your page needs to be 990 pixels wide. “The fold” is 560 pixels high but your page height should be longer than 560 pixels.
  • When designing, focus on all the basics from the reading “The Basics of Web Design”— the Grid, Color palette, Navigation, Design principles, and Typography. Your grade will be determined by your effective use of the basics covered in this reading.
  • Use the Monday May Design site map to understand the organization of the navigation for the website. Your grade will be adversely effected if you don’t base the design your navigation on the organization depicted in the  site map.
  • Please post any questions you have about this exercise to the Discussion section of the smconline.org site.


  • Upload your file to the “Dropbox” on smconline.org site by noon on Wednesday, November 7.
  • When you upload your ONE zip file to the Dropbox, please be sure to include your name in your file names. For example: yourlastname_assignment1.zip
  • Also, bring your Photoshop with you to our classroom meeting on Thursday, November 8 at 2:00pm in AET105.

. . . . . . . . . . . . . . . .

Part 2 – Complete Exercises from Chapter 4
Exercises 4-1, 4-2, 4-3, 4-4, 4-5
Use TextEdit or Notepad to create the HTML and CSS files for these exercises. If you need to, review our videos from Week 01, The Basics of HTML and The Basics of CSS.

  • Upload your file to the “Dropbox” on smconline.org site by noon on Wednesday, November 7.
  • When you upload your ONE zip file to the Dropbox, please be sure to include your name in your file names. For example: yourlastname_assignment1.zip
  • Also, bring your Photoshop with you to our classroom meeting on Thursday, November 8 at 2:00pm in AET105.

. . . . . . . . . . . . . . . .

Part 3 – Complete a revision of your site map from Assignment 1.

Based on our discussion in the Discussion section of the smconline.org website, make revisions to the site map you completed for Assignment 1.

  • Upload your file to the “Dropbox” on smconline.org site by noon on Wednesday, November 7.
  • When you upload your ONE zip file to the Dropbox, please be sure to include your name in your file names. For example: yourlastname_assignment1.zip
  • Also, bring your Photoshop with you to our classroom meeting on Thursday, November 8 at 2:00pm in AET105.

Click here to take Quiz 1
Complete Quiz 1 by noon on Wednesday, November 7.

  • Please complete the Quiz before this date. The quiz will end on this date and you won’t be able to take it.
  • Please note that the answers to the Quiz must be in your own words! I will not accept answers where you “cut & paste” the content from the class notes, or from anywhere else.

10 Principles Of Navigation Design

1. Design for the reader
2. Provide a variety of navigation options
3. Let readers know where they are
4. Let readers know where they’ve been
5. Let readers know where they are going
6. Provide context
7. Be Consistent
8. Follow Web Convention
9. Don’t surprise or mislead the reader
10. Provide the reader with support and feedback

Ensuring a Smooth Flow
  • Where am I? – an aid to one’s present location on the site
  • Where do I go next? – a roadmap or directory of the entire site
  • How do I get there? – an intuitive or descriptive system of navigation
  • Am I still on this site? – a consistent look-and-feel across different sections of the site
Navigation Design

Navigation is a subset of the site’s interface, but because it’s an important topic, I’ll give it a little extra attention. The information in a web site is often perceived as occupying a physical space. Like a real physical space, such as a city or airport, a web site requires a system of signage to help visitors find their way around. On web sites, this takes the form of logos, labels, buttons, links, and other shortcuts. These ele- ments make up the navigational system for the site.

Where am I?

One of the main duties of a navigation system is to let users know where they are. Remember that users can enter your site at any point if they have the right URL or if they are clicking on a link from a list of search engine results. There’s no guarantee that they will have the benefit of the home page to tell them where they’ve landed, so it is important that every page on your site contains some label that identifies the site.

Where can I go?

The other responsibility of a navigation system is to clearly present the options for where users can go (or what they can do) next. I usually ask myself two questions when deciding exactly which navigational buttons to add. The first question is user-based: where might this person want to go next? For the second question, I play the role of the client or web site pub- lisher: where do we want that person to go next?

It is impractical to provide a link to every page on a site from every other page, so you need to choose your links wisely. By limiting choices, you can help shape the users’ experience of your site while providing the flexibility they need to get around. The navigational options for every site will be different, but there are a few standards.

  • First, a link back to the home page from every page in the site is usually expected. If the reader ever gets lost in the maze, this provides a way to get back to the beginning with one click.
  • There might also be a set of links that should be accessible site-wide, regardless of the current section. These include links to a help section, personalized information, search capabilities, and other general information that should always be available to users. These can be incorpo- rated into the global navigation system, but usually with less visual weight. Note that Nordstrom uses a shopping bag, rather than a cart.
  • If your site is divided into sec-tions, you might choose to provide links to the main pages of the other sections as part of the navigation system on ever y page.
  • You may also have options that are specific to a particular section of the site. This is called secondary navigation or section navigation.
Fundamentals of good navigation

Navigation systems are highly site-specific.The list of choices that are perfect for one site could totally bomb on another. However, there are a few guiding principles that apply regardless of the type of site you’re building. The key characteristics of a successful navigation system are clarity, consistency, and efficiency. Let’s look at what each of these means in practical terms.


In order for navigation to work, it must be easily learned. One of the main gripes about surfing the Web is that you have to learn how to use every new site you visit. It is in your interest to make the learning process as quick and painless as possible by making your navigational tools intuitive and easily understood at a glance.

Try following these guidelines for keeping your navigation system clear and user-friendly:

  • Navigation should look like navigation. Your navigational tools (such as links to the home page and other parts of the site) should somehow stand out on the page. This can be accomplished by grouping them together and applying some sort of visual treatment that sets them apart from ordinary content. Buttons don’t necessarily need to be in 3-D to look “clickable,” but they should still read as navigation at a glance.
  • Label everything clearly. I can’t emphasize this point strongly enough. Despite the fact that the Web is a visual medium and we’ve been discuss- ing visual cues for interface design, people still find their way around with words. Nothing stands in the way of finding information more than labels that are vague or too cute to be understood. Don’t call a section “A Light in the Darkness” when it’s really just “Help.”
  • User testing shows that longer, more descriptive link text is more effec- tive in getting people where they want to go. Make sure your section names and all links are labeled in a way that everyone will understand.
  • Use icons with caution. Although there are a few icons that have taken on standardized meanings (such as a small house picture as a link to the “home” page), for the most part, icons are difficult to decipher and can stand in the way of usability. Some icons, such as a globe, are so overused that they mean absolutely nothing. If you choose to use icons, it is best to reinforce them with clear labels in every instance. If you have just one or two carefully chosen icons, you may get away with defining them once on the home page and using the icons alone throughout the site. Either way, you should carefully consider whether icons are really aiding your navigation.

Providing navigational options is not enough if they aren’t predictable or dependable. It’s important that navigational options be consistent throughout the site, in availability as well as in appearance.

Pages that are alike should have the same navigational options. If I could get back to the home page directly from one second-level page, I’d expect to be able to get back from all the others as well. Third-level pages might have a different set of options, but those options need to be consistent among all third-level pages, and so on.

Furthermore, it helps usability to present the options in the same fashion every time they are presented. If your home page button appears in blue at the top right-hand corner of one page, don’t put it at the bottom in red on another page. If you offer a list of options, such as in a toolbar, keep the selections in the same order on each page so users don’t have to spend time hunting around for the option they just used. Navigation options should stay put.


With every click into a site’s hierarchy, you run the risk that the user will lose interest and leave. When you are designing the structure and navigation of a site, be mindful of how many clicks it takes to get to a piece of content or complete a task (such as filling out a form or purchasing something). The goal is to get users to the information they want efficiently and keep them engaged in the process.

The navigation system for a site should alleviate extra clicking, not add to it. Your navigation should include shortcuts to information—it can be as sim- ple as providing links to other major sections of the site. You might want to supplement the global site-navigation system with specialized shortcuts such as a site map or search function.

Pull-down menus

A great space-saving method for adding a large number of links on a page is to put them in a pull-down menu. That way, all the links are readily available but don’t require much precious screen real estate.


Navigational tabs across the top of the page have become a standard web element since their introduction in the late 90s. While they serve as a compact and fairly intuitive device for allowing access to different sections of a site, I find that they are sometimes applied inappropriately or gratuitously.

Ideally, tabs should be used to indicate similar functionality across a number of categories (Figure 20). Amazon.com (one of the early tab adopters) uses them correctly in this case—whether you’ve selected books or movies, you have the same basic options for viewing specials, reading reviews, and shopping.

All too often, tabs are used arbitrarily for access to divisions of the site. While there’s nothing inherently wrong with this, the tabs aren’t communicating functionality; they’re just a decorative design for what otherwise would be a simple navigational toolbar.

One drawback to tabs, which Amazon.com faced early on, is that graphical tabs stack up pretty quickly, and you may end up with an unwieldy mountain of tabs. Their solution was to offer only a select number of tabs with access to their full list of offerings on a separate page. Because of the limited pixel real estate across the top of a web page, tabbed interfaces are not easily scaleable.

As the Web continues to evolve, navigational approaches come and go like any fad. Buy.com, another formerly tab-reliant site, ditched its tabs altogether and now just presents options in a navigational panel. If you choose to use tabs, consider whether your interface is really benefitting from the additional graphics overhead. It may be that a simple toolbar would suffice.

“Breadcrumb” navigation

One of my favorite navigational elements is what’s become known as “bread- crumb” navigation. As you click through the site’s hierarchy, each successive level is indicated as a text link. Eventually, you end up with a string of section and subsection names that shows exactly where you are and where you’ve been (like Hansel and Gretel’s breadcrumb trail through the forest). The trail also allows users to return to the higher levels they’ve passed through with just one click.

Perhaps the best feature is that, because they are only HTML text links, this form of navigation barely adds to the file size. That’s a lot of communication and functionality packed into a few bytes.

Above material written by Jennifer Niederst Robbins from Learning Web Design

The Basics of Web Design

Please read the following: http://www.everythingaboutweb.com/beginner/the-basics-of-web-design/

Preparing Design Comps

Dreamweaver is not a design tool so therefore, the design of your site must be created in Photoshop. Download a sample design comp and note the following:

  • Be sure to set the width and height of the document in pixels, the color mode to RGB, and the resolution should be 72 dpi for most web files.
  • Be sure to create a Photoshop file with elements on separate layers. This is important because you may want to edit certain elements separate from the rest of the document, or turn specific layers on or off.
  • Insert any photographs or graphics into the Photoshop file at 72 dpi. This will prevent the weight of the Photoshop file from getting too large. (And prevent it from taking a million years to open the file!)
  • Notice the navigation “buttons” have both an “off” and “on” state on seperate layers. Again this is important when you are slicing– you want to be able to turn specific layers on or off.
  • Any HTML text should be added to the Photoshop file on a separate layer. Remember you’ll show this Photoshop file to the client to get final design approval so you want the file to represent the look of the final HTML page as closely as possible.


No comments yet.

Add Yours

  • Author Avatar


Comment Arrow

About Author


Instructor for Graphic Design 65