Upload
nick-finck
View
116
Download
1
Embed Size (px)
DESCRIPTION
This a presentation I did for the Webmaster Jam Session 20066 conference in Dallas. I walk through the process of building a website from concept to finished product. This includes IA, design, markup and interaction.
Citation preview
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 [email protected]
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