Layout Standards & Techniques

Nick FinckWebmaster Jam SessionSaturday, September 23rd, 2006

How Outdated?

2

Pop Quiz!

Some Pain

4

Overview

• Interaction DesignHow the page and site will interact and function

• Information ArchitectureHow the page and site will be structured and organized

• Visual DesignHow the page will visually be laid out and appear

5

Layout from the standpoint of:

Content is King“When your target market gets what they need from your words, you earn their trust and gain credibility.” — Meryl Evans

7

Content

• What content already exists?Can you repurpose exiting product and service descriptions?

• What content will need to be written?No, you can’t use your 5-year old corporate brochure content for your web site.

• Who will write this content? Chances are someone internally who is familiar with your business will have to give a first stab at a draft.

• Who will edit this content? Yes, you will need to edit it, not just spell check it

• How will this content be organized? This is where the structure begins.

8

Things to ask yourself:

Content

• A (somewhat) simple spreadsheetEach row is a different page of content, each column is a different aspect of that content, some examples are as follows:

• The Title and LocationEach page should be listed by title and URL

• Type and KeywordsIt’s a good idea to start thinking ahead and organizing the information by the type of content it is and what keywords it should reference.

• Owner and MaintainerEach page should have an owner and maintainer, sometimes there can be an author which could be separate from owner.

9

Content Inventory

Content

10

What goes on the page?

“Tell the story of the page and lay out its design goals, without actually showing the form of the page.” — D. Keith Robinson

12

The Page

• What type of content will be displayed on this page?Large photos, lots of text, form elements, etc.

• What is the key information that the user will see on this page?Intro text, calls to action, logo, dynamic info, etc.

• What is the priority of that information on this page?Must be on the page, nice to have on the page, etc.

• What can the user do from this page? Search, browse, register, download, checkout, etc.

13

Things to ask yourself:

The Page

• One PDD page for each kind of pagehome page, category index page, content page, etc.

• Information grouped by priorityHigh priority - Things that are essential to the page.Middle priority - Things that are suggested for the page.Low priority - Thing that would be good, but aren’t needed on the page.

• Page goals and overview Some general information about the function and goals for the page.

14

Page Description Diagrams

The Page

15

Types of Information“Information is the conduit of life, from informing about basic needs to relaying understanding of brand in luxury commerce” — Thomas Vander Wal

17

Types of Information

• What types of information are needed?News, blog post, case study, CTAs, contact form, etc.

• How much of the page will those types of information take up?The majority of the page, smaller than the main area, etc.

• Where should the various types of information go on the page?Dead center, top left, top right, bottom, top center, etc.

18

Things to ask yourself:

Types of Information

• One zone for each type of informationNews, blog, intro text, navigation, search, CTAs, etc.

• Shows proportions of informationMain content, secondary content, navigational elements, etc.

• Starts to communicate grid design Two column, three column, header, footer, etc.

19

Zone Diagrams

Types of Information

20

Types of Information

21

Navigation

Branding

Search

Featured

Call to Action

Index

News

Types of Information

22

Navigation

Branding

Search

Featured

Call to Action

Index

News

Types of Information

23

Navigation

Branding

Search

Featured

Call to Action

Index

News

Organization of Information

“Without structure and hierarchy your pages will be flat blobs of content goo.” — Gene Smith

25

Organization of Information

• How should the site be structured?What information is related to other information on the site? Can this information be organized in a hierarchy?

• How will users navigate the site? How will they get to the home page, a parent page, or a related page? How will they get back? Can they search?

• How will the users know where they are? If a user comes in on a page deep in the site, how will they know where they are at under the hierarchy of the site?

• Are there multiple ways to organize the information on the site? What are the facets in which users expect to find the content?

26

Things to ask yourself:

Organization of Information

• A series of boxes showing structureA wireframe is nothing more than a way to communicate page and site structure through diagrams (blueprints)

• Actual content is used where possible Finalized content and labels are to be used on the page, this helps communicate how the page will read.

• Navigation is highlighted to show state Each navigable item should have a on and off state

• Annotations for detailed informationWhen it is not possible to communicate the architecture of the page by the diagram alone, annotations are used

27

Wireframes

Organization of Information

28

Organization of Information

29

The Grid System“Well designed grid systems can make your designs not only more beautiful and legible, but more usable.” — Mark Boulton

31

The Grid System

• How modular should the design be?Will the home page always have 2 CTAs or will there be more?

• How flexible should the content areas be?Will the content always be that length or will it change?

• Where does the eye go when the user loads the page?What does the user first see? Is this what is most important?

