GWDA223 Intermediate Web Page Scripting :: Art Institute

Week 3: User-Centered Design

Planning and Preproduction Slideshow

View Slideshow: PPT

View Slideshow: PDF

Audience

Every site's ultimate aim is to communicate something to its users. If your website doesn't communicate what you want it to, your audience will go to another site looking for the experience or content that you couldn't give them.

In this class, we will focus on user-centered design. When you build a website, you're building it for your users, not you. You design for your user's strengths and weaknesses. You want to use every technique possible to:

  • bring users to your site
  • help them find what they're looking for
  • make sure they have a rewarding experience, and
  • keep them coming back.

Understanding your audience is key to creating a user-centered design. Get as much information as possible about the site's target audience before you begin your design work. Ask your client the following questions:

  • What types of visitors do you want to attract (demographics)?  
  • What are your goals for each type of visitor?  
  • What are the products/services involved?  
  • What are your goals for these products/services?  
  • How technically savvy is your expected audience? Will most be on high-speed connections, or on dial-up?
  • How large to you expect your user base to be?

Visual Metaphor

One way to get your site looking right is to figure out what the site is about. In other words, what is the site's theme, and how can you express that visually? A visual metaphor takes advantage of familiar visual elements (like images, interface elements, colors, or fonts) and reinforce the site's theme.

The word theme is used to refer to all kinds of different things in the world of web design—which can be kind of confusing. For our purposes, a theme is your site's purpose and content. So, the theme of amazon.com is an online merchant that focuses mainly on books. The visual metaphor uses design elements (color, graphics, typography) that reinforce the site's theme.

Take a look at the following sites. What is the site's theme? What are some of the design elements that are used in the site's metaphor?

Resources

Brainstorming a Visual Metaphor

For any website design project, start by figuring out the theme. Then come up with a good visual metaphor. Not only that, but figure this out without worrying to much about how many columns you'll need, or what sort of navigation to use.

Developing a visual metaphor is really all about brainstorming—spending some time to really think about your client's content, audience, and what visual elements they want to see on the page. Any remember one thing: don't discredit any ideas or concepts you come up with. Just write them all down—you can refine things later.

Coming up with a theme and visual metaphor can be tricky. Once you know what content you have to work with and have a few brainstorming sessions under your belt, it's time to start thinking about the best way to convey and display that content to your site's users. Color, layout, and element placement are all important factors when deciding the best way to reinforce a site's theme.

So, once you're clear on a theme, here's what you need to do:

Choose some color palettes

Pick colors that work well with the content and support the theme of the site. Use resources like kuler.adobe.com and colourlovers.com to build palettes and see how different colors will work together. More on this topic next week.

Design layouts based on content

Make layouts based on the content you've been given. The more columns you have, the more space you have to fill. Also remember that white space is important. You don't have to fill every available pixel. More about these layouts, called wireframes, in a bit.

Use visual elements to reinforce the theme

The use of imagery, iconography, and text can help reinforce the site's theme by making the site "look like the content." This is where your brainstorming will help the most. Use your list of ideas to come up with display elements that help emphasize your site's main themes.

Shaping Your Visual Metaphor with Page Elements

Once you have a general site theme and have started to think about what you want on your site, you need to consider where all your client's content is going to go.

How you lay out a site affects your overall visual metaphor a lot—it dictates what can and can't appear on a given page.

For example, if you only have a single column, it may be difficult to make the site "feel" like a newspaper or magazine. But add a few more columns and you make the page mimic the grid-like multi-column layouts of your typical daily paper.

Site identity

This can include a logo, a slogan, and a brief site description. Site identity is typically contained in some kind of header, and it is critical to web usability. A user should known what site they're on from any page.

Main navigation

This element is essential for users to get around your site. Design, placement, and the content of this element will help convey your site's theme in different ways.

Subnavigation

This element displays content that lies under a main navigational item. This is usually only needed for larger sites and more complex content.

Body content

This element is where all the magic happens. This is where you put the stuff that people are coming to see. Whether it's images, a blog post, or a YouTube video, all that stuff goes in the body content.

White space

Also called negative space, this element is the area between all the different design elements on your page. White space helps break up blocks of content, gives the user's eye a little rest, and focuses the user's eye towards content.

Footer

This portion of your layout can hold anything from copyright information to duplicate navigation links. Users will often look to this section for links or content that can't be located anywhere else on the site.

Sidebars

These elements can hold everything from link lists to extra body content. They can also be useful for ancillary navigation and archive links for blogs.

Preproduction: Wireframes

When planning your site, you must do a lot of research and then begin drawing some rough layouts. The research involves discovering as much as you can about the company, topic, or other entity the site is about, its intended audience, and the scope of the site (how big and complex it will be.) Then you can figure out how to break the web pages out into page content areas.

wireframe sample for a news site, gridlessPage content areas may include the following or much more:

  • Header/Site ID
  • Search
  • Login
  • Main Navigation
  • Secondary Navigation
  • Main Content
  • Advertising
  • Sidebar
  • Media
  • Footer

