Dawn Pedersen

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.

Audience 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.

Audience 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.

Audience 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:

Audience 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.

Visual Metaphor 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.

Visual Metaphor 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.

Visual Metaphor 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?

Visual Metaphor jobs.webdesignerwall.com

Visual Metaphor clubpenguin.com

Visual Metaphor silverbackapp.com

Visual Metaphor seriouseats.com

Visual Metaphor themorningnews.org

Visual Metaphor Resources: Visual Metaphors: 7 rockstar examples on the web Stock Visual Metaphors

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.

Brainstorming a Visual Metaphor 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.

Brainstorming a Visual Metaphor 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.

Brainstorming a Visual Metaphor 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:

Brainstorming a Visual Metaphor 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.kuler.adobe.com colourlovers.com

Brainstorming a Visual Metaphor 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.

Brainstorming a Visual Metaphor 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.

Shaping Your Visual Metaphor with Page Elements 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.

Shaping Your Visual Metaphor with Page Elements 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.

Shaping Your Visual Metaphor with Page Elements 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.

Shaping Your Visual Metaphor with Page Elements Subnavigation This element displays content that lies under a main navigational item. This is usually only needed for larger sites and more complex content.

Shaping Your Visual Metaphor with Page Elements 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.

Shaping Your Visual Metaphor with Page Elements 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.

Shaping Your Visual Metaphor with Page Elements 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.

Shaping Your Visual Metaphor with Page Elements 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.

Wireframes Once you've decided upon all the content areas that are appropriate for your site, and what the site's theme and visual metaphor will be, 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 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 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:

Wireframes 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.

Wireframes 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 the page elements neatly, and label each element. Drawing several wireframes will allow you to rule out less ideal layouts before you begin more complex drawings.

Wireframes Sample Wireframe

Wireframes Sample Wireframe

Wireframes Sample Wireframe

Wireframes Sample Wireframe

Wireframes Sample Wireframe

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 deign 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.

Storyboards 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.

Storyboards 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.

Storyboards 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.

Storyboards 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.

Storyboards Sample Storyboard

Storyboards Sample Storyboard