Week 02

Topics: HTML tags, What is Accessibility?, Constraints, Core Process, Target Audience(s), Personas
Studio
Experiment: Using moma.org as the client site, sketch a web home page re-design in Photoshop/Illustrator exploring design directions suitable considering the user preferences for three personas. Post your process for this exercise on your WP blog.

Project:
Continue to work on your re-design and 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 121-128)
Principles of Beautiful Web Design article
Thinking Outside of Grid article
Answer the questions in the Comment section of the Week 02 notes of this site.


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


HTML Examples

For the examples below, please hand-code the tags into your page. (Make sure you have already added the “master tags” to the page). After you hand-code each example, save the HTML page and view it in the browser. Remember, if you have any problems please take a look at the example located here,

Link to HTML Example directory

Also, note the name of each tag is hyperlinked and links to an example page. (Click on “background color” below to see what I mean). If you view the source of the example page, you can see exactly how the page is coded.

1) background color

inline

<body bgcolor=”#000000″>

css

body { background-color: #000000;}

2) background image

inline

<body background=”images/an_image.gif”>

css

body { background-image:url("images/an_image.gif" }

use this image as the background image (control-click to download it):
an image

3) Heading styles
<h1>The biggest heading</h1>

<h6>The sixth biggest heading</h6>

4) Line break
some text using a br with a line break at the end<br />

5) Paragraph
<p>some text in a paragraph, always has a blank line after it</p>

6) Bold and italic

<b>Some Bold Text</b> OR <i>Some Italic Text</i><br>
<b>Some Bold Text AND <i>some bold and Italic text</i></b>

<strong>Some Bold Text</strong> OR <em>Some Italic Text</em><br />
<strong>Some Bold Text AND <em>some bold and Italic text</em></strong>

How would you use html markup to produce this sentence (bold & italic, then italic)?

7) Horizontal rule
<hr />
<hr size=”20″ />
<hr width=”100″ align=”left” />

<hr width=”50%” />

8) Image
<img src=”images/an_image.gif” width=”200″ height=”100″ alt=”An image to be displayed” />

9) Links
A link to another web site
<a href=”http://www.nytimes.com/”>Link to the New York Times</a>

A link to a page within the website
<a href=”about.html”>Link to a the About page on this site</a>

A link that sends an email. Note that this won’t work right on the computers because they are not configure for email.

<a href=”mailto:jane@jane.com”>Email Jane</a>

The next two tags enable you to create a link to a different location on the current web page. When the user clicks on the link, the browser will scroll to the new position – assuming that the link is far enough away to need a scroll. The “href” version is the link and must include the “#”, the “name” version is the location on the page to scroll to and must NOT include the “#”. NOTE: You must have some text between the <a name> tag and the </a> tag, or the link won’t work in Explorer. If you don’t want anything to so in the name tag, use the non-breaking space HTML code:

<a href=”#lowerpoint”>Link to a location lower on this page</a>
<a name=”lowerpoint”>Some text lower on the same page</a>

10) Font

inline

<font face=”Arial, Helvetica, sans-serif” color=”#ff0000″ size=”6″>this is some text</font>

css

body { font-family: Arial, Verdana, sans-serif; }
PC Mac
Arial Helvetica
Times New Roman Times
Courier New Courier
Verdana Verdana
Trebuchet Trebuchet
Symbol Symbol

11) Centering
<center>Using CENTER</center>

12) Indenting a paragraph, creates a paragraph and adds margin on left and right
<blockquote>some indented text</blockquote>

13) Bulleted list
<ul>
<li>this is item 1 in an un-ordered list</li>
<li>this is item 2</li>
<li>this is item 3</li>
<li>this is item 4</li>
</ul>

14) Numbered list, types: numbered=no type, upper letters=”A”, lower letters=”a”, upper roman=”I”, lower roman=”i”

<ol type=”i”>
<li>this is item 1 in an ordered list</li>
<li>this is item 2 in an ordered list</li>
<li>this is item 3 in an ordered list</li>
<li>this is item 4 in an ordered list</li>
</ol>

15) Preformated text allows use of extra spaces and line breaks to format your text

</pre> 

alskf asldk
     aslfk asldkf asdlk

         als faslfk alskfa sldk

            aksdf alsfk laskf alsdkf

     alskf asldk aslkf
als kfasdlk

</pre>

