Marketplace

Marketplace.org - Key Elements Style Guide and UX

WORKING VERSION 2 - 7/18/11

INTRODUCTION

Summary The Marketplace.org redesign seeks to refine and modernize the current (2011) site presence while adding features consistent with the direction of a more engaging and interactive user experience. Overall, site elements will combine to form a simple, yet feature rich, web presence. Color and Typography are to be used in conjunction with creative content and layout solutions to provide clarity of navigation and overall ease-of-use. In that vein, the goal with this style guide is to implement rules and standards to adhere to for future site iterations. With few exceptions (to be discussed in the following pages) designers/developers should follow the guidelines herein as closely as possible to ensure consistency for any site-work following this latest 2011 Drupal deployment. Layout & Composition - Wireframe Units The Phase I rollout of Marketplace.org consists (as of 7/11/2011) of 12 distinct layout iterations, based on the 960 grid system, for the following site page templates - Homepage, Topic Page, Collection Page, General List Page, Show Landing Page, Episode Page, Story/Segment Page, Form Page, Question Page, Personal Bio Page, Callout List Page and Site Map Page - with 2 additional pages for form administration and 3 pages for registration and sign-up. All templates consist of both a standard header and footer with main content in between the two elements. A Show Navigation will provide quick access to Marketplace Radio Show Content and will appear at the top of all pages. A sidebar will provide access to affiliated and/or promotional content for all pages and will access dynamic content based on the current user location. Please refer to wireframes (Master_-_FINAL_6-5-2011.pdf) for more detailed information.

Case Studies Preliminary research was conducted from a variety of web sources to determine an overall feel to best suit this recent site design. Among the sites researched extensively for case study were studio360.org, good.is, nytimes.com, wsj.com, thedailybeast.com, and guardian.co.uk, to name a few. That said, the samples used within are compiled from this research and are an effort to reflect a possible look and feel of future site identity. All samples within, therefore, should be considered purely illustrative, at this point, and for reference only. These samples in no way reflect end design result.

Introduction

LAYOUT AND COMPOSITION

Layout and Composition

LAYOUT AND COMPOSITION - THE 960 GRID/MAIN CONTENT OVERVIEW

Grid Introduction The 12-Column 960 grid will be used as a layout guide for all assets for the new site iteration, and should be followed for any design/development going forward. Current wireframes support a dynamic 620 pixel main content area with a static 300 pixel sidebar. The main content area may be broken down into subsections defined within the wireframes. A rough vertical of asset elements is also available on page 7.

The majority of the content should reside within a 940 pixel space. Main content and sidebar content should be separated by a 20 pixel gutter, with both content blocks filling out the remaining 920 pixels. In cases where blocks are non-white, Color treatment and accent overflow may be used within the 10 pixels to the left of the main content block. The right 10 pixels of the main content block will be void of content with exception of the Donate Tag.

620 pixel main column. 400 pixel left main column. 300 pixel sidebar column.

200 pixel right main column. 1000 pixel border content area.

Grid Overflow All curated content (images, text) should remain within the 940 pixel boundary with accents (bars, lines, etc.) overflowing the 10 pixels outside of the grid (as shown to the right).

Layout and Composition - The 960 Grid/Grid Main Content

LAYOUT AND COMPOSITION - THE 960 GRID/HEADER AND FOOTER

Grid Details The Site Header has individual criteria that should be followed (illustrated below). Footer treatment should comply with 940 pixel content borders.

60 pixel Show Nav Height.

170 pixel Main Header area Height.

30 pixels should separate border (if any) from main navigation content. Ideal 620 pixel width for main topic navigation. Site Map and Donate Modules should be easily distinguished from navigation. Navigation, as with Main Content area, should reside within 940 pixel main content border.

Color key should lie in 10 pixel gutter to left of main content.

Layout and Composition - The 960 Grid/Header and Footer

LAYOUT AND COMPOSITION - THE 960 GRID/OVERFLOW

Overflow Properties The 10 pixels to the left of the 940 pixel width will be populated by color accents, title bars, colored blocks and footer lines (refer to redmine PNG uploads for more clarification). In essence, the list blocks and comment blocks are the ONLY blocks that will not occupy this 10 pixel column. This is illustrated below with Home Page, Collection Page and Show Landing Page Scenarios.

Overflow - HOME Since there are no list blocks, all blocks will overflow the 10 px. width.

Overflow - COLLECTION PAGE This page is mainly list blocks and, as such, only content that are NOT list blocks will overflow to 10 px width.

Overflow - SHOW PAGE This page has no list blocks, hence, all content will overflow the 10 px width.

Accents and Title bars will occupy the remaining 10 pixels.

List blocks here WILL NOT extend past the 940 px. area.

Layout and Composition - The 960 Grid/Grid Main Content

LAYOUT AND COMPOSITION - THE 960 GRID/VERTICAL

The 960 12-column Grid System, Element Overview 60px. 20px. 20px.

1000px. 960px. 940px. SHOW NAVIGATION HEADER MAIN NAVIGATION QUICKLINKS NAVIGATION 3-COLUMN SLIDESHOW 2-COLUMN SLIDESHOW NUMBERS BLOCK LIST BLOCK SPECIAL COLLECTION TEASERS SHOW ARCHIVE NAVIGATOR LINKS FROM THIS SHOW PLAYLIST MODULE COMMENTS BLOCK HOME PAGE STORY LIST BLOCKS PERSONAL BIO PHOTO STORY PHOTO BLOCK 112X112 H.P. COLLECTIONS SIDEBAR CONTENT

The diagram to the right gives an Exploded view of all pertinent assets within the site and their placement within the grid. White space between vertical Blue lines represents a 10 pixel width, Pink space represents a 60 pixel width. All sidebar content will occupy the same horizontal space, hence, one visual representation for all side bar assets.

FOOTER TOOLBAR FOOTER

Layout and Composition - The 960 Grid/Vertical

