Week 04

REMINDER: Mandatory event

Meet the Director | Interface/Interaction Design
WK4
Wednesday, Sept. 30th
1pm  (We will attend as a group and have class before and continue class afterwards)
Boardroom (near the Enrollment Office)

Topics: Divs & CSS, Navigation and Interface design, Web Critiques
Assignment: Complete  XHTML & CSS exercise: Div tag. Create a basic structure using divs and a 2-column structure web page using TextEdit or the Code view in Dreamweaver. See my notes below. Change the CSS so you do not use the exact CSS I show in the example at the end of the class notes below. Bring your html and css files to class next week.
Project:
Continue to work on the design of the moma.org website we started last week and make any revisions based on our critiques last week. We will continue to work with this project next week. Bring in a large print-out of your work so we can discuss in class.

Reading for next week
Designing for Interaction: Chapter 6: “Interface Design Basics” (pg 128-136)
Typography article: Typography on the web

Answer the 2 questions in the Comment section of the Week 04 notes of this site. Please reply to the questions below by our next class, Wednesday, October 7.

Basic XHTML example with CSS
<html>
<head>
   <title>Basic HTML Example</title>
   <link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
   incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
   exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
   dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
   Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
   mollit anim id est laborum</p>
</body>
</html>
CSS example

The code below is a good example of basic CSS properties.

body {
background-color: #000000;
}

p {
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color:#ffffff;
line-height:30px;
padding-left: 200px;
}
HTML Cheat Sheet

http://lesliefranke.com/files/reference/htmlcheatsheet.html

CSS Cheat Sheets

http://lesliefranke.com/files/reference/csscheatsheet.html

XHTML & CSS exercise: Div tag

Note: Below is one HTML file and code for two different CSS files. Please experiment with both CSS files and note how the second CSS file creates a 2-column structure for your web page.

Basic Div structure:

<div id=”wrapper”>

<div id=”header”></div>

<div id=”navigation”></div>

<div id=”content”></div>

<div id=”footer”></div>

</div>

The code below is a good template to use as the beginning structure for a web page.

(Information about HTML Document Type is here: http://www.w3.org/TR/REC-html40/struct/global.html#h-7.2)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>2-column web page</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

<body>

<div id="wrapper">

 <div id="header">
      <h1>This is the header</h1>

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
       tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
       quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>
 </div>

 <div id="navigation">
      <h1>This is the navigation </h1>
 </div>

 <div id="content">
      <h1>This is the content</h1>

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
       tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
       quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
       tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
       quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>
</div>

<div id="footer">
     <h1>This is the footer</h1>
</div>

</div>

</body>

</html>
1) CSS example for basic div structure

body { font-size: 62.5%; /* 1em = 16px therefore 16px × 62.5% = 10px */ }
h1 { font-size: 2em; /* 10px × 2em = 20px */ }
p { font-size: 1.2em; /* 10px × 1.2em = 12px */ }

The code below is a good example of basic CSS properties for the <div> tags of a basic web page.

body { font-size: 62.5%;
}

#wrapper {
width:990px;
margin-left:auto;
margin-right:auto;
}

#header {
 height: 150px;
 background-color: #666;
}

#navigation {
 height: 150px;
 background-color: #999;}

#content  {
 height: 260px;
 background-color: #CCC;
}

#footer {
 height: 50px;
 background-color: #666;
}

h1 {
 font-family:Verdana, Geneva, sans-serif;
 font-size:1.6em;
 font-weight:bold;
 letter-spacing:1px;
 padding-left: 20px;
}

p {
 font-family:Arial, Helvetica, sans-serif;
 font-size:1.2em;
 line-height:1.7em;
 padding-left: 20px;
}
2) CSS example for 2-column structure

body { font-size: 62.5%; /* 1em = 16px therefore 16px × 62.5% = 10px */ }
h1 { font-size: 2em; /* 10px × 2em = 20px */ }
p { font-size: 1.2em; /* 10px × 1.2em = 12px */ }

The code below is a good example of basic CSS properties for the <div> tags of a 2-column web page.

body { font-size: 62.5%;
}

#wrapper {
width:990px;
margin-left:auto;
margin-right:auto;
}

#header {
 height: 150px;
 background-color: #666;
}

#navigation {
 width:22%;
 float:left;
 background-color: #999;
}

