Class 07

The Week’s Topics

Web Design Critique (Use of Whitespace, Navigation)
Navigation
Drop Down Menus
CSS Box Model
Links Best Practices
Link CSS
Images
CSS background image
Quiz 3 Review


Assignment 7: Due Monday, April 16

Reminder: No class on April 9 due to Spring Break!

1. Continue working on your Midterm Project.

If you haven’t done so already, upload the final files (Communication Brief, Site map and Home page design comp) to a Assignment 6 folder in your lastname_firstname folder on the class server and post to your class blog. I’d like to review your home page comp before you move forward with the design of the remaining pages. Please speak to me or email me the design comp of your home page before moving forward.

For next week, complete the following:

  • Design comps for the remaining four pages of your midterm project. Keep in mind the navigation rules and conventions we discussed in class when you are designing the navigation and subnavigation. Please email jpgs of your comps to me so I can comment before you move forward.
2. Design and build both a Basic CSS Navigation Menu and a Drop Down CSS Navigation Menu.

based on what you learned in the class demonstration. Create your own design for both navigation menus and use this opportunity to experiment a bit. Here’s the link to the header and two background images:

Note: to download an image from a link, simply control-click and “save” (Firefox) or “download” (Safari) the image to your desktop. Save it from this link on this page, don’t open it in a new window because it’s too small and white to see it in a new page.

http://www.everythingaboutweb.com/classes/examples/ehd_navigation/navigation/images/header.png
http://www.everythingaboutweb.com/classes/images/nav_on.png
http://www.everythingaboutweb.com/classes/images/subnav_on.png

Be sure to make use of the following resources:
everything about web*
CSS Navigation Menu: Basic
CSS Navigation Menu: Drop Down
Listamatic

3. Study for Quiz 3. We will take Quiz 3 in class on Monday, April 16.
4. Read all the Class 07 notes below.

Reading online
Rules For a Perfect Website Navigation
Breadcrumbs in Web Design
Horizontal Navigation Menus: Trends, Patterns, and Best Practices

Read the following chapter from our textbook before our next class Monday, April 16.
Chapter 17:  Lists


Quiz 2 Answers

2. What is an information architect?
An information architect analyses, organizes and labels information on the web to be intuitive and usable.

3. Name three web file naming rules that follow basic web file naming conventions.
Don’t use any spaces in file names, instead use an underscore or dash. Use all lowercase letters or at least be consistent, most servers are case sensitive. Use proper suffix when naming files, for ex. .html .jpg .gif

4. What is a communication brief?
A communication brief is the interview with a set of questions you will have with your client. This will help you to understand their business model but also be able to plan the whole project better. A communication brief includes questions such as: Where: what domain name will you use? Does is already exist? Where will you register the domain name and where will you find web hosting? When: When is the preferred target date for launching the site? Are there any external factors that might affect the schedule? Why: Are there any business problems you want to solve with the site? What are your primary business goals and objectives? Who- Who is your primary audience. audience description? What: What’s the function of the site? why does customers need you? who’s your direct competitors? what are the customers goal when they visit the site? How: How will you use resources to pay for, market and maintaining the site?

5. Name four of the seven project roles common to the website process as discussed in our textbook.
Project manager: leads the team, helps them to be successful. Manages task list, and timeline. Usability analysis: Creates a usability testing plan, conducts tests and communicates usability issues to the team. Developer: builds the front end, html. css and javascript as well as back end, server side scripting and database for the website. Visual designer: develops design options that meets the project goals based on design principles, design elements and user-centered design.

6. What is a site map?
A sitemap is a high level architectural blue print of the site. It shows the organization, and labeling of the major areas of the site.

7. When designing for the Web, why is it important to know your target audience?
When designing a site you need to keep in mind certain key things like your target audience, age, gender, education, occupation, income, preferred operating system, preferred browser, internet skill level. You need to know from the design point of view, if you have a young and hip crowd you might want to make it look modern and this crowd might be more internet savvy so you could make the navigation a big more complex and “flashy.” Its also very important to know if they use a mac or pc because content like colors will show up very differently on a mac vs pc, pc will usually show darker colors. It’s the same way with browsers, some content might not even show up, like different fonts. Knowing their internet skill level is very important, you need to design the page at a level that your target audience is comfortable with.

8. What does “Balanced design” mean as discussed in our textbook?
Balanced design means that you need to keep in mind both your clients needs but also their customers needs. You need to be able to balance their requirements/expectations evenly otherwise you will end up with a client that doesn’t like the site, and a customer that doesn’t use the site. Make both partners happy and you will have made a very successful site.

9. As discussed in the class notes, what are the two things you need to have in order to post a website live to a server?
Domain name registration: buying the name you will use for the site Web hosting: server space at a web hosting company.

