layout standards and techniques
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.TRANSCRIPT
![Page 1: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/1.jpg)
Layout Standards & Techniques
Nick FinckWebmaster Jam SessionSaturday, September 23rd, 2006
![Page 2: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/2.jpg)
How Outdated?
2
![Page 3: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/3.jpg)
Pop Quiz!
![Page 4: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/4.jpg)
Some Pain
4
![Page 5: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/5.jpg)
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:
![Page 6: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/6.jpg)
Content is King“When your target market gets what they need from your words, you earn their trust and gain credibility.” — Meryl Evans
![Page 7: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/7.jpg)
7
![Page 8: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/8.jpg)
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:
![Page 9: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/9.jpg)
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
![Page 10: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/10.jpg)
Content
10
![Page 11: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/11.jpg)
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
![Page 12: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/12.jpg)
12
![Page 13: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/13.jpg)
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:
![Page 14: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/14.jpg)
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
![Page 15: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/15.jpg)
The Page
15
![Page 16: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/16.jpg)
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
![Page 17: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/17.jpg)
17
![Page 18: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/18.jpg)
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:
![Page 19: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/19.jpg)
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
![Page 20: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/20.jpg)
Types of Information
20
![Page 21: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/21.jpg)
Types of Information
21
Navigation
Branding
Search
Featured
Call to Action
Index
News
![Page 22: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/22.jpg)
Types of Information
22
Navigation
Branding
Search
Featured
Call to Action
Index
News
![Page 23: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/23.jpg)
Types of Information
23
Navigation
Branding
Search
Featured
Call to Action
Index
News
![Page 24: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/24.jpg)
Organization of Information
“Without structure and hierarchy your pages will be flat blobs of content goo.” — Gene Smith
![Page 25: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/25.jpg)
25
![Page 26: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/26.jpg)
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:
![Page 27: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/27.jpg)
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
![Page 28: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/28.jpg)
Organization of Information
28
![Page 29: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/29.jpg)
Organization of Information
29
![Page 30: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/30.jpg)
The Grid System“Well designed grid systems can make your designs not only more beautiful and legible, but more usable.” — Mark Boulton
![Page 31: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/31.jpg)
31
![Page 32: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/32.jpg)
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:
![Page 33: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/33.jpg)
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
![Page 34: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/34.jpg)
The Grid System
34
![Page 35: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/35.jpg)
The Grid System
35
![Page 36: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/36.jpg)
The Design“Artistic talent and creativity can certainly aid and enhance the final result, but design, in particular, generally follows a process.” — Doug Bowman
![Page 37: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/37.jpg)
37
![Page 38: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/38.jpg)
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:
![Page 39: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/39.jpg)
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
![Page 40: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/40.jpg)
The Design
40
![Page 41: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/41.jpg)
The Design
41
![Page 42: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/42.jpg)
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
![Page 43: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/43.jpg)
43
![Page 44: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/44.jpg)
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:
![Page 45: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/45.jpg)
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
![Page 46: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/46.jpg)
What Is Real
46
![Page 47: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/47.jpg)
What Is Real
47
![Page 48: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/48.jpg)
What Is Real
48
![Page 49: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/49.jpg)
What Is Real
49
![Page 50: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/50.jpg)
What Is Real
50
![Page 51: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/51.jpg)
What Is Real
51
![Page 52: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/52.jpg)
What Is Real
52
![Page 53: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/53.jpg)
What Is Real
53
![Page 54: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/54.jpg)
Thank YouThis presentation is available athttp://nickfinck.com/presentations/jamsession/layout.pdf
Feel free to email me follow-up questions [email protected]
![Page 55: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/55.jpg)
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
![Page 56: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/56.jpg)
The Page
PDD ResourcesPage Description Diagramsby D. Keith Robinson
Where the Wireframes Are: Special Deliverable #3by Dan Brown
56
![Page 57: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/57.jpg)
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
![Page 58: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/58.jpg)
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
![Page 59: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/59.jpg)
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
![Page 60: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/60.jpg)
The Design
Design ResourcesA Design Process Revealedby Doug Bowman
Web Design Process by Ben Hunt
Multiple Design Directions by Doug Bowman
60
![Page 61: Layout Standards and Techniques](https://reader034.vdocument.in/reader034/viewer/2022042606/54c7ecfe4a795921328b4611/html5/thumbnails/61.jpg)
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