#content  {
 width:78%;
 float:left;
 top:0px;
 background-color: #CCC;
}

#footer {
 clear:both;
 background-color: #666;
}

h1 {
 font-family:Verdana, Geneva, sans-serif;
 font-size:1.6em;
 font-weight:bold;
 letter-spacing:1px;
 padding-left: 20px;
}

p {
 font-family:Arial, Helvetica, sans-serif;
 font-size:1.2em;
 line-height:1.7em;
 padding-left: 20px;
}
Creating a webpage using TextEdit
  • Using Apple’s simple text editor called TextEdit (found in the Applications folder on your computer), type in the HTML for the “Good HTML” style above. Do not copy and paste the html–you will only learn if you actually type in the code!
  • Very important– when usingTextEdit, be sure to make the following change: under “Format” > “Make Plain Text.”
  • Also, be sure to make the following changes in the Preferences in TextEdit. Open Preferences and
    Under “New Document” > “Format” > select “Plain Text.”
    Under “Open and Save” > Under “When opening a file” > select “Ignore rich text commands in HTML files.”
  • Save the file with the extension .html in order to view it in a Browser application such as Firefox or Safari.

Navigation

Navigation design is very important because all web sites need navigation, and if you can design successful navigation, your site will make for a good user-experience. Navigation design is one of the main distinctions between print and web design. Good web designers must know how to design successful navigational interfaces for the web.

So how do you start when thinking about designing a navigational system?

There are three basic questions a well-designed navigational system must answer.
Navigation should answer these questions:

1) Where am I? (Present)
2) Where else can I go? (Future)
3) Where have I been? (Past)

A good way to remember these 3 important questions is to think about the importance of answering where the user is in the  Present, Future, and Past.

Also of importance are the additional questions below:

What’s here?
How do I go forward?
How do I get back?

In addition to answering the basic questions outlined above, a well-designed navigational system must also serve the goals of the site. Examples of specific navigation challenges based on the goals of the site could be things like:

How do I place an order?
How do I search the site?
How do I contact customer service?
How do donate money to this organization?

The more versatile the navigation, the more successful it will be because it will serve a variety of users.

As a designer you must ask yourself:  What does the user who visits the site want?

Examples of what a user may want:
To find information
To publish something
To purchase something
To interact with someone
To read what someone else thinks about something

