Layout Standards & Techniques. Nick Finck Webmaster Jam Session Saturday, September 23rd, 2006

Size: px

Start display at page:

Download "Layout Standards & Techniques. Nick Finck Webmaster Jam Session Saturday, September 23rd, 2006"

Barrie Jackson
6 years ago
Views:

1 Layout Standards & Techniques Nick Finck Webmaster Jam Session Saturday, September 23rd, 2006

2 How Outdated? 2

3 Pop Quiz!

4 Some Pain 4

5 Layout from the standpoint of: Interaction Design How the page and site will interact and function Information Architecture How the page and site will be structured and organized Visual Design How the page will visually be laid out and appear Overview 5

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

7 7

8 Things to ask yourself: 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. Content 8

9 Content Inventory A (somewhat) simple spreadsheet Each row is a different page of content, each column is a different aspect of that content, some examples are as follows: The Title and Location Each page should be listed by title and URL Type and Keywords It 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 Maintainer Each page should have an owner and maintainer, sometimes there can be an author which could be separate from owner. Content 9

10 Content 10

11 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 12

13 Things to ask yourself: 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. The Page 13

14 Page Description Diagrams One PDD page for each kind of page home page, category index page, content page, etc. Information grouped by priority High 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. The Page 14

15 The Page 15

16 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 17

18 Things to ask yourself: 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

19 Zone Diagrams Types of Information One zone for each type of information News, blog, intro text, navigation, search, CTAs, etc. Shows proportions of information Main content, secondary content, navigational elements, etc. Starts to communicate grid design Two column, three column, header, footer, etc. 19

20 Types of Information 20

21 Types of Information Navigation Branding Search Featured Call to Action Index News 21

22 Types of Information Navigation Branding Search Featured Call to Action Index News 22

23 Types of Information Navigation Branding Search Featured Call to Action Index News 23

24 Organization of Information Without structure and hierarchy your pages will be flat blobs of content goo. Gene Smith

25 25

26 Things to ask yourself: 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

27 Wireframes Organization of Information A series of boxes showing structure A 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 information When it is not possible to communicate the architecture of the page by the diagram alone, annotations are used 27

28 Organization of Information 28

29 Organization of Information 29

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

31 31

32 Things to ask yourself: 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

33 Grid Design The Grid System Grid design defines the flow of the page The comp is often chunked into a grid layout. Grids also define the page structure This is precisely how the page composition will be. Grids often stick to a pattern 1 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 ratios 1:3 for primary area and 1:4 for secondary areas. 130px for left column, 490px for middle column, and 130px for right column. 33

34 The Grid System 34

35 The Grid System 35

36 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 37

38 Things to ask yourself: 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? The Design 38

39 Design Comps It s really just an image One 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 design Color 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. The Design 39

40 The Design 40

41 The Design 41

42 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 43

44 Things to ask yourself: 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). What Is Real 44

45 HTML Prototypes HTML prototypes are the real thing Nothing gets precise feedback than showing a client the real final product. The HTML prototype can be taken through all of the phases we outlined content > 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 like This is the final product. What Is Real 45

46 What Is Real 46

47 What Is Real 47

48 What Is Real 48

49 What Is Real 49

50 What Is Real 50

51 What Is Real 51

52 What Is Real 52

53 What Is Real 53

54 Thank You This presentation is available at Feel free to me follow-up questions at

55 Content Content Resources The Content Inventory: Roadmap to a Successful CMS Implementation by Kassia Krozser Doing a Content Inventory (Or, A Mind-Numbingly Detailed Odyssey Through Your Web Site) by Jeff Veen Taking a Content Inventory by Donna Maurer 55

56 The Page PDD Resources Page Description Diagrams by D. Keith Robinson Where the Wireframes Are: Special Deliverable #3 by Dan Brown 56

57 Zone Diagram Resources Developing Schemas for the Location of Common Web Objects By Michael Bernard Types of Information Examining User Expectations for the Location of Common E- Commerce Web Objects By Michael Bernard 57

58 Organization of Information Wireframe Resources The Zen of Wireframes by Gene Smith Getting IA Done: Part I and Part II by Joshua Kaufman The Devil's in the Wireframes by Liz Danzico Visio Stencils for Information Architects by Nick Finck 58

59 The Grid System Grid Resources Five Simple Steps to designing grid systems by Mark Boulton CSS Grid Calculator by Graham White In Progress: Site Design Cameron Moll & Jason Santa Maria 59

60 The Design Design Resources A Design Process Revealed by Doug Bowman Web Design Process by Ben Hunt Multiple Design Directions by Doug Bowman 60

61 Getting Real HTML Prototype Resources Recyclable Information Architecture by Nick Finck Understanding the Limited Value of Wireframes by 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

What is Standard APEX? TOOLBOX FLAT DESIGN CARTOON PEOPLE

What is Standard APEX? TOOLBOX FLAT DESIGN CARTOON PEOPLE About me Freelancer since 2010 Consulting and development Oracle databases APEX BI Blog: APEX-AT-WORK Twitter: @tobias_arnhold - Oracle ACE Associate