LAYOUT AND COMPOSITION - BROWSER VIEW AND FIT - TOP CONTENT/HEADER

How It All Fits The 1000 pixels will reside within the center of the browser window, with ONLY the show navigation feature extending the width of the browser window. As featured below, a one pixel border will surround all content below the header. The header, itself, will receive NO surrounding border.

1000px.

Layout and Composition - Browser Window Wrap

LAYOUT AND COMPOSITION - BROWSER VIEW AND FIT - LOWER CONTENT/FOOTER

How It All Fits The 1000 pixels will reside within the center of the browser window with all lower content residing WITHIN the 1000 px. boundary. As featured below, a one pixel border will surround all content below the header.

1000px.

Layout and Composition - Browser Window Wrap

BLOCK TREATMENT

Block Treatment

10

MAIN CONTENT REUSABLE BLOCKS* BREAKDOWN

Column configurations

*Blocks Not to Scale

Overall site layout currently consists of 8 distinct main content blocks and 5 distinct sidebar blocks (in addition to a number of site-wide shared assets). These blocks have been created for reuse throughout the site and have been determined to provide the flexibility necessary for any future content additions. Main blocks are shown below with sidebar blocks on the following page.

List Blocks

Horizontal Teaser Block

1.

List Block alternatives: With Photo, Without Photo, One Line list with date, Title List. Lists to exist on multiple pages.

5.

Scrollable Widget-type block with multiple assets. Hover over features full-image transparency revealing additional teaser description. Exists on Topic Page.

Collection Block

6.

Hover over features partial image transparency revealing additional teaser description. Exists on Home Page and Show Landing Page.

2.

Call-Out List Block Features Show Title, Segment Title, Summary and Type. Exists on Callout Page Only.

7.

Story Teaser Block Hover over features partial image transparency revealing additional teaser description. Exists on Home Page and Show Landing Page.

3.

Author Introduction Block Shown with optional author image. Exists on Story page. Story Image Block Block features CLICK TO ENLARGE capability for larger image access. Exists on Story Page.

8. 4.
Story Block Includes Main story with description and comment count with list of related stories following. Exists on Home page and Show Landing Page.

Block Treatment - Main Content Block Breakdown

11

SIDEBAR REUSABLE BLOCKS* BREAKDOWN

Sidebar Column configurations

*Blocks Not to Scale

The sidebar recycles a total of 6 content blocks, as shown below. Additional sidebar blocks (i.e. ad blocks) have not been shown since these will not be re-usable, per se, and will always exist in the same spot. That said, ad units may be considered an additional block if placement is customizable. Multiple instances and scopes of some blocks (the Trending Block and the Popular/ Recent Comments Block) will exist throughout the site. A Custom Block, not shown here, will exist to handle additional widget-type content and will be design in-house following existing color and typographical specs.

Trending Block

PIN Block

1.
Trending Block to be used on multiple pages as a gauge of popular and Most Commented content. To be presented as a Top 10 type feature. Exists on Homepage, Topic Page, Collection Page, General List Page, Episode Page, Story Page, Question Page, Personal Bio Page

4.
Pin Block will have multiple functions and will serve as a community visual presence for site pages. 1. Submit Button - will allow users to submit questions to Getting Personal Blog. Future iterations will see addition of submit options to other site pages. Clicking submit will take user to registration page if not logged in. If not registered, user will have option to register on same page. 2. Facebook Fan Box with list of regstered users. 3. PIN Sign-Up box with PIN-related questions following. 4. Link to additional questions from the PIN Network. Exists on Homepage, Show Landing Page, Episode Page and Callout List Page.

Popular/Recent Comments Block

2.

Buzzworthy Block will provide specialized content limited to the scope of the page focus. In the case of List page presence, module will inherit a default, site-wide scope. Exists on Homepage, Topic page, collection page, general list pages, Show Landing Page, Episode Page and Callout List Page. Support Block

5.

Support Block to provide a list of supporters by department. Will include links to supporter pages. Exists on Topic page, General list pages Story Page, Question Page.

Calendar Block

3.

Calendar Block to provide access to shows and episode content by allowing calendar-click access or PREV/NEXT access to additional months. Exists on Show Landing page and Episode Page only.

Related Content Block

6.

Related Content Block to allow access to related tags and stories relative to current site page. Exists on Story Page Only.

Block Treatment - Sidebar Content Block Breakdown

12

STRAY BLOCKS* BREAKDOWN

Column configurations Stray blocks can be placed throughout the site to add functionality to pages. Modules may be added to this list as functionality increases or changes. Tabs may or may not be interchangeable but will have color restrictions per page (as discussed below).

Tabs Tab text should show in a neutral grey. Active tab background will be white with inactive tabs inheriting the accenting topic color. May exist on multiple pages.

Share Block (Horizontal) Share Blocks allow access to common share features in addition to email and print capabilities. May exist on multiple pages.

Numbers Block Newsletter block will link to a newsletter form page with access to all Marketplace and APM newsletter email forms. Affixed to bottom of all pages at site launch.

Newsletter Block Newsletter block will link to a newsletter form page with access to all APM newsletter email forms. Affixed to bottom of all pages (EXCEPT ADMIN AND FORM PAGES) at site launch.

Custom Block Custom block will fit random sidebar content and will be restricted to 300 px width. Exists on Topic Page Only (As of Site Launch).

Block Treatment - Stray Block Breakdown

13

BLOCK FUNCTIONALITY

Spacing

14

BLOCK FUNCTIONALITY BREAKDOWN

Column configurations Stray blocks can be placed throughout the site to add functionality to pages. Modules may be added to this list as functionality increases or changes. Tabs may or may not be interchangeable but will have color restrictions per page (as discussed below).

Horizontal Teaser Block Color Circles will allow user to scroll through full image sets (i.e. four at a time in this example). Title of teaser will inherit secodary color when hovered-over. Hover-over features full-image transparency revealing additional teaser description. Arrows will exist over left-most and right-most images to allow user to scroll next or previous items on an individual basis.