As a designer you must ask yourself:  What does stakeholder (client)  of the site want? (And of course, you should ask a lot of questions so you understand what your client wants for the site.

Examples of what a client (stakeholder) may want:
To share information
To make money
To get feedback
To teach something

It’s important to explore these questions before starting to design the navigation for your site.

Another way to think about navigation is the discussion from our readings for this week

Wayfinding has four core components:

  1. Orientation: Where am I am right now?
  2. Route decisions: Can I find the way to where I want to go?
  3. Mental mapping: Are my experiences consistent and understandable enough to know where I’ve been and to predict where I should go next?
  4. Closure: Can I recognize that I have arrived in the right place?

Consistency is the golden rule of interface design and wayfinding, but there is a paradox at the heart of consistency: if everything looks the same, there are no edges. How can you tell where you are or when you have moved from one space to another? A well-designed site navigation system is built on a consistent page grid, terminology, and navigation links, but it also incorporates the visual flexibility to create identifiable regions and edges within the larger space.

Navigation design “rules”

The following are general rules to follow when designing navigation in a web site. They are only rules, and as the saying goes, rules are made to be broken– just have a good reason to break them!

Consistency

People are very habitual, and it’s therefore very important to keep navigational elements the same throughout a web site. This is generally referred to as “persistent navigation,” keeping your navigation consistent from page to page. Navigation located at the footer of a web page is common and can act as persistent navigation for a site.

You want people to concentrate on your content, and they won’t if they have to figure out a different navigation system on every page. This is true for:

  • Placement on the page. Keep similar functions in the same place on the page. E.g. if you have a “home page” link on all your pages, put that link in the same place on every page.
  • Visual design. Use consistent names, icons, or other visual cues for navigation throughout the site. E.g. the icon for the “home page” link should be the same everywhere.

Note: Some people incorrectly create navigation systems that drop the current page link from the navigation bar. This may seem “efficient” since there is no reason to have a link to the page you are already on. But this approach violates the principle of consistency, since the links in the navigation bar would be in a different place on every page. It also violates the rule below for indicating the current page, because a better approach is to highlight the current page in the navigation bar (while making the link inactive).

7 +/- 2 rule
  • In general, people have a hard time keeping track of more than 7 items (plus or minus 2) at a time. This means that 7 is a good number of  navigational links but you can have anywhere between 5-9 navigational links on a page, people may get confused or have a hard time understanding the navigation. On the other hand, you often want to provide more than 7 links, which leads to:
Group Navigation

If you have a lot of links on a page, try organizing them into related sets of 7+-2. For example, a food site could group links to fruits, vegetables, herbs, fish, poultry, and red meats together, while grouping links to nutrition info, health tips, recipes, meal planning, and cutlery in a different location on the page. Some ways to group navigational elements are:

  • Proximity. Place similar navigational elements together on the page, separated from other groups.
  • Style. Give each group of navigational elements its own visual design.
Keep it simple

Don’t make people work hard to get where they want to go. The harder it is, the less people will use the navigation. Some things to avoid:

  • Excessive scrolling. Don’t make users scroll all over the page to get to links. Keep in mind the typical size of your audience’s screen. If the user needs to scroll, make them scroll only in one direction–vertical or horizontal.
  • Excessive hierarchy. Keep the number of levels of hierarchy to a minimum. Try to make any page on the site available within 2 clicks at a maximum.
Where are we?

Always identify the name or function of the current page. This can be done by highlighting the navigation to indicate the current page. The name of the page should also be incorporated into the design layout. In a typical page, the user should be able to see where they are by the navigation bar and by a page heading.

If the site is complex, it’s important to indicate where the current page is in relation to the rest of the site. If possible, combine your navigation with a visual layout so as to indicate the current location. This is called the trail of bread crumbs or breadcrumbing. E.g. you could have a navigation bar that shows the path to the page such as: “home>products>vacuum cleaners”, where both “home” and “products” are active links to their respective pages in the hierarchy. Not only does this indicate to the user where they are, but it allows them to skip to any level of the hierarchy, eliminating the need to see the intermediate pages.

Next versus numbered pages. When the user can navigate to additional pages you generally  want to use numbered pages versus a “next” button. Or both as is often the case on such sites as the New York Times.

Avoid “Hub and spokes.” When you can’t see the all the navigation or categories again without going back to the main page, this is often referred to as “Hub and spokes” The user must return to the “hub” to find other choices. As a designer you want to avoid this and develop a more consistent navigation scheme.

Multiple Navigation

There is no single way that users will navigate through the site. People have different goals, search methodologies, attentiveness, previous knowledge, and ways of looking at the content of the site. Even gender can affect navigation.

  • Provide ways for people to traverse across the hierarchy to short-circuit the formal organization. For example, if there is a contact page on a site, it’s useful to have a link to it on every page. This way, the user can navigate across directly to the contact page, OR navigate up to home and then down to the contact page.
  • Sequential vs. directed. Think of users as if they are finding their way within the content. This way-finding sometimes involves users who want to be lead through the information, and this involves a sequential organization (e.g. start here, go here next). Other times, the user will be looking for specific content, and they need a logical and categorical system that enables them to find what they need. Try to provide navigation that satifies both, or provide multiple navigation systems
  • Search vs. grazing. Sometimes people will be searching for specific information, other times they will graze and meander on the site until the find something interesting. Your navigation should accommodate both techniques, and again, sometimes more than one navigation system is needed.
  • Draw people to the content with different techniques: pull quotes, side bars, contextual links, short summaries or outlines. Use links to turn these into alternate navigation systems.

Hide versus show sub-nav

  • Use sub-headings as part of the primary navigation
  • Rollovers or dropdown menus to reveal sub-navigation

Depending on the amount of content and number of subpages underneath the main sections of the web site, the navigation design should reveal the subnavigation in some way.

Different types of navigational graphics and indicators
Here are some of the graphics and indicators a designer can use to create navigation. Some of the options are:

HTML
CSS Rollover
Dropdown Menu
Breadcrumbing
Image maps

Other Issues that impact the way you design navigation
  • Site goals: The goals of the site will greatly affect design of the site and the navigational system. An e-commerce site will have a different type of navigation than a site for a non-profit institution.
  • Information Architecture: You wouldn’t build a house without plans, you cannot build a website without them either. And until you have the plan (commonly referred to as the “sitemap”) you cannot begin designing your site. The sitemap functions as the “blueprint” for the structure of your site.
  • Design comps: Developing a “look and feel” requires creating a design comp for how your site is going to look. Creating the look and feel first will be important and will influence the design of your navigation.
  • Accessibility issues: Every website should have a plan on how to be accessible to as many people as possible. These accessibility issues with also impact the design of your site and your navigation.
  • Usability issues: After you have designed the navigation you’ll need to test it to see how successfully it meets the goals of the site and whether the site and the navigation what is commonly called “user friendly.”

Suggested Reading:
Where am I?
http://www.alistapart.com/articles/whereami
Designing Web Graphics 4 by Lynda Weinman: Navigation

Interface Design Conventions

Figure 4.17 from our readings — A canonical page layout. Not every page includes every element shown here.


Web Critiques


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?

What makes a good site?

  • Information design – Goals, audience, requirements, and organization of content
  • Interaction design – Functionality, navigation, style of interaction
  • Media design – Visual layout, integration of text, audio, graphics, animation, video
  • Game design – Narrative, perspectives, paths, game play, goals, themes, characters
  • Business design – Economic and organizational benefits and operations
  • Technical design – Capabilities, integration, technologies, performance, security

General Sites to study:


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?

Other Web sites to critique:

http://www.interbrand.com/
http://www.kleinfelder.com/
http://www.o2communications.com/index.html
http://www.design-works.com/

Design-related Web sites to critique:

UNIQLO (Dee)
http://www.uniqlo.com/us/

Honeyee (Christine)
http://www.honeyee.com

ToDo (Rubina)
http://www.todo.to.it/

IDEO
http://www.ideo.com/

Continuum
http://www.dcontinuum.com

Speck Design
http://www.speckdesign.com



Comments

  1. jamie September 29th

    Comment Arrow

    Compared to the thousands of typefaces available to print designers, web designers can reliably choose from just over a dozen typefaces. But is this a serious limitation?

    According to the article “Typography on the Web”: Typography is about far more than simply selecting an attractive font, it’s about line lengths and kerning and white space as well—remember that typographers pre-dating electronic fonts would have faced similar limitations.

    Give me an example (and an URL) of a website that uses web typography well and the reason(s) why. Be specific and detailed with your answer why this is a good example. (Also, be sure you choose a site that’s created in HTML and not a Flash site! — Flash sites do not have the same typeface constraints as HTML sites.)

    [Reply]

    Dee Kim Reply:

    http://mammutmagazine.org/
    This is just a simple index page from mammut magazine. While I was wandering around other sites, I could find good mixing of serif and san serif fonts on those pages. However, when this front page came into my eyes, I was impressed by the simple and clean use of typography.

    By only using courier new, it has consistency. It is making a good use of letter length and letter height to create hierarchy. Though it’s not a page that needed to work with lots of contents, it’s an good example of typographic style.

    [Reply]

    Christine Nakashiba Reply:

    benfry.com

    I think the typography on this site is nicely handled. At a quick glance, it looks very clean, organized, accessible, and easy to read. By weight, size, color and typeface we can easily scan this page with a complete understanding of what type of information we are reading.
    The size of the typeface is a little small, but with the leading and word column widths he chose, it is inviting. The fact that body type is a slab serif typeface, it is easy to read at a small scale, the serifs help move the eye around when dealing with small type.

    [Reply]

    Rachelle Moon Reply:

    http://www.yhchang.com/

    i don’t know if this falls into a category of “website” because it’s not
    a regular website but more like a piece of art. but this website has a really simple layout which in my opinion most people look for in a website for them wanting to get their information they wanted and get out. also this website deals with type in many different languages and its interesting to see how each different language in the same typeface deals with leading and space.

    [Reply]

    Rubina Ramchandani Reply:

    While selecting typefaces for web applications it is important to keep in mind the use and communication objective of the website and the content. Certain typefaces might look great when used as a heading but my not be readable when used as body text, and vice versa. Typography has come a long way today and is not just about type sizes.

    Robert Bringhurst, the consummate typographer writes, typography exists to honor content. Are we honouring the content, if we design our pages in such a way that the text, the content, is difficult to read? Using Color well is one of the many ways to create contrast. If the background color of the page is Cyan and the Body text in 10pts is in Pink, then the content will most definitely not be readable. However, it is important to keep in mind that even with excellent contrast type size matters. While designing for the web, It is important to keep in mind that the type size that may work in print may not work in web applications. A 7pt text might be readable on business card or brochure, but will most likely not be readable on the screen. Specially if the target audience are senior citizens. A good size for body text in web applications is usually 12pts.
    Again, Text sizes can vary depending on the importance of the text. Using color and type size the designer can create hierarchy. This helps the client communicate important aspects quickly and effectively. This also helps the viewer scan through the website gaining information that he needs and is most relevant. While trying to use color and type size to create hierarchy and communicate effectively, it is important to keep the web page as clean as possible. Clutter should be avoided and white space must be left. This will let the type breathe and can also be used as a tool to focus the viewers attention to a particular section of body of text.

    http://pentagram.com/en/

    This website for Pentagram is one of my favorite websites. Here type size, type color and type weight have been cleverly used to cater to specific communication objectives. For example the categories and headings are always in Red, in a bigger type size and type weight. The Categories in the side panel in the navigation bar are highlighted by using a thicker weight. standard categories sch as Portfolio / Partners/ Offices/ New and Publications have been given their importance using type size and Color. White has been used as the background color that allows the text to breathe freely. The Red / White and Black color combination creates excellent contrast and gives the website a slick and classy look.

    [Reply]

    Debbie Chang Reply:

    http://www.blackestate.co.nz/

    I believe this website perfectly depicts beautiful typography on the web. In the article “Typography on the Web,” it was said that they’re are certain limitations of typography, but this didn’t stop the designer of the web page to take advantage of variety in scale, tracking, and line spacing. The head title that reads, “Black” isn’t perfectly kerned but visually, it’ll do. The designer made the choice to make the body text perfectly readable, shrinking the length of the line of text to about 20-30 characters per line. The line spacing between each line of text allows the readers to give each line breathing space, making it much legible. Also with the line spacing, it is much cleaner and sleeker, going with the whole design aesthetic of the web page. I also thought the quotes and variety of different scale in fonts. It gives a subtle new look to the page but not in an eye catching way.

    [Reply]

    Yerem Tagvoryan Reply:

    http://www.time.com/time/

    I liked it because they used serif and san-serif fonts for the website also color red played a big role for separating content.

    [Reply]


  2. jamie September 29th

    Comment Arrow

    Interaction designers are most interested in how color:

    > can provide cues for use
    > establish relationships between disparate objects
    > can indicate importance

    Give me an example (and an URL) of a website that uses color according to one (or all) of the specifications listed above. Detail the reason(s) why and be specific. (Please give me a site you haven’t already referred to in another example.)

    [Reply]

    Christine Nakashiba Reply:

    stapledesign.com

    This website separates categories within the website by different color headings. The majority of the type is black. But the headings for sections are colored, which makes them stand out even more. The red, seems to me, like what he wants everyone to for sure click on, a.k.a. most important. The green seems to be second, and all information about his design company. Then the blue is all of the information for his shop.

    [Reply]

    Aarti Vashisht Reply:

    http://www.benettongroup.com

    Benetton’s brand color is a prominent green used in its logo. This green dominates visual language of the brand and some times the brand is recognized through the exclusive use of this color. The web interface for this brand uses the same color to continue the visual thread. However, the site also uses other colors to communicate its complex structure. The designer cleverly used the VIBGYOR to segregate the sections. The point to notice is not the use of VIBGYOR but careful selection of each color to match the intensity of the Benetton green that creates a visual harmony. Nevertheless, use of multiple colors can be challenging, so, gray is used as a common base color to pacify. These colors along with the base color gray segregate the site into sections. White text over a block of color is also applied in a conscious way to create continuity.

    The careful use of colour and its quantity helps the reader view the things in an order, creating a visual flow. At the same time, the use of green throughout the website, either as a logo or as the subtle mouse-over color maintains dominance and acts as a brand cue.

    [Reply]

    Rubina Ramchandani Reply:

    http://www.thecoolhunter.net/

    The Cool Hunter is a website that updates its viewer regularly in various categories. Since the number of categories are quite a few, the designer has used color extremely well. Each link to a particular category has been assigned a color, that has been extended throughout for recall value. Each feature uses a gradient band that helps the viewer, at any given point, to know exactly which category he is viewing.

    The color palette chosen is of vibrant colors carefully chosen using the color wheel that compliment the black background at all times. Similar vibrant colors have been used to encourage the user to share the links through social networking blogs.

    [Reply]

    Yerem Tagvoryan Reply:

    http://www.soccer.com/soccer24.php

    This website shows 3 navigation menus that use color which leads your eye to it and organizes. On top is uses grey color which is more about the, than in the middle part they use red to show their products what they are selling which is the most important thing for them and lastly they use blue at the bottom to show helpful links for the website.

    [Reply]


  3. Dee Kim October 2nd

    Comment Arrow

    http://www.uniqlo.com/us/

    This is a website for fashion brand Uniqlo. The most important color in this site is red and white. The white text in a red shape or the just the red text helps us to see useful information first(can indicate importance).
    Also, this creates another relatioship. If you scroll down a little, there is a part called +j(black and white photo) which is a new line that is in collaboration with designer Jil Sander who has a very simple and clean style. This monotone part has a contrast with red and white and distinguishes itself from the rest(creating a quiet attention). It adds a nice balance to the site, too.
    On the right side, Uniqlo is using other pastel tone colors to provide less important information like the date and calendar stuffs.

    [Reply]


  4. Rachelle Moon October 6th

    Comment Arrow

    http://www.trollback.com/

    motion graphic company Trollback and Company’s website. it doesn’t contain many different colours but it definitely highlights important messages and when putting the cursor over to a menu i select it chages colour. colours used in the website is not overdone or too much, it is just right for the viewer to feel comfortable and simple, nothing complex.

    [Reply]


  5. Debbie Chang October 7th

    Comment Arrow

    http://www.big.dk/

    Here, the site user is greeted by a flash of bold colors and a huge graphic logo that changes every minute. Once one enters the site, they are redirected to a html page with different colorful logos scattered that mimics the contour of a cityscape. once you move the cursor over two one logo, an image of the building that represents the architecture pops up. The usage of color here is effective because they are all unique desaturated primary colors. The placement of each one; stacked on top of each other also makes the negative space interesting. All in all, the usage of color distinguishes each logo as a different one as well as providing cues for use.

    [Reply]


  6. Buddy October 7th

    Comment Arrow

    Answer to question one: http://www.rvca.com/?page_id=142

    I would be one to argue that, yes there are limitations to typeface for web designers, especially those who design HTML based sites. I would also be one to say that there shouldn’t be any limitation(s) to what typefaces are usable or non-usable. However, being limited to a certain amount of typefaces can be beneficial to the designer: (1) it can challenge the designer; (2) can make that designer more knowledgeable of how the web works; (3) can make the designer more conscious of clarity and simplicity; and (4) can make the design design with others in mind (i.e., end-users). In other words, having restrictions and limitations on typeface allows for clarity in communication between the information end and the end-user. After all, the end-user is the one who has to shuffle through all the content, so you might has well make it clean, simple and easy to find.

    RVCA has always been one of my favorite sites to visit. There are no crazy rollovers, no confusing navigational bars, or absurd motion, just a simple site that is very easy to read and navigate through. The reason why I chose this site as my best example of “good typography” on the web is because it sticks to a minimal amount of type varieties (e.g., simple letter spacing, good use of bold and italics to separate headers and columns, perfect size for legibility, and great color choice to separate information), and because of this it remains a very strong, informational site that serves its purpose well.

    Answer to question two: http://www.learnsomethingeveryday.co.uk/

    Learn Something Everyday is a very fun site to visit. If you haven’t already, please do so in the next few minutes before reading this.

    I particularly like this site not only because of the fun facts it provides, but because it uses these fun facts as way to project color, which I believe is very interesting and clever. Color is a big deal when it comes to design in general. I like to believe that it is what people see first before they ever get to the captions or focus in on the what the image is. Color also plays a huge role in igniting certain emotions or feelings, just like waking up to a bright, sunny day as opposed to waking up to a gloomy, rainy day. The site that I have chosen sticks to a very minimal typeface and uses these fun-facts as its primary means of projecting color to the viewer, which gives off as very welcoming. And because of this it functions as a very successful site that say, if you did wake up to a gloomy, rainy day, this site would immediately make you feel otherwise. And a lot time, I feel that sites need to do this. They need to take you out of your normal experience of things and make you feel a part of this new experience that is either better than your normal experience or adds to that normal experience.

    [Reply]


Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Interactive Design 01