Once you've decided upon all the content areas that are appropriate for your site, it's time to draw up a few wireframes. A wireframe is an illustration of the layout of fundamental elements in the web page's interface. Typically, wireframes are completed before any additional artwork is developed. Carefully planning your overall layout, before you create any graphics, can eliminate a lot of headaches later on.

Wireframes can be created by hand or by using a variety of software programs. Visio is software that is ideally suited for wireframing, but it is expensive. Sometimes designers simply use Word, Excel, or Illustrator.

Wireframes need to achieve a balance between being too detailed and too general. A wireframe that is too precise may leave little creative room for the designer. A wireframe that is too loosely defined can be misinterpreted by designers and developers. The wireframe format used should be dependent upon the audience.

How to create a wireframe:

  1. Decide on which page elements will be included.
  2. Draw a rectangle on your paper which approximates the proportions of a browser window.
  3. Use a ruler or draw carefully to indicate the placement of the various page elements. Take your time to show clean boundaries. Imagine that you will be submitting this work to a paying client. Some of the content may go below the bottom of the browser window; go ahead and show the entire page above and below "the fold."
  4. Label each of the page elements.
  5. Instead of drawing, you may use software instead—-but take care to include the page outline and all of the page elements, and label each element. Don't get too detailed! There should only be rectangles and labels.

wireframe sample for a news site, gridded using Paper BrowserWireframing Resources

Paper Browser

Web Design Sketchbook

10 Completely Free Wireframe/Mockup Applications

35 Excellent Wireframing Resources

Using Wireframes to Streamline Your Development

Preproduction: Site Map

A site map is a diagram showing all of the site's files and folders in a hierarchical structure. Here's how I want to you create yours:

  1. Decide what topics will be on each of your web site pages.
  2. Draw your root folder at the top: draw a wide rectangle and write its name underneath it.
  3. Draw a vertical relationship line down from the root folder and connect it with a long horizontal line.
  4. Draw short vertical lines down from the horizontal line, one for each file or folder within the root folder.
  5. Under these vertical lines, draw a rectangle for each file or folder within the root folder. Be sure to use the correct orientation: use wide rectangles for folders and tall rectangles for files.
  6. Label each folder with the actual folder name you intend to use, and each file with the actual file name you intend to use. Make sure your home page is named index.html, and that you include a stylesheet file and a folder for your images. See the first sample site map below.
  7. For more complex sites with many categories of content, you may need to collect groups of pages within subfolders. Each of these subfolders should also contain an index.html to serve as the default page for that folder. See the second sample site map below.

Remember our file and folder naming conventions:

  • No spaces.
  • No uppercase letters.
  • No special characters other than - or _.
  • No period except where it immediately precedes the file extension (e.g. index.html).
  • Use meaningful file and folder names, as they are "read" by search engines.

site map sample

complexsite map sample
Click on the image above for a larger version.

Preproduction: Mood Boards

A mood board is a type of poster design that may consist of images, text, and samples of objects that express the mood of a future design piece. Designers use mood boards to develop their design concepts and to communicate to other members of the design team. Mood boards are often used by graphic and web designers to enable them to illustrate visually the direction of style which they are pursuing.

Mood boards can be arranged in a variety of ways, from loose collages to formal, organized layouts.

mood board example 1

mood board example 2

Why Mood Boards Matter

17 Inspiring Moodboards

Preproduction: Storyboards

Clients sometimes don't really "get" wireframes, which is why it's a good idea to present them with the next step, a storyboard, instead.

A storyboard, otherwise called concept art, is a drawing used to visualize your design in its entirety. It gives you a chance to see how colors interact with one another, how your navigational system looks, how your visual metaphor plays out, and whether content is presented in the best way possible—without getting into code.

Instead of creating an elaborate mockup in Photoshop, or a preliminary layout in XHTML and CSS, you can save a lot of time and effort to draw one or more storyboards so that you and your client can grasp what the site might look like.

If your client needs changes or a whole new layout after viewing the storyboard(s), it's a simple matter to draw up a new storyboard or two. Storyboards have more detail than your wireframes, but are not as highly detailed as the final site will be.

How to create a storyboard:

  1. Again, draw a rectangle on your paper which approximates the proportions of a browser window.
  2. Select one of your successful wireframe layouts.
  3. Drawing cleanly and carefully, outline the major page elements.
  4. Use horizontal lines or the label "text appears here" to indicate where text will go.
  5. Use boxes with crossed diagonal lines or simple outlines to indicate image placement.
  6. Sketch in logos, icons, headings, and navigation buttons.
  7. Add color with colored pencils, crayons or markers.

Allow your client to draw right on your storyboard—encourage them to give you as much feedback as possible. Ideally, you will provide them with two or more storyboards. Make sure that each storyboard meets your client's needs, but that they are different enough to give them a choice.

Student Work

Below you can click through to see outstanding examples of student storyboards:

Putting Your Pages on the Web

Web Hosting

How URLs Work

URL anatomy

Getting Your Space on the Web