• What is the flow of the page?How does the user read the page? What should be read first, second, etc.?

32

Things to ask yourself:

The Grid System

• Grid design defines the flow of the pageThe comp is often chunked into a grid layout.

• Grids also define the page structureThis is precisely how the page composition will be.

• Grids often stick to a pattern1 main area with 3 sub areas. A primary area and a secondary area followed by 4 sub areas. 3 column. 2 column, 1 column.

• The have specific measurements and aspect ratios1:3 for primary area and 1:4 for secondary areas. 130px for left column, 490px for middle column, and 130px for right column.

33

Grid Design

The Grid System

34

The Grid System

35

The Design“Artistic talent and creativity can certainly aid and enhance the final result, but design, in particular, generally follows a process.” — Doug Bowman

37

The Design

• What “feeling” do you want to communicate to the customers? Edgy, high-tech, modern? Simple, clean, elegant? Etc.

• What defines your brand?Quality? Efficient? Low cost? High-end? Etc.

• What is the most important thing for the customer to see or read? The company story? The product line? The sign up form? Etc.

• How often do you plan on changing the design? Never? Once a year? Seasonal with the shopping seasons?

38

Things to ask yourself:

The Design

• It’s really just an imageOne graphic that will eventually be presented to the client.

• Often created in a graphical design application?This makes it relatively easy to manipulate and change when the client requests changes.

• Communicates all aspects of designColor palette, typography, composition, whitespace, etc.

• Often requires iterations and versions Comps are typically designed with 1 to 3 versions of the same page and often go though several rounds of revisions.

39

Design Comps

The Design

40

The Design

41

What is Real“Getting Real is about skipping all the stuff that represents real (charts, graphs, boxes, arrows, schematics, wireframes, etc.) and actually building the real thing” — Jason Fried

43

What Is Real

• How many steps does it take to go from concept to working product? We just covered 6 different deliverables. Most use about 3.

• What is the shelf life of those deliverables?They are done when that phase is done.

• What value do they have vs. just building the real thing?This is debatable but often the value is really only one aspect of a larger picture (the design, the interaction, the layout, etc).

44

Things to ask yourself:

What Is Real

• HTML prototypes are the real thingNothing gets precise feedback than showing a client the real final product.

• The HTML prototype can be taken through all of the phases we outlinedcontent > zones > wireframes > designs > grid > Etc.

• They show actual interaction?Clients can click and see how it responds.

• There is little to no question about what the final product will be likeThis is the final product.

45

HTML Prototypes

What Is Real

46

What Is Real

47

What Is Real

48

What Is Real

49

What Is Real

50

What Is Real

51

What Is Real

52

What Is Real

53

Thank YouThis presentation is available athttp://nickfinck.com/presentations/jamsession/layout.pdf

Feel free to email me follow-up questions atnick@nickfinck.com

Content

Content ResourcesThe Content Inventory: Roadmap to a Successful CMS Implementationby Kassia Krozser

Doing a Content Inventory (Or, A Mind-Numbingly Detailed Odyssey Through Your Web Site)by Jeff Veen

Taking a Content Inventoryby Donna Maurer

55

The Page

PDD ResourcesPage Description Diagramsby D. Keith Robinson

Where the Wireframes Are: Special Deliverable #3by Dan Brown

56

Types of Information

Zone Diagram ResourcesDeveloping Schemas for the Location of Common Web ObjectsBy Michael Bernard

Examining User Expectations for the Location of Common E-Commerce Web ObjectsBy Michael Bernard

57

Organization of Information

Wireframe ResourcesThe Zen of Wireframesby Gene Smith

Getting IA Done: Part I and Part IIby Joshua Kaufman

The Devil's in the Wireframesby Liz Danzico

Visio Stencils for Information Architectsby Nick Finck

58

The Grid System

Grid ResourcesFive Simple Steps to designing grid systemsby Mark Boulton

CSS Grid Calculator by Graham White

In Progress: Site DesignCameron Moll & Jason Santa Maria

59

The Design

Design ResourcesA Design Process Revealedby Doug Bowman

Web Design Process by Ben Hunt

Multiple Design Directions by Doug Bowman

60

Getting Real

HTML Prototype ResourcesRecyclable Information Architectureby Nick Finck

Understanding the Limited Value of Wireframesby Garrett Dimon

How do we do HTML wireframes? by Gene Smith

Practical Applications: Visio or HTML for Wireframes by Jeff Gothelf

HTML Wireframes and Prototypes: All Gain and No Pain by Julie Stanford

61