Collection Teaser Block and Story Teaser Block Hover over features partial image transparency revealing additional teaser description.

Show Archive Navigator Date/Day/Year Pulldowns allow user to browse Episode segments. Input Text Box allows user to enter a keyword to search for a segment. Clickable (Linkable) Titles allow user to access segment/story page of related content. Play/Pause toggle allows user to play related audio of segment.

View Entire List links to a general-list page of all segments from an episode.

Playlist Links to Amazon/iTunes? individual song/album page.

Links to Amazon/iTunes? Artist page.

One-click link to buy-now cart or similar.

Block Functionality - Breakdown

15

BLOCK FUNCTIONALITY BREAKDOWN

Column configurations Stray blocks can be placed throughout the site to add functionality to pages. Modules may be added to this list as functionality increases or changes. Tabs may or may not be interchangeable but will have color restrictions per page (as discussed below).

Calendar Block Click to browse previous and next months within the year. Click on days to pull up a list page of segments from the selected episode of the current show page (may be useful if the show only takes place one day per week and viewers want to browse multiple episodes - optional for Phase 1). Click on a date to pull up a list page of segments from the selected episode of the current show page

Newsletter Block Newsletter block will link to a newsletter form page with access to all APM newsletter email forms. Pop-up will have an exposed subscribe tab on page-load revealing an image of the newsletters linking to a newsletter default page. A closing x button will allow the user to hide this window (if the container is manually selected and, hence, revealed.) Otherwise, the pop-up will be set to close on a 5-7 second timer from page-load.

PIN House Ad Block Submit button links to Registration Sign-In page if not signed in or Register page if not registered. If signed-in, link should direct to question form page. Links of registered fans.

Sign-Up Links links to Register page. 5 most recent questions submitted to the Getting Personal Collection.

Browse More Questions leads to a list page of question submitted to the Getting Personal page.

Block Functionality - Breakdown

16

SPACING

Spacing

17

PAGE BLOCK TEMPLATES

Spacing Requirements All blocks/assets/etc. should follow proper spacing guidelines between neighboring elements to ensure clean structure across the grid. That said, a 20 pixel HORIZONTAL gap between elements is ideal for proper grid fit. Furthest left blocks on a page should flush against their left border, with all other blocks following the 20px. gap spacing rule. Likewise, blocks should collapse to the left with the subtraction of image assets or other data, where applicable. VERTICAL spacing will vary depending on block content. Horizontal/Vertical specifics will be clairified below with examples on the following pages.

Horizontal Spacing Horizontal spacing will follow a site-wide 20 pixel rule, where blocks are separated by a 20 pixel gap. With the sidebar occupying the right-most content block (minus the 10 pixels of the donate tab), this leaves 640 pixels. With the 20 pixel rule-of-thumb, this leaves 620 pixels for usable content in addition to the sidebar block. Below, the numerous variations on the horizontal blockspacing theme... 2-Column Main (Scenario 2) Use: Biography Page

3-Column Main Use: Homepage and Show Landing

2-Column Main (Scenario 1) Use: Story Page

1-Column Main Use: General List Page, Callout Page, Question Page, Topic Page, Collection Page, Episode Page

1-Column Full Use: General List Page, Callout Page, Question Page, Topic Page, Collection Page, Episode Page

Spacing - Block Layout and Templates

18

FEATURE BLOCK SPACING/PADDING/MARGINS - INTERBLOCK MEASUREMENTS

Vertical Spacing Vertical spacing is less restricted and will follow loose guidelines according to block content. As such, the following pages will focus on individual block spacing and spell out alternate scenarios according to page relation. While this has been created for the purpose of initial site build, these guidelines may be used to establish further styling structure for future page builds.

List Block (with image) 25px.

Collection Block 15px.

List Block (no image) 25px.

Callout Block 25px.

15px. Story Teaser Block

Author Block 20px. Story Block 20px.

10px. 10px.

15px. 15px. 20px. Story Image Block 15px.

These measurements are based on the PNGs supplied to Palantir and should mirror, as closely as possible, the PNG measurements. Any discrepancies between these measurements and the supplied PNGs should follow PNG measurements first and foremost, WHERE POSSIBLE.

30px. 15px.

List Block 15px. 15px.

A NOTE ABOUT TITLE BAR PADDING AND SPACING ALL MAIN COLUMN TITLE BARS SHOULD BE OF EQUAL VERTICAL HEIGHT TO OTHER MAIN COLUMN TITLE BARS. EQUALLY, SIDEBAR TITLEBARS SHOULD FOLLOW THE SAME LOGIC.

15px. List Block 15px. 15px.

SAME HEIGHT

15px.

Spacing - Block Spacing/Padding/Margins

19

VERTICAL BLOCK SPACING - SCENARIO 1: HOME PAGE TEMPLATE (3 COL. INTRABLOCK)

The below measurements are based on the PNGs supplied to Palantir and should mirror, as closely as possible, the PNG measurements. Any discrepancies between these measurements and the supplied PNGs should follow PNG measurements first and foremost, WHERE POSSIBLE. A 20 pixel vertical margin will separate the majority of MAIN CONTENT (nonsidebar)blocks. As seen to the right, the home page can be broken down with the following structure...
20px. margin

A 20px margin will exist between header contents and the main slideshow

20px. margin

A 20 pixel margin will exist between the main slideshow and the Story List/ Collection blocks. Within these blocks the A. Story List blocks will have 20 px. gaps between the title bar and the content. B. Collection Blocks will have a 10px. gap between the bottom of the image and the dividing line.

1 px. width ALL lines

20px. margin

Story List Block and Special Collection teasers should line up vertically.

30px. margin

10px. margin

A 20 pixel margin will exist between the Story List/Collection blocks and the Numbers block.