You will need three ingredients:

  • Content (HTML and CSS along with other files in a site structure)
  • A domain name
  • Web hosting

Review the types of hosting packages available at these companies:

How Hosting Works
  • You pay a company which has a special high-speed connection to the Internet to store your site files on their server.
  • You often share the same server with many other websites. This is called shared hosting.
  • Dedicated hosting gives your site its very own server, and costs a good deal more. This kind of hosting is often needed for extremely popular sites.
  • You pay a sort of "rental" fee for the server space. You generally pay a lower price per month if you pay for a year or two up-front.
Assessing Your Needs
  • How much space will you need?
  • How much bandwidth will you need?
  • Do you want to register your domain name with the same company who hosts your site?
  • How many email addresses will you need to be associated with your domain name?
  • How easy do you need it to be to upload files or connect via Telnet?
  • What kind of server-side scripts do you think you may be using?
  • How many databases will you need to create?
  • Do you need to keep track of your web visitors?
  • Will you need any special security, such as for eCommerce transactions?
  • How likely are you to need 24/7 tech support?
  • Will you need a site control panel which is easy-to-use and powerful?

Site Management: click on the image below for a larger version.
site manager

Free Web Hosts

Free web hosting exists, but usually with these sore points:

  • Ad banners which do not generate any money for you as the content creator.
  • Unreliability and unpredictability.
  • Narrow usage limits.
  • Limited technical support.
  • Difficult uploads.

Domain Names

Choosing a Name
  • This can take a lot of thought and research.
  • It can be one of the most important decisions you make for your site, and many businesses choose a domain name before deciding on the name of the business.
  • Most really great, simple names are already registered and will be for a long time. You have to get really clever and specific.
  • Google serach not only content on pages, but folder, file, and domain names when calculating your site's relevance for various search terms.
  • Avoid these mistakes in creating your domain name:
    • Using dashes, as it is very hard for people to remember.
    • Using phrases where words make unintentional words when run together. (Is http://bobateahouseinc.com for Bob Ate a House, Inc.?)
    • Names that do not correspond with your business/entity name.
    • Using anything but .com as the top-level domain for businesses, which is also very hard for people to remember.
  • A great tool for brainstorming domain names is instantdomainsearch.com.
  • Web hosts also have tools which allow you to search for available domain names, and they often make suggestions for alternate phrases.
Registering Your Domain Name
  • As you have learned, having a domain name and having a web host site are two different requirements to having a website online.
  • Domain names are registered one year at a time. You may pay for many years all at once to save money or time.
  • You don't own a domain name. You only "lease" it from ICANN (in most cases.)
  • You might register your domain name through the same company which hosts your site—in fact, sometimes one free domain name comes with your hosting page.
  • On the other hand, you may choose to register all your domain names through one location because of price, ease of management, or some other reason.

Domain Name Management: click on the image below for a larger version.
domain name management'

Transferring Files

Browser-Based Uploading

Not very convenient, and sometimes requires that you upload one file at a time.

Browser-Based Uploading: click on the image below for a larger version.
file manager

FTP
  • File Transfer Protocol is how most professional web designers upload and download files to/from their sites.
  • FTP utility can be found in many standalone programs, some free and some not.
  • Dreamweaver and other site creation programs have an FTP utility embedded.
  • For FTP to work, you need three pieces of information from your web host:
    • Username
    • Password
    • Root directory path
  • When you create a site definition in Dreamweaver, it can include the FTP settings.

File Transfer Protocol settings in Dreamweaver CS5. Click on the image below for a larger version.
Dreamweaver FTP settings

Dropbox go to eCompanion

Upload the following by midnight of our next class day:

Week Assignment File Name
3 Wireframes wireframes.zip
Sitemap sitemap.xxx
Storyboard storyboard.xxx
Mood Board moodboard.xxx

Assignment Details

Wireframes

Create three wireframes for the home page of your final project web site. You may create them by hand or in the software of your choice. If you hand-draw them, please scan them in so you have digital files to upload. Print out a few copies of one of the templates provided at the sites linked to the left under Wireframing Resources.

Use a grid to organize your layout. Explore a variety of layouts for your page content areas. Drawing several wireframes will allow you to rule out less ideal layouts before you begin more complex drawings.

See Preproduction: Wireframes to the left.

Site Map

Create a site map for your final project web site. You may create it by hand or in the software of your choice. If you hand-draw it, please scan it in so you have digital files to upload.

See Preproduction: Site Map to the left.

Mood Board

Create a mood board for the home page of your final project web site. You may create it by hand or in the software of your choice. If you hand-create it, please scan it in or photograph it so you have a digital file to upload.

Include the following:

  • One or more patterns or textures
  • Color palette
  • Typography
  • Imagery that is similar to what will be in the final design, or is the actual imagery to be used

See Preproduction: Mood Boards to the left.

Storyboard

Create a storyboard for the home page of your final project web site. You may create it by hand or in the software of your choice. If you hand-draw it, please scan it in so you have a digital file to upload.

See Preproduction: Storyboards to the left.