10. What is a competitive analysis? And why is it important to the design process?
A high level analysis of major competitors to know the competition’s strengths and weaknesses before you finalize your website strategy. Types of information you might gather include: High level inventory of features/functionality, Visual design characteristics, Labels and organization schemes, Usability heuristic.


Quiz 3 Review

Class 04
Give two reasons why a lack of HTML semantics is bad.
Name the HTML Best Practices outlined in the class notes.
In HTML 5, what tag replaced <div id=”header’>, <div id=”nav”>, <div id=”footer”>
Write out the anatomy of a CSS rule
Why are external style sheets best?
What is an em? (as it relates to a CSS measurement unit) And why are ems used as a unit of measurement for text in a website?
What are the three major CSS selector types we discussed in class?

Class 05
What are the four types of positioning?

Class 06
What is a favicon?
What is the general guideline for line length?
Name four web-safe fonts.
Name the six text properties outlined in the class notes.
To calculate the overall width of a box, including all padding, borders and margins, what formula would you use?


Link Styling
.
  • link: The default state—it defines what links should look like by default, when you fi rst get to them. By default, unvisited links are coloured blue.
  • visited: The style of a link that has already been visited (clicked on, or followed). By default, already visited links are coloured purple.
  • hover: The style of a link whilst the mouse cursor is hovering over it.
  • focus: The style of a link when it has been given focus by means other than the mouse, for example, if the user has used the keyboard to navigate to it. Note that old versions of Internet Explorer do not support the focus state, and just use active in place of focus.
  • active: The style of the link while it is activated, i.e., as the mouse button is held down while the pointer is over the link (when the mouse button is released the state changes to :focus); it is also the style of the last activated link when you arrive back at the original document by going back in your browser history.
A love/hate relationship

Before we move on, there is one more thing to mention—you need to specify link, visited, hover (and focus), and active in that order. Note the order in which I’ve put the rules in the CSS file.
Why? Because of inheritance, and because of the order in which the browser triggers the different states.

Images

Images are wonderful, but they do raise issues:

  • Users with visual impairments using screen readers to access your content can’t see them!
  • Search engines such as Google and Yahoo! cannot index any textual content in images, as they can’t see text that is inside an image, so it impacts negatively on your site’s fi ndability.
  • Some users who have really slow web connections may have images turned off to reduce the amount of data they need to download.
  • The image might be unavailable for some reason, for example, if the path to the image has been misspelled or if the file has been corrupted. The evils of having too much content in images.
Keep information in images to a minimum!

Keep the amount of information communicated in images to a minimum, because:

  • People surfing on mobile devices might have images turned off because of small screens and the slowness and cost of downloading data.
  • Visitors to your site might be blind or otherwise visually impaired and not able to see your images properly.
  • Search engines only index text—they don’t analyse images (yet), which means that information stored in images cannot be found and indexed.
Web Critiques: Navigation

The Getty Museum
Los Angeles County Museum of Art (LACMA)
The Museum of Modern Art (MOMA)
Guggenheim Museum

Navigation Basics

Please read: http://www.everythingaboutweb.com/beginner/navigation-basics/



Comments

  1. Mahnaz April 1st

    Comment Arrow

    Hi Maam,

    Having a hard time choosing a website to redesign.

    I’ve selected three educational sites. I’m not sure which one to select.

    Kindly guide me to select one from the below:

    https://www.wildwood.org/userlogin.cfm

    http://www.montessoripreschool.us/

    http://www.undertheseaindoorplayground.com/promotions.html

    Mahnaz


  2. Lor Fogel April 10th

    Comment Arrow

    just a heads up that both assn’s 4 & 5 are turned in — and yeah, labeled as such.
    also, the bland meditation site I showed you in class? He pulled it down and replaced it with a WordPress site. I’ve got one in mind: http://www.sierrahotsprings.org/
    it’s kinda awful… text oriented, 1890’s pioneer aesthetic (think Bonanza) and the photos are large thumbnails. little mention about the hot tubs and pools, other than their cleaning schedule.


  3. Jamie Cavanaugh April 10th

    Comment Arrow

    Hi Lor,

    I think this is a good choice.


  4. Lor Fogel April 10th

    Comment Arrow

    I’ve already started on it… so glad you agree. grin.


  5. jeanette simatauw April 12th

    Comment Arrow

    Hi Professor,
    Would you look at my WP please. I just posted my comps. What do you think?

    Thank youuuu …


  6. Jamie Cavanaugh April 12th

    Comment Arrow

    Hi Jeanette,

    Do you mind emailing me the jpgs at the actual size? The images on your WP blog are too small for me to look at the design closely.

    Thanks!


  7. Emily Maldonado April 15th

    Comment Arrow

    It’s hard to find a website to redesign… which one can I redesign?

    http://www.salonsoleilla.com

    http://salon7th.com/index.htm

    http://www.sitstillvenice.com/


Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Graphic Design 66