20px. margin

20px. margin

A 20 pixel margin will exist between the Numbers block and the Story Teaser blocks.

Story Teaser blocks will be separated from each other by a 50px gap.
50px. margin

Sidebar measurements to remain at a 30px gap, between blocks, throughout.

Spacing - Scenario 1: Padding/Blocks/Margins

20

VERTICAL BLOCK SPACING - SCENARIO 2: STORY PAGE TEMPLATE (2 COL. INTRABLOCK)

The below measurements are based on the PNGs supplied to Palantir and should mirror, as closely as possible, the PNG measurements. Any discrepancies between these measurements and the supplied PNGs should follow PNG measurements first and foremost, WHERE POSSIBLE. A 20 pixel vertical margin will separate the majority of MAIN CONTENT (nonsidebar)blocks. As seen to the right, the story page can be broken down with the following structure...
20px. margin 40px. margin 20px. margin

A 20px margin will exist between header contents and the declaration/share bar. A 40px margin will exist between declaration/share bar and story title. A 20px margin will exist between story title and story image.

A 15 pixel margin will exist between main story image and story description and between story description and audio player . A 15 pixel margin will exist between audio player and byline . A 15 pixel margin will exist between byline and story content .

15px. margin 15px. margin 15px. margin

A 20 pixel margin will exist between secondary, tertiary and Big Book image blocks.

20px. margin

A 20 pixel margin will exist between story content and author block. A 20 pixel margin will exist between author block and share block. A 50 pixel margin will exist between share block and comment area.

20px. margin

20px. margin 50px. margin

Sidebar measurements to remain at a 30px gap, between blocks, throughout.

Spacing - Scenario 2: Padding/Blocks/Margins

21

VERTICAL BLOCK SPACING - SCENARIO 3: SHOW PAGE TEMPLATE (2 COL. INTRABLOCK)

The below measurements are based on the PNGs supplied to Palantir and should mirror, as closely as possible, the PNG measurements. Any discrepancies between these measurements and the supplied PNGs should follow PNG measurements first and foremost, WHERE POSSIBLE. A 20 pixel vertical margin will separate the majority of MAIN CONTENT (nonsidebar)blocks. As seen to the right, the home page can be broken down with the following structure...
20px. margin

A 20px margin will exist between header contents and the main slideshow

A 20 pixel margin will exist between the main slideshow and the Story List/ Collection blocks. Within these blocks the A. Story List blocks will have 20 px. gaps between the title bar and the content. B. Collection Blocks will have a 10px. gap between the bottom of the image and the dividing line. A 20 pixel margin will exist between the Story List/Collection blocks and the Dividing Line. A 20 pixel margin will exist between the Dividing Line the Title Date Block.

20px. margin

20px. margin 20px. margin

A 20 pixel margin will exist between the Title/Date block and the Dividing Line.

20px. margin

Story Teaser blocks will be separated from each other by a 50px gap.

50px. margin

Sidebar measurements to remain at a 30px gap, between blocks, throughout.

Spacing - Scenario 3: Padding/Blocks/Margins

22

TYPOGRAPHY

Typography

23

TYPOGRAPHY (FONT CHOICES AND GENERAL USE)

Type Identity The Marketplace.org website utilizes Trade Gothic, Trebuchet and Georgia for type identity. For the time being, Helvetica Neue is being used for Logo identity for Marketplace.org and all APM branding. Trade Gothic Bold Condensed will be utilized for all navigation (top and bottom) throughout the site. This font has been chosen due to its ease of legibility within a condensed format. Site Quicklinks will also utilize Trade Gothic as will the footer toolbar. In essence, all top and bottom content of site pages will rely, for the most part, on Trade to fit large amounts of navigable content within a confined space. Trebuchet MS was chosen as a complementary sans-serif for the site due to its flexibility for header and title use as well as its universality throughout browser choices. Trebuchet MS is available as standard on all Windows, Macintosh and Linux systems. In addition, Trebuchet provides a worthy universally available alternate for Trade Gothic Condensed should reliance on @ font-face become an issue. As the site exists currently, a simple replacement of top and bottom navigable content from Trade to Trebuchet would provide a similar, look and feel for the site if at all necessary. Georgia was chosen as a complimentary Serif to Trebuchet due to its legibility at small sizes as well as its universality (like Trebuchet, Georgia is a universally available font - coming standard with all Windows, Macintosh and Linux iterations).

Looking at the site at a broad glance, Trade Gothic will provide a wrapper for the site, with Trebuchet and Georgia providing the filler of the site. That said, any logo alterations or changes should take the site fonts into consideration going forward.

Wrapper

Filler

Typography - Overview and Logic

24

TYPOGRAPHY - HOME PAGE SCENARIO

The below scenario breaks down type use on the home page along with capitalization features, pixel size and preferred line height. Alternate pages should apply similar type-usage to retain site page consistency. Letter spacing has been mentioned where ideal. Line height has been mentioned only where applicable. NOTE: All Comment numerals and sidebar block lists should use Trade Gothic Bold Condensed.

Trade Gothic/Antrim/Alternate Gothic Show Header Text - Bold Condensed/14.5px. Navigation - Bold Condensed/All caps/18px. Quick Links - Bold Condensed/All caps/13.5px. Headers - Bold Condensed/All Caps/17px. Georgia Bylines - Italic/12.5px./13px. line height/15px. kern Content Summaries - Regular/13.5px./17px. line height Slideshow Description - Regular/14px./18px. line height Helper Text - Regular Italic/13.5px./19px. line height Trebuchet MS Slideshow Titles - Bold/27px./-.050 em letter-spacing Contact text - Bold/11px./.025 em letter spacing Register text - Regular/11px./.025 em letter spacing Tab text - Bold/All Caps/13px./0.1em letter spacing Titles - Bold/16px./18px. line height/-.050 em letter spacing Small Titles - Regular/12.5px/18px. line height/-10 em letter spacing

