Slide 1

Planning andPre-ProductionDawn PedersenAudienceEvery 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.

AudienceIn 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.AudienceYou want to use every technique possible to: bring users to your sitehelp them find what they're looking formake sure they have a rewarding experience, and keep them coming back.

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

AudienceWhat 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 MetaphorOne 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 MetaphorThe word theme is used to refer to all kinds of different things in the world of web designwhich can be kind of confusing. For our purposes, a theme is your site's purpose and content. Visual MetaphorSo, 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 MetaphorTake 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 Metaphorjobs.webdesignerwall.com

Visual Metaphorclubpenguin.com

Visual Metaphorsilverbackapp.com

Visual Metaphorseriouseats.com

Visual Metaphorthemorningnews.org

Visual MetaphorResources:Visual Metaphors: 7 rockstar examples on the webStock Visual Metaphors

Brainstorming aVisual MetaphorFor 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 aVisual MetaphorDeveloping a visual metaphor is really all about brainstormingspending some time to really think about your client's content, audience, and what visual elements they want to see on the page.

Brainstorming aVisual MetaphorAny remember one thing: don't discredit any ideas or concepts you come up with. Just write them all downyou can refine things later.

Brainstorming aVisual MetaphorColor, 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 aVisual MetaphorChoose some color palettesPick 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.

Brainstorming aVisual MetaphorDesign layouts based on contentMake 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 aVisual MetaphorUse visual elements to reinforce the themeThe 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 ElementsOnce 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 lotit dictates what can and can't appear on a given page.Shaping Your Visual Metaphor with Page ElementsFor 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 ElementsSite identityThis 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 ElementsMain navigationThis 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 ElementsSubnavigationThis 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 ElementsBody contentThis 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 ElementsWhite spaceAlso 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 ElementsFooterThis 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 ElementsSidebarsThese elements can hold everything from link lists to extra body content. They can also be useful for ancillary navigation and archive links for blogs.

WireframesOnce 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.WireframesWireframes 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.

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

WireframesDecide on which page elements will be included.Draw a rectangle on your paper which approximates the proportions of a browser window.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.WireframesLabel each of the page elements. Instead of drawing, you may use software insteadbut 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.WireframesSample Wireframe

WireframesSample Wireframe

WireframesSample Wireframe

WireframesSample Wireframe

WireframesSample Wireframe

StoryboardsClients 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 possiblewithout getting into code.StoryboardsInstead 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.StoryboardsHow to create a storyboard:Again, draw a rectangle on your paper which approximates the proportions of a browser window.Select one of your successful wireframe layouts.Drawing cleanly and carefully, outline the major page elements.

StoryboardsUse horizontal lines or the label "text appears here" to indicate where text will go. Use boxes with crossed diagonal lines or simple outlines to indicate image placement. Sketch in logos, icons, headings, and navigation buttons. Add color with colored pencils, crayons or markers.

StoryboardsAllow your client to draw right on your storyboardencourage 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.StoryboardsSample Storyboard

StoryboardsSample Storyboard