16) Flowing text around an image align=”left”, align=”right”, vspace=”pixels” margin above and below image, hspace=”pixels” margin left and right of image

<img src=”images/an_image.gif” width=”200″ height=”100″ align=”left” hspace=”10″ vspace=”10″>

17) Text colors
text=basic text color, link=links color, vlink=visited links, alink=link when mouse down

inline

<body text=”#ff0000″ link=”#003300″ vlink=”#000066″ alink=”#000000″>

css

body {color:#ff0000;}
a:link {color: #003300; text-decoration: underline; }
a:visited {color: #000066; text-decoration: underline; }
a:hover {color: #000099; text-decoration: none; }
a:active {color: #000000; text-decoration: underline; }

18) Meta tags refresh=go to a new page after N seconds, description=used by search engines, keywords=used by search engines

<meta http-equiv=”Refresh” content=”15; URL=http://academy.smc.edu”>
<meta name=”description” content=”The New York Times on the Web”>
<meta name=”keywords” content=”New York Times, newspaper, international, news, business”>

19) Comments, used for identifying different parts of the code, or explaining how the code works. Comments are not displayed in the page, and are ignored by the browser. The format for a comments is: Begin a comment with “<!–“, end it with “–>”, and do not use “–” within the comment.

<!– this is a comment –>


What is W3C?

“The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web (abbreviated WWW or W3). It is arranged as a consortium where member organizations maintain full-time staff for the purpose of working together in the development of standards for the World Wide Web. As of February 2008, the W3C had 434 members.

W3C also engages in education and outreach, develops software and serves as an open forum for discussion about the Web. It was founded and is headed by Sir Tim Berners-Lee.” –Wikipedia

What is Accessibility?

Accessibility is treating everyone, no matter what their ability, the same.

Most discussions of accessibility first talk about disability. This implies that people with a disability deserve special treatment. This isn’t what accessibility is about—it’s actually a symptom of the way people have traditionally built buildings, web sites, and pretty much everything else in fact.

When you build things with the assumption that everyone is the same as you, then they will always be wrong for some other people. People assume accessibility is about helping people with disabilities because retrofitted accessibility is very obvious in our societies. For example, a lot of buildings that started life with only steps have suddenly sprouted cheap ugly ramps. However, accessibility has long been a feature of military design. Why? because it is often critical for survival—at high g-forces jet fighter pilots can’t do the same things they can do on the ground. If aircraft designers didn’t take the needs of pilots in both high and low gravity environments into account then there would be a lot more plane crashes.

So, what does this mean for web site developers? The short answer is that you need to try to be more aware of the needs of the entire audience that might look at your site. A longer answer might require you to learn a little about the differing levels of ability people can have, and how they use computers.  Your web sites should be usable by people whether they:

  • Are blind or severely visually impaired, and listen to web sites using a screen reader, or feel them on a braille display.
  • Are shortsighted, and blow them up to 200% font size.
  • Have motor disabilities so can’t use their hands to manipulate a mouse, and therefore use a pointing stick to manipulate the keyboard, or an eye pointer to manipulate the web site.
  • Use trackballs, or other more unusual types of computer control system.
Why is Accessibility important?

Accessibility is important for one big reason and a whole lot of little ones. The main one is that we are all different and yet we all have an equal right to use web sites, but there are lots of other reasons why you should make accessibility considerations a part of how you build web sites:

  • In some countries it’s the law.
  • You don’t want to exclude any potential customers/visitors from using your site.
  • Accessible sites tend to rank higher on search engines.
  • You are demonstrating good ethics—something that customers will value.
  • Once you build web sites with web standards it hardly requires any extra effort to make it accessible, which gives so many benefits; there is also a lot of crossover between sites being more accessible, and sites being more compatible with mobile phone browsers—another circumstance that makes web site harder to use, although for different reasons. In fact, some work has been done on analysing the relationship between web accessibility and mobile web development best practices—see the WAI “Web Content Accessibility and Mobile Web” page for more.
  • Techniques that help people with disabilities benefit all users.
Designing with Accessibility in mind

The key to accessibility is thinking about a problem and knowing you are going to solve it for more than one kind of user. If you try to treat accessibility like something you can bolt on at the end then you will get a nasty-bolted-on-at-the-end thing. It’ll take longer, won’t work as well and look damned ugly.

The best way to achieve a well-engineered solution is to design with all the requirements in mind from the start. This doesn’t mean you shouldn’t change your plan or add some things you missed, but you should try to be aware of what the complete problem you are trying to design for is. In the case of web sites this means creating a solution usable by all your users including those who may not be able to use a mouse, or a keyboard, or a monitor, etc.

Features of an accessible web page
Semantic structure

One of the foundations of web standards is the use of semantic structure in HTML. Semantic structure is also extremely important for accessibility. This is because it provides the framework for the information on the page. When people can’t see the visual style of the page, the semantic structure helps to indicate a number of things to them. It can indicate their position in the hierarchy of the document and the ways they can interact with the different elements of the page, as well as providing emphasis to textual content in the right places.

A good example of how the semantic stucture of a document is important to accessiblity is navigation. A well structured navigation menu is a list of items. You can mark this up as an HTML list:

<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>

By having navigation menus structured as lists it is easy to let someone using a screen reader, who can’t see the list, know it’s a list. This is because their screen reader tells them it’s a list. If you don’t use list markup then the screen reader has no way of knowing it’s a list and telling the user.

Alternative content

As mentioned in the section about search engines, ensuring that there is an accessible alternative to content and navigation is essential. Text is considered the universal currency of content with one caveat, as you’ll see below. Text can be easily read aloud by a screen reader, made bigger or smaller, have its contrast easily altered and many other transformations. It’s because it is so easy to manipulate text that more exotic forms of content should have a text-based alternative to them. Some formats, like the newer versions of Flash, have text access built into them so that the textual content within them can be accessed directly without needing to provide an alternative for the whole medium.

How should you implement text alternatives on your site? The first step is to identify things that aren’t already text. In HTML there are only so many things that aren’t already text. Images are the most obvious ones. Here is an example of an accessible use of an image:

<p>An interesting piece of art is Michelangelo’s “God creates Adam”
<img src="images/adam.jpg" alt="A painting of a man reaching up to touch God’s hand
reaching down. It is cracked with age." longdesc="adam.html">.</p>

The image in this example is an integral part of the content. The alt attribute contains a short description of the image for people (or search engines) that might not be able to see the image correctly. The longdesc attribute allows you to link to an HTML page containing a full description of the image. This is generally only used to describe complex images that are used as central content. It also suffer from poor support in browsers. Most of the time you will only use the alt attribute.

When images are used for things other than content, such as navigation, or purely visual decoration you should treat them differently from content images. Images used to make buttons or page navigation look more attractive should have an alt attribute that matches the text in the image. The alt attribute simply functions as an easy way to allow the computer to read the text contained in the image (and hence read it to the user of a screen reader).

In the case of purely decorative images, images used for tracking adverts, or any other image that a user wouldn’t be expected to be interested in or interact with, you should set the alt attribute to be empty. This does not mean omitting the attribute but setting alt=””. This is because of a tactic screen readers have used to help their users cope with very inaccessible pages. When an image doesn’t have an alt attribute, especially when it’s part of a link, the screen reader reads the URL of the image to the user. This is so they can guess what the image is from the URL, for example if the image is named something like add_to_cart.gif. Therefore, you should set alt=”” on images that you know the user won’t be interested in, so that screenreaders won’t read out every image’s URL, which could be rather frustrating for the screen reader user.

Not all forms of content are as simple as an image. More complex media like Flash (Flash files can be whole web sites in themselves) or movies require more complex descriptions. The most recent versions of Flash allow you to provide text alternatives for the items within the Flash movie, just like in HTML.

Standards for Accessibility
Web Content Accessibility Guidelines 2.0

Since publishing WCAG 1.0, the W3C has been working on WCAG 2.0. This updated version of the standard is still in draft at the time of writing. Subject to the process of the W3C it will probably be a published standard by early 2009.

WCAG 2.0 is slightly different in it attempts to be more technology-agnostic than WCAG 1.0, ie it could be applied to HTML, CSS, Flash, etc. WCAG 2.0 is based on 4 principles for accessibility. These are:

Perceivable
People can access the content through a medium available to them. For example people who can’t see should be able to hear the content
Operable
People can interact with the web application or content.
Understandable
The content and user interface is understood by the people who are using it.
Robust
Any solution provided should be using widely available on different platforms or systems. This is to stop people inventing solutions that the majority of people wouldn’t be able to use because the hardware/software is restricted or prohibitively expensive.

It’s important to note that web sites aren’t expected to fulfill all of these requirements. The technology a user has should do some of the work too. For example it is expected that a screen reader will read pages to people who need it, rather than every web site providing an audio version of the content. However, the web site is expected to provide pages that can be read using common screen reading technology in order to make this possible. This difference is important, as it’s the difference between a web site with an “accessibility widgets” (like a button to make the fonts a bit bigger) and a web page that will work in a multitude of different situations (eg varying browsers and devices that would be impossible to anticipate).

Above material from The Web Standards Curriculum. This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.


Defining Problems & Constraints

Projects generally begin for one of two reasons:

  1. Something is broken
  2. Something doesn’t exist

Unless the problem is simple and narrowly defined (for instance, users can’t find the Submit button at the end of the form), designers shouldn’t take  any problem at face value. Often what what seems at first glance to be really simple, really isn’t (and, rarely, vice versa).

“Wicked problem” is a phrase used in social planning to describe a problem that is difficult or impossible to solve because of incomplete, contradictory, and changing requirements that are often difficult to recognize. Moreover, because of complex interdependencies, the effort to solve one aspect of a wicked problem may reveal or create other problems.

Considerations
  • Wicked problems aren’t fully understood
  • They have fuzzy boundaries
  • They have lots of people (stakeholders) with a say in them
  • They have lots of constraints
  • They have no clear solutions
Information gathering to determine the problem

Stakeholder (Client) interviews: The Client Survey
Design (Communication) Brief: Communication Brief Worksheet

See Web ReDesign 2.0 website for more information.


What is the Core Design Process?
Web ReDesign: Strategies for Success with: Kelly Goto
lynda.com

Core Process Overview
Three Way of Understanding your Audience


Personas

“A persona is a documented set of archetypal people who are involved with a product or a service. Personas turn “the users” into identifiable human beings…Personas are typically amalgams of multiple people who share similar goals, motivations, and behaviors.”

Designers should devise personas from observing and talking to users.

Personas by themselves are useless. They become useful when the designer sets up scenarios and uses the personas to test features for appropriateness and utility:

  • Would this persona do this task?
  • Could this persona do this task as it is designed?

A user profile or persona is a realistic (but likely fictional) example of a target audience member. The profile commonly takes the form of a one page piece that lists the user’s name, occupation, education, demographic characteristics, computer/web experience, and site goals or likely tasks. A stock photography picture is usually used to give a face to the profile.

These profiles can be extremely useful in keeping the web team focused on the user’s needs. These may not be necessary for usability experts, designers, or information architects, all of whom should have a firm grasp of user-centric design. But they can be beneficial for project managers, programmers, and clients. When making decisions it’s helpful to be able to say “John B. really would have trouble with this,” or “Adding this link here would really make life easier for Sharon.” User profiles also help to reinforce the importance of an Information Architect. It is a deliverable that documents the establishment of target audiences, a process that might have taken a considerable amount of effort and research.

Read more about user profiles for the Web

Above material about Information Architecture from Web Information Architecture Deliverables and Diagrams.

Three personas to use for Studio experiment:

Heather Adams
Theresa Lowell
George Vance



Comments

  1. jamie September 12th

    Comment Arrow

    Here are two questions based on the readings for next week that I would like you to answer before our next class Wednesday, September 23.

    1. Discuss the advantages of using a grid system when designing for the web and what the possibilities are when we break out of the grid?

    [Reply]

    Dee Kim Reply:

    Using the grid system, we can easily put more information on the web without complexity. When we break the grid, it becomes suitable for designing discrete, semantic sources.

    [Reply]

    Buddy Bojorquez Reply:

    The advantages of using a grid system when designing a website would first allow the designer to achieve more structure within the design of the site. In other words, the grid works as an outline, or a guide that would allow for a type of consistency in layout throughout. However, even though the grid may be a good way to add unity and form to your site, it doesn’t necessarily mean that that unity and form will make your site more balanced, which may even work against the designer both creatively and visually.

    The possibilities of breaking away from the grid in my opinion are absolutely endless. I feel that not always pertaining to a grid can allow for more out-of-the-box type of thinking as opposed to the typical “safe” ways of doing things (e.g., thinking about structure first rather than going with your instincts – things like this that allow for more freedom in the design process). Again, breaking away from the grid does have its advantages; however, being able to feed off the two can be more beneficial to the designer because now the designer can still add that structure that needs to be there, while still hanging onto that sense of freedom the designer has to explore within the design.

    [Reply]

    Mike Manalo Reply:

    For website and web interfaces, conveying information and content can be a daunting task due to the specificity issues associated with this matter. Using a grid to design a website allows designers to break the webpage into parts. Information and media (images, sounds and text) can be organized as a series of a greater part. This allows web user to recognize patterns and hierarchies within how the context is presented. At a basic level, this can be done with margins, flowlines, spatial zones, columns and modules. These visual tools give way to alignments between masses and voids on a webpage to visually connect or separate content.

    Breaking outside a design grid for a composition can be referenced to influences from Cubist paintings of time (i.e. Picasso) and Dadaist deconstruction art (i.e. Marcel Duchamp, Francis Picaba). For web content, it is an opportunity for the recognizable properties of order and disorder to work together to convey information. Whether it’s having all navigation align on the far left column or having content interact as a live network grid, breaking the grid is about showing the behavior of information in a more dynamic and visual way. It can be most categorized as using deconstruction methodologies on media (images, sounds and text) to create an optical linguistic with your web audience.

    References:
    1. Making or Breaking the Grid, Tim Samara
    2. ‘Dada’, Modern Art 3rd Edition, Sam Hunter

    [Reply]

    Rubina Ramchandani Reply:

    Some of the benefits of working with a disciplined grid system are clarity and easy navigation. A uniform grid system used across a web site helps in recall value and continuity.

    However, in a day and age where grids are formed and broken it is important to understand the grid system so that breaking out of the system helps in communicating effectively. You must know the rules to brake them.

    In my opinion designers must take into consideration what the communication objective and look of the company is before they decide to sick to the rules or brake them.

    [Reply]

    Debbie Chang Reply:

    The advantages of using a grid system when designing for the web is predictability. It would be much easier for people who are not familiar with the internet to be able to navigate through the page with ease. Also it is visually appealing because of its clean look and organization for the site user to experience.
    The possibilities when we break out of the grid is spontaneity. It could heighten the site users experience for them to enter a web page without the usual systematic grid based page. They would be in for a suprise because nothing in the design would have the redundancy in something of a grid based web page would have.

    [Reply]

    Rachelle Moon Reply:

    by using the grid system, contents are more organized. patterns are created according to the grid and viewers are aware of what to expect.
    but when breaking out of the grid, as well as the freedom, it often greets users with confusion. contents go wild in their positions and can get fun, but also chaotic.

    [Reply]

    Christine Nakashiba Reply:

    I agree with Debbie Chang, that the advantage of using a grid system is predictability.

    Breaking the grid in a way that reflects the goals of the client or reflects the difference between your client and their competition, can very quickly and effectively show the uniqueness of your client.

    [Reply]

    Yerem Tagvoryan Reply:

    Using grids makes our job easier, we usually use grids for big content websites for example e-commerce websites. Since we are going to have multiple pages, grids set standards for us to follow.

    When we want to be unique or give its own character to the website we have the option to not use the grid system. Also it works when the website is not complex. it gives us freedom to put content different places.

    [Reply]

    Aarti Vashisht Reply:

    The advantages and disadvantages of grid, have been explicitly expressed. In my opinion, the grid systems are helpful in cases where large systems are involved, such publications, journals, newspapers etc… Just imagine the ordeal the reader would go through if no grid system is followed in the above mediums. Similarly I think, large websites require a grid system for various similar reasons defined by my classmates in their replies above.

    I have come to believe, that, the grids have numerous possibilities of producing interesting visual flows. If applied well, they will not only comfort the eyes of the reader but also trigger visual interest. However, at the same time I have witnessed some of very beautiful pieces of work produced, where the grid has been broken. Breaking of the grid is nice for mediums like posters, leaflets, short pieces of design that do not need a system for ease of read. Publications designs that use the ‘break the grid’ process is many times overlaid over a basic grid system. In my opinion the medium will determine the style of the message.

    [Reply]


  2. jamie September 12th

    Comment Arrow

    Here are two questions based on the readings for next week that I would like you to answer before our next class Wednesday, September 23.

    2. Discuss one of the elements of Balance, Unity, or Emphasis discussed in the Principles of Beautiful Web Design article. Give me an example (along with the URL) of a website design that represents this principle.

    [Reply]

    Mike Manalo Reply:

    http://tronicstudio.com/media/shell/shell_big.html

    Emphasis is described by Jason Beaird as, “Making a particular element draw the viewer’s attention.” For Tronic Studio, a Brooklyn NY based design group, a lot of their work is visualizations for print, web, film and small exhibitions. So their FLASH website would an example of breaking the grid because its information is organized through motion navigation that create animated small grids within the web browser. However, the background is a full bleed image that changes with every site visit or navigation to each site section. The full bleed image operates not only as a backdrop, but an iconic signal to emphasis a project being explored by the user.

    [Reply]

    Yerem Tagvoryan Reply:

    Unity in websites mean there are sections which clearly you can tell whether they are buttons or just content. And everything works as one to give the best experience for the viewer. And I think NIKE’S soccer website shows that.

    http://www.nike.com/nikefootball/home/?locale=en_US

    [Reply]


  3. Dee Kim September 20th

    Comment Arrow

    Repitition is one way to unify the design. It could be a repition of color, form, typography, and objects. For example, there is
    http://www.theolinstudio.com/#/home
    Olin is repiting the round object with a black stroke and specific colors through out the site. Though the page changes, these objects are still used, and users don’t lose unity. For the pages, it is not only using Repitition (of colors), but aslo using Proximity to group the contents.

    [Reply]


  4. Buddy Bojorquez September 20th

    Comment Arrow

    What is beautiful web design? Does it come down to the visual vs. the mechanical? Or can it be both? Obviously these are rhetorical questions, but really, what exemplifies beautiful web design? I would say that in order for a site to be considered a beautifully designed site, it would have to not only work well visually but mechanically as well. There would have to be a consistency between the two. For instance, let’s take the element of “Balance” for example. Say someone designs a site that is visually lacking but strong on the mechanical elements, such as navigation, user-ability, interaction, etc., but visually it’s just blah. There’s nothing exciting happening. There’s nothing on the surface of this site that screams: WOW, BEAUTIFUL. But just because it’s not “beautiful” or visually captivating doesn’t necessarily mean that the site itself is garbage. It just means it’s lacking, and since it’s lacking visually, which is huge because all things come down to what-we-see-first, the site can then either suffer because it will in the end steer traffic away or bring in traffic. And the point is to bring in more traffic not to lose the attention of the user(s). So in a sense, there needs to be this balance between the mechanical since its need to work well with the end users and needs to be visually captivating or aesthetically pleasing in order to keep the attention of those end users to achieve this site that really works well and is successful.

    Here are a few sites that I feel achieves this balance:
    http://www.nike.com/jumpman23/historyofflight/
    http://www.mashdesign.com.au/index.html
    http://www.la-surprise.com/#/agency/our-way-of-working
    http://reserved.com/#/pl/rock/35mm/1

    [Reply]


  5. Rubina Ramchandani September 22nd

    Comment Arrow

    A good layout is one in which the combination of its parts constitute as a whole or in which a symmetry of style or character is retained. A web page has the advantage of using interactivity to retain unity. For example http://trollback.com/#/work/ uses interactivity between text and image to maintain unity. If you click on one of the thumbnails, the main page is reduced to a watermark while showcasing the desired project details. This website is also a good example of emphasis and balance. The image area takes up approximately one third of the page by showcasing the thumbnails of the works. This has been well balanced by keeping the text minimal with excellent usage of white space.

    Some other examples:
    http://www.sidlee.com/
    http://www.leoburnett.com/
    http://www.todo.to.it/

    [Reply]


  6. Rachelle Moon September 23rd

    Comment Arrow

    emphasis, like a focal point, takes an important role in web design. by giving emphasis on a content, makes it easier for users to get through the website without complexity and confusion. it brings the users right into the website having them be able to concentrate in their journey on the website.

    http://www.uweloesch.de/poster.html

    [Reply]


  7. Rachelle Moon September 23rd

    Comment Arrow

    emphasis, like a focal point, takes an important role in web design. by giving emphasis on a content, makes it easier for users to get through the website without complexity and confusion. it brings the users right into the website having them be able to concentrate in their journey on the website.

    http://www.uweloesch.de/

    [Reply]


  8. Christine Nakashiba September 23rd

    Comment Arrow

    Proximity – the grouping of objects to show relationships and hierarchy on a page.

    I found this website to represent proximity. The grouping of the type in the middle of the page emphasizes the content over the video image on the page. Then within the group of text there is more grouping, making it an easy page for me to navigate.

    yohjiyamamoto.co.jp/en.html

    [Reply]


Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Interactive Design 01