Georgia Footer Common Text - Regular Italic/12.5px./19px. line height/-.025 em letter spacing Tag Info - Regular Italic/12.5px./13px. line height

Trebuchet MS Titles - Bold/16px./18px. line height/-.050 em letter spacing

Trade Gothic/Antrim/Alternate Gothic Navigation - Bold Condensed/All Caps/14.5px./19px.

Typography - Exploded View

25

TYPOGRAPHY - CONTENT USE CASE

Story Block and List Block typography, where a Byline is present, should follow the same basic format of Story Title, Byline, Content and will be posted either with or without an accompanying image. Title text should be two lines high at most with the byline taking the next vertical space down. Content should be limited to two to three lines vertically, dependent on the length of the Title (one or two column) and, ideally, will span the height of the accompanying image (if available).

Story Title
FONT: Trebuchet Bold 16pt.

The Gold ATM Index

by Stacey Vanek Smith | May 20, 2011

Byline
FONT: Georgia Italic / 12.5pt.

Content
FONT: Georgia Regular / 13.5 pt.

Phasellus et lectus sit amet est convallis aliquam nec at mauris. Duis in lorem.

Text will exist either with or without an accompanying image. With an image, a 20px left margin should exist between image and text. Text should exist to the right of the image with the image flushed left against any grid borders. Without an image, text will flush left against any grid borders. A 10px. vertical space should exist between Story Title and Byline with a 15px. vertical space between Byline and Content Copy.

20px.

TYPOGRAPHY - FONT SUBSTITUTION, GRAPHIC ALTERNATIVES, KERNING AND LEADING GUIDELINES

Font Substitution Stacks Font substitution for browser compatibility should follow the below stack. Trade Gothic will rely on a web alternative embedding method (@FontFace).

Trade Gothic (LT Standard Bold Condensed) Trebuchet MS/Tahoma/Verdana/Arial/Sans Georgia/Times New Roman/Times/Serif

Graphic Options Type may be included as graphic files within site pages but ONLY under the approval of Marketplace/APM Marketing. In the case of header treatment for Topics, Special Collections and Show Pages (and in some cases the page content treatment AS WELL AS the header treatment), care should also be made to match the color to the overall page hue. That said, fonts and their alternate graphical type treatments should not exceed the height of the logo branding and, in most cases, should avoid color similiarities with the logo itself. Some cases that may be exceptions to the size requirement are front page slideshow title text, light text for header treatment and/or 3-column slideshow headline text. In the case of graphic type treatment for the main content area of the page, this should, for the most part, be discouraged for Phase I. Possible exceptions may be subtle treatments to page content block headers.

Typography - Alternate Use Cases/ Font Stacks

26

TYPE USAGE SCENARIO (INTERACTION AND USAGE SPECIFICATIONS)

The below chart specifies each element of type on the home page. Alternate pages should apply similar type-usage to retain site page consistency.

Graphic Text - STATIC Font - DYNAMIC

Trade Gothic Bold Trebuchet Stack Trade or Alternative

Trade Gothic Bold Trebuchet Stack

Trade or Alternative Trebuchet/Tahoma/Arial/Sans Georgia/Times/Serif

Georgia/Times/Serif

Trebuchet Stack Georgia/Times/Serif

Trebuchet/Tahoma/Arial/Sans Trebuchet/Tahoma/Arial/Sans Georgia/Times/Serif

Trebuchet/Tahoma/Arial/Sans Trebuchet/Tahoma/Arial/Sans Trebuchet/Tahoma/Arial/Sans Georgia/Times/Serif

Trebuchet Stack

Georgia/Times/Serif Trebuchet Stack Georgia/Times/Serif Trebuchet Stack Georgia/Times/Serif

Trebuchet/Tahoma/Arial/Sans Trebuchet/Tahoma/Arial/Sans Trebuchet/Tahoma/Arial/Sans Georgia/Times/Serif Trebuchet/Tahoma/Arial/Sans Trebuchet/Tahoma/Arial/Sans Trebuchet/Tahoma/Arial/Sans Georgia/Times/Serif Trebuchet/Tahoma/Arial/Sans

Georgia/Times/Serif

Trebuchet/Tahoma/Arial/Sans Georgia/Times/Serif

Georgia/Times/Serif

Trebuchet/Tahoma/Arial/Sans Georgia/Times/Serif

Georgia/Times/Serif

Trade or Alternative Trade or Alternative

Georgia/Times/Serif

Georgia/Times/Serif

Typography - Full Page Breakdown

27

COLOR TREATMENT

Color Treatment

28

COLOR PALETTE
Color Standards for Site Pages Colors should be used throughout the site to provide a way to distinguish user navigation and identity. Primary and Secondary colors (left column, below) will exist on all pages and comprise the basic look and feel (color wise) of the site make-up. Supporting colors (right column, below) establish identities for their respective topics (in parentheses next to color name). ALL pages should have a color treatment. Basic list and non-topic related pages should inherit a default color set (left column-below). Collections and Show pages (and any pages inheriting their branding) will have additional graphic content to differentiate these pages further from their respective topics. In this way, color and graphic treatment should provide all pages with a unique look and feel. Primary Colors Supporting Colors (Topics/Related Links and Accents)

Blue (Header) R 35 G 79 B 124 #234F7C

Secondary Colors

Black R0 G0 B0 #000000

White R 255 G 255 B 255 #FFFFFF

(Business) R 211 G 146 B 88 #D39258 Comp: #E6E2DD

(World) R 89 G 169 B 162 #59A9A2 Comp: #DEF1F1

(Politics) R 107 G 107 B 71 #6B6B47 Comp: #E7E8DA

(Life) R 79 G 38 B 132 #4F2684 Comp: #DDDAED

Red (Donate/Support) R 129 G 42 B 43 #812A2B

(Tech) R 94 G 122 B 137 #5E7A89 Comp: #C7D1D7

(Sust.) R 93 G 151 B 49 #5D9731 Comp: #ECF3D0

(Money) R 50 G 143 B 106 #328F6A Comp: #DDEFE6

(Home) R 35 G 79 B 124 #3D82A8 Comp: #E8F1F6

(Shows) R 119 G 119 B 119 #777777 Comp: #E6E5E5

(Alternate Color)

Link Colors Link colors will vary depending on location - whether in the wrapping (header/footer) or in the filler content. All Navigation links in the wrapper (header and footer) should remain #000000 black. That said, utility links (particularly those present on the header) will be #234f7c. All footer text links will remain #000000. There will be no hover-over color for any of these links unless specified. Text color links for fillercontent should follow the below logic... Link Colors for Content Text Link colors vary depending on link Function. In general, titles will inherit one color and content another, as follows... Content: #234f7c Titles: #3d82a8

Link Colors for Title Bar Text Link hover-over coloring for title bars will only exist with black announcement bars. Here, hover-over color will be #3d82a8 All other title bars (Block Title Bars) will follow the below logic whether a light color or a darker color on the web palette spectrum (TBD).

LINK DEFAULT FOR LIGHT BACKGROUND LINK DEFAULT FOR DARK BACKGROUND LINK DEFAULT FOR BLACK BACKGROUND

LINK HOVER-OVER FOR LIGHT BACKGROUND LINK HOVER-OVER FOR DARK BACKGROUND LINK HOVER-OVER FOR BLACK BACKGROUND

Background Color Background color to be white unless otherwise specified. Background color MAY see other color usage depending on topic and/or collection necessity. On that note, it would be ideal to allow this flexibility in development where backgrounds can be replaced from default white to either an image-based background or an alternate color background (see mpr.org for example).

Content: #ffffff

Content: #image/color

Color Treatment - Palette

29

COLOR USAGE SCENARIO (OVERVIEW)

Color Treatment Page color treatment should be made in such way that the page has a recognizable hue or supporting color. Home page, for example, should take on a blue hue with splashes of blue throughout the page. The below scenario of a home page shows the blue hue dominating the page. In like manner, other topic pages will display their hues with respective accents. Quicklinks bar, footer toolbar and sidebar Buzzworthy module should also recieve treatment according to the scope of the module. General pages will inherit a default hue.

Lorem Ipsum Volputat sanctu

CATEGORY TITLE

CATEGORY TITLE

Color Treatment - Page Overview

30

COLOR USAGE SCENARIO (DETAIL)

All pages use a set of color palettes: a primary core color palette, a page color palette, and a secondary/ancillary palette. Every color used within a browser (or mobile device application) should come from one of these palettes. Below, an example of Color Usage on the proposed Marketplace Homepage. Primary and ancillary colors are broken down on this page with individual Page colors on the following page.
Home Blue

Color Use specific to Origin Page (below case uses colors from home palette on following page)

Navigation Black #000000

#234F7C

Donate Red #7F2929

Slideshow Title #FFFFFF

Home Blue Accent #E8F1F6

Description Text #333333

Bar Grey #E1E1E1

Home Blue Accent #E8F1F6

Title Text #3D82A8

Text Blue

Text Blue

Main Header Text #333333

Sidebar Header Text #777777

Description Text #777777

Date Grey #777777

Border Grey #BDBDBD

Title Text #3D82A8 Description Text #FFFFFF

Home Blue Accent #E8F1F6

Tag Text #FFFFFF

Navigation Black #000000

Home Blue Accent #E8F1F6

Color Treatment - Page Breakdown

31

COLOR USAGE CHART (INTERACTION AND USAGE SPECIFICATIONS)

General Information The below color palettes provide core and page colors, and other sets of colors for specific purposes, such as text links and title links. With one exception, all color palettes represent a subset of the Web-safe 216 color palette. Core Color Palette and Palette Usage The core color palette is divided into sets of colors or color ramps: Primary Core Colors, Page Colors and Ancillary Colors (href links, title links) Links Title links: #3d82a8, Content links: #234f7c. Primary Core Palette (Exists on all pages) Page Palette (Exists on specific pages) Ancillary Palette (Most Likely to Exist on all pages) Home Show World Sustainability Money Life Tech Politics Business #1 #2 #3
ffffff

May be used for Breaking News DL Link hover-over coloration.

#4

#5

#6

#7

#8

#9
e1e1e1

#10
7f2929

#11
3d82a8

234f7c 000000

333333 777777 bdbdbd

Core Colors Core colors are the dominant color set in the base palette. They are the most basic, and are used for core UI elements, or elements of importance in the UI. Consequently, certain components, such as the Main branding and most text, make heavy use of this color set. The page background may also be considered a part of this set. ALL PAGES WILL USE THIS SET. Page Colors Page colors define the look and feel of individual Topic pages. This set is more identifiable and, as such, the colors are more vibrant than the core set. Furthermore, each color in this set has a secondary, and tertiary, color. A common usage for these complementary colors in UI elements or components is as a background fill for modules or specific page assets to add depth to the individual pages. For example, the quicklinks and both the sidebar Trending box and Buzzworthy box may use these colors. Ancillary Colors Ancillary colors make up the colors needed for href links, title links, border and line colors and other ancillary needs. PAGES MAY OR MAY NOT USE THIS SET BASED ON LINK PRESENCE. Hover over on all links to be #234f7c.

Home R 35 G 79 B 124 MAIN: #234F7C SECONDARY: #E8F1F6 World R 89 G 169 B 162 MAIN: #59A9A2 SECONDARY: #DEF1F1 Sustainability R 93 G 151 B 49 MAIN: #5D9731 SECONDARY: #ECF3D0

Life R 79 G 38 B 132 MAIN: #4F2684 SECONDARY: #DDDAED Tech R 94 G 122 B 137 MAIN: #5E7A89 SECONDARY: #C7D1D7 Business R 211 G 146 B 88 MAIN: #D39258 SECONDARY: #E6E2DD

Shows R 119 G 119 B 119 MAIN: #777777 SECONDARY: #E6E5E5 Politics R 107 G 107 B 71 MAIN: #6B4747 SECONDARY: #E7E8DA Money R 50 G 143 B 106 MAIN: #328F6A SECONDARY: #DDEFE6M

Color Treatment - Site Specifics

32

COLOR USAGE SCENARIO (ACCENTS)

COLOR USAGE CHART COLOR DYNAMICS

This page glosses over what content will change color when the user browses different pages. Red squares identify blocks that will change according to their Page color when the user browses that page. Below sample is of the home page with the pertinent colors (for home page) marked below.

Blue (Home) R 35 G 79 B 124 MAIN: #234F7C SECONDARY: #E8F1F6 Active Tab will always have white background with inactive tab in secondary color (in the case of this, the home page, #d8E2ED)

Color Treatment - Homepage Case Study

33

COLOR USAGE SCENARIO (BORDERS)

Bars and Borders separate the content of the page, clarifying and distiguishing sections on the page. Whereas Bar color differentiates according to page location and function (following page), borders and list lines will remain consistent throughout. ALL Border colors should remain consistent throughout (Hex #BDBDBD - Solid) and ALL List Line colors should remain consistent throughout (Hex #BDBDBD - Dotted).

#BDBDBD 1px/Solid

#BDBDBD 1px/Dotted

#BDBDBD 1px/Dotted

#BDBDBD 1px/Dotted

Color Treatment - Borders

34

WEBSITE LOGIC

Website Logic

35

OVERALL PAGE COLOR LOGIC

Site pages follow a color logic that lends to distiguishing identity between topics, collections and general (or default) pages. The Topic page (below left) provides a good example of multiple colors on a page and what defines each color. The World Topic, itself, determines the major page palette choice (primary #90C2D7 and secondary #DDECEE), whereas tabs inherit the secondary color alone. Title Bars inherit either the page palette color or a solid black, depending on the function. The home and show landing pages, below, provide good examples of color schemes throughout a page and the reasoning behind the color choices. Default pages (Site Map page, Marketing pages, Biography Page etc.) will inherit the Home coloring scheme.

Main Navigation Inherits Primary Page Color. Gradient Inherits curated graphic content. Determines Major Page Palette Choice. (default pages retain Homepage coloration) Quicklinks inherit secondary page color. Slideshow accent inherits primary page color.

Story accents inherit primary page color.

More links will reside on bar within main column and on bottom bar within sidebar column.

Blocks in main column will have grey bottom whereas blocks on sidebar will inherit secondary color scheme.

Footer Toolbar inherits secondary page color.

Website Logic - General

36

TAB LOGIC
Tabs, whether part of the main content or sidebar content, will inherit the secondary coloring of the page palette. Text will remain #333333 regardless of page origin.

Tab color determined by parent topic. Inactive tab will inherit secondary page palette color.

Website Logic - Tabs

37

TITLE BAR LOGIC

Title Bars are used to announce specific calls, whether declarations/announcements (as in the case of a topic declaration [i.e. the Economy 4.0 declaration on the Story page or a list declaration]), or block titles (i.e. The World at a Glance on the topic page). In general, bars on blocks will inherit the primary page color whereas bars on list announcements will display black. A third use for bars, as seen on the story page, will announce a topic at the top of a page and will also display in black. The rule of thumb, here, is colored if a module, black otherwise. Two exceptions to this rule exist. Comment Bars and Home Page Bars will share the same color (#E1E1E1). This coloring is used to give these specific bars a default look and feel apart from the page-related color scheme. These page bars are unique in this regard.

Determines Major Page Palette Choice. Black bars denote announcements.

Colored Bars denote block titles.

Website Logic - Bars

38

HEADER TREATMENT

Header Treatment

39

DEFAULT HEADER TYPE TREATMENT

All pages will have some identity consistent with the content of the page. This identity will be most apparent in header treatment and visual color cues throughout page elements. A default page look can be considered to reside on all sites, inherently. From this step, site pages belonging to a particular topic can be said to inherit the look (via color or graphic treatment) of that topic. Further still, certain pages (for example, those as part of a collection or those with show branding) will have a separate identity which will be added to the pages already existent topic treatment. Utility pages (i.e. the About Page and others that include a header declaration) will have category names slated in #8CAECA. In this manner all pages will have, at the very least, a default look and feel and, at most, a highly individualized visual distinction.

Default Header Scenario. The default header will reside on all pages not related to a topic or specialized branding. The look and feel of this page will exhibit a bare minimum of visual treatment. Home page, lists and Personal Bio pages can be included in this scenario. Topic Header Scenario. Pages branded with a topic will inherit that topics color scheme for header, image accent and text treatment, as well a header banner announcing the current topic. A majority of the pages will most likely have this treatment. Home , although a navigable menu item, is not a topic and will not have a topic-based treatment. All topic pages and topic-child pages will inherit this treatment if not assigned to a specialized page. Possible Specialized Header Scenarios. The specialized header will exist for all pages branded to either a collection or a show. The examples to the left show a possible scenario of the Ecomony 4.0 and Tech Report pages, where a header may include accents related to the collection/ show name. Ideally, these specialized headers will incorporate a full page graphic treatment matching the style of the specific header.

HEADER COPYRIGHT INFORMATION

Copyright information will immediately follow the Marketplace logo in three instances: A. When Marketplace stands alone B. When Marketplace preceeds a Topic and... C. When Marketplace preceeds a default call (i.e. About) Shows and collections will ALWAYS have the copyright following the full text (Marketplace Logo and Show/Collection name) rather than residing in between logo and show/collection...

YES

NO

Stand-Alone Header

Stand-Alone Header

Show Header

Show Header

Topic Header

Topic Header

Header Treatment - Header Default

40

HEADER TOPIC TREATMENT

Header Scenario for Topic Treatment Topic Headers (left) make use of both Primary and Secondary page colors. Headers should be provided at a 1000 x 160 px format, preferably PNG. Utility headers (right) make use of a distinct color (#8CAECA) for the category header. All else on the utility header remains same as the home page.

Header Treatment - Topics

41

HEADER COLLECTION/SHOW TREATMENT

Header Scenario for Show and Collection Treatment Show and Collection Page Headers add imagery and specific titles to the topic headers they inherit. In this way, there is a natural flow from the parent topic page to the show or collection page beneath. Headers should be provided at a 1000 x 160 px format, preferably PNG.

Header Treatment - Shows and Collections

42

SHOW NAVIGATION
Show Navigation will exist at the top of every page and retain the same coloring throughout all pages, occupying the full width of the page. In essence, the Show Navigation is independent of page color treatment and all other page elements. The below close-up details Links From Shows and Local Air Times buttons (which may be presented as text links - TBD) with a hoverover color visible. The selected show, Marketplace Tech Report, plays to the right (as denoted by the yellow play arrow [which turns yellow on hover-over for neighboring tabs]) and the Now Playing feature displays the currently playing show. Controls to the far right allow the user to scroll through different dates of Marketplace Tech Report casts. Following, a screenshot of the show navigation attached to a sample header.

Buttons turns yellow and reflect tab exposure on hover-over.

Scrolling text announces currently playing audio stream.

Scrub functionality for currently playing audio stream.

Buttons turn blue shade on hover over. Volume control

Pop-out functionality.

Header Treatment - Show Navigation

43

IMAGES & PHOTOGRAPHY

Images and Photography

44

IMAGE RATIOS AND USAGE

Images used throughout the site will adhere to either 1:1, 3:2 or 16:9 ratios, depending on placement. These ratios were decided upon due to commonalities with current photography standards and photography use on most major websites. Image sizes are as follows (not to scale) with description and placement clarified.

45 x 45
Use: Comment Images

3:2 3:2

135 x 90

192x150

450 x 300

Use: Topic Page (Special Collection Teaser Image)

3:2

Use: Home Page (Story Teaser)

3:2

Use: Personal Bio (Personality Image)

1:1 80 x 80
Use: Story Page (Author Bio Image)

140 x 100 620 x 346 940 x ?

Use: Home Page (Story Block Image),

1:1

112 x 112

Use: All List Pages, Topic Page, Collection Page, Episode Page, Form Page (for placeholder), Personal Bio Page

4:3 3:2

256 x 171

Use: 2-column slideshow Use: 3-column slideshow

16:9
200 x 300

Use: Question Page Image

1:1

200 x 200

Use: Story Page (Secondary and Tertiary) Home Page (Collection Images) Show Landing Page (Collection Image, Secondary Img),

3:2

Use: Story Page (Big Book Image)

Images and Photography - Ratios and Use

45

IMAGE CROPPING

Photos Photos will, in most cases, be submitted as either 4:3, 3:2 or 16:9 standards. 1:1 photo crops should be cropped to image center, with 3:2 and 4:3 photos being cropped from the longest of the two dimensions of the image to fit a 3:2 scale. 16:9 photos, ideally, will be submitted as 16:9 format. Any upscaling should scale up using the longest of the two photo dimensions to limit image quality distortion. A 1200 pixel wide photographer submission guideline should be in place to offer proper leeway for any upscaling issues. Photo Crop Case Studies The photo to the right may represent the standard 1200 pixel wide, 3:2 submission for Marketplace consideration. Scaling the photo to a 1:1 ratio (using the aforementioned image sizes under consideration of 45, 80, 112, and 200) will result in the green square box size to the right. The 16:9 scaling will result in red box size. 4:3 scaling may occur accordingly (using the center as a basis and scaling as needed).

HORIZONTAL 1200 pixel wide, 3:2 standard submission size

Photo Crop Case Studies The photo to the right may represent the standard 1200 pixel wide, 2:3 submission for Marketplace consideration. Scaling the photo to a 1:1 ratio (using the aforementioned image sizes under consideration of 45, 80, 112, and 200) will result in the green square box size to the right. The 16:9 scaling will result in red box size. 4:3 scaling may occur accordingly (using the center as a basis and scaling as needed).

VERTICAL 1200 pixel wide, 3:2 standard submission size

Images and Photography - Cropping Suggestions

46

TECHNICAL SPECIFICATIONS

Technical Specifications

47

BRAND AND LOGO GUIDELINES

Marketplace branding will exist on the top left hand corner of every page, directly underneath the Show Navigation block (for block/grid placement see page 3). Branding should stay consistent with the current Helvetica Neue typeface, however, the current coloring of white text on blue background may be swapped to present an alternate blue text on white background for future iterations of the site. Caps and Lowercase should be used for all Marketplace logo iterations in following with current branding.

American Public Medias branding will be present on every page of the site and should be placed above the Marketplace branding and flush with the left content border of the page in black text with the current Helvetica Neue 85 Heavy in 13 point type, All Caps. The APM donut should sit to the left of the American Public Media display. A 20px gap should separate the two logo declarations as follows...

Resizing Marketplace logo may exist elsewhere on the page as long as no deviation is made from color and proportional dimensions and as long as the logo is legible. See APM requirements for further information on this topic.

Technical Specifications - Brand and Logo Guidelines

48

FOLD AND SCREEN SCENARIO

Screen and Fold Visibility Screen and fold visualization are rendered at right based on current measurements for the wireframe with a 150px. Header height (including the Show Nav module). Best standards would require Slideshow and first line of main content block exist above the fold, hence header requirement.

1024/1366/1280 x 768 1280 x 800

1440/1500 x 900 1280 x 1024 1680/1400 x 1050

Technical Specifications - Fold/Screen Scenario

49