Documente Academic
Documente Profesional
Documente Cultură
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
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).
Grid Details The Site Header has individual criteria that should be followed (illustrated below). Footer treatment should comply with 940 pixel content borders.
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.
Overflow Properties The 10 pixels to the left of the 940 pixel width will be populated by color accents, title bars, Colored blocks and More footers. 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.
List blocks here WILL NOT extend past the 940 px. area.
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.
BLOCK TREATMENT
Block Treatment
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
1.
List Block alternatives: With Photo, Without Photo, One Line list with date, Title List. Lists to exist on muliptle 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 zoom-in 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.
The sidebar recycles a total of 5 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.
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.
6.
Related Content Block to allow access to related tags and stories relative to current site page. Exists on Story Page Only.
10
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).
11
SPACING
Spacing
12
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...
1-Column Main Use: General List Page, Callout Page, Question Page, Topic Page, Collection Page, Episode Page
Form and Registration pages (not depicted) will be devoid of sidebar content*
13
10px. 10px.
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.
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.
14
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 15 px. gap under and above image
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
15
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 .
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
16
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
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
17
TYPOGRAPHY
Typography
18
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
19
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
20
Story Title
FONT: Trebuchet Bold 16pt.
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.
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.
21
Georgia/Times/Serif
Trebuchet Stack
Georgia/Times/Serif
Trebuchet/Tahoma/Arial/Sans Georgia/Times/Serif
Georgia/Times/Serif
Trebuchet/Tahoma/Arial/Sans Georgia/Times/Serif
Georgia/Times/Serif
Georgia/Times/Serif
Georgia/Times/Serif
22
COLOR TREATMENT
Color Treatment
23
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)
Black R0 G0 B0 #000000
TBD
White R0 G0 B0 #FFFFFF Brown (Business) R 197 G 197 B 177 #C5C5B1 Comp: #DADAD0 Green (Money) R 163 G 213 B 123 #A3D57B Comp: #BAD5A4 Blue (Home) R 144 G 194 B 215 Text:#3D82A8 Light: #E8F1F6 Acc: #90C2D7
Link Colors Link colors vary depending on link Function. In general, titles will inherit one color and content another, as follows... Content: #234f7c Titles: #3d82a8
In instances where links fall on a black background, links should follow Title coloring. WITH BLUE BACKGROUND BAR, WHITE WILL BE HOVER-OVER COLOR AS WELL AS TEXT COLOR.
Default Background Color Background color to be white unless otherwise specified. Background color MAY see other color usage depending on topic and/or collection necessity. Content: #ffffff
24
CATEGORY TITLE
CATEGORY TITLE
25
Color Use specific to Origin Page (below case uses colors from home palette on following page)
#234F7C
Text Blue
Text Blue
26
#4
#5
#6
#7
#8
#9
e1e1e1
#10
7f2929
#11
3d82a8
234f7c 000000
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.
Blue (Home) R 35 G 79 B 124 MAIN: #234F7C SECONDARY: #E8F1F6 Aqua (World) R 144 G 194 B 215 MAIN: #90C2D7 SECONDARY: #DDECEE Yellow (Sustainability) R 255 G 207 B 99 MAIN: #E8E37E SECONDARY: #F2f1e1
TBD
Red (Life) R 127 G 41 B 41 MAIN: #7f2929 SECONDARY: #F0E6E6 Orange (Tech) R 207 G 154 B 50 MAIN: #DDA32E SECONDARY: #E3DFD7 Brown (Business) R 169 G 169 B 140 MAIN: #A9A98C SECONDARY: #CCCCB6
Purple (Shows) R 159 G 124 B 205 MAIN: #9F7CCD SECONDARY: #E0D9EA Grey (Politics) R 167 G 167 B 167 MAIN: #A7A7A7 SECONDARY: #DFDFDF Green (Money) R 148 G 202 B 110 MAIN: #94CA6E SECONDARY: #D9EDCB
27
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)
28
Page Palette Color Thresholds Colors used in the page palette are designed to harmonize with Core Colors and provide contrasting values so that page information is clear and legible. The Page Color palette has been tailored to be distinguishable and attractive across various displays (computer monitor, projection, and printing.) Below, an example of color visuals when printed on a black and white printer for monochromacy (row B) and colors read using a color-blind test for Protanopia, Deuteranopia and Tritanopia (rows C, D and E respectively).
Protanopia (Second Most Common Form of Color-Blindness - 1% to 1.3% of males 0.02% of females) Deuteranopia (Most Common Form of Color Blindness - 1% to 1.2% of males 0.01% of females)
Tritanopia (Extremely Rare Form of Color Blindness - 0.001% of males 0.03% of females)
Web-safe Color Palette and Palette Usage The Web-safe color palette (216 colors) is a Web graphics development standard. With one exception, all colors from the Core Color Palette and the Page Palette are part of the Web-safe palette. The exception is Page Yellow, which is just outside of the Web-safe palette range. It is ideal that every color within the palettes (except the one noted above) be within the Web-safe palette to ensure consistent rendering on multiple browsers, multiple operating systems, and multiple monitor color depth settings. Two examples of the Web-safe 216 palette are displayed below. (These palettes below provide the same color values, but are displayed in different orders.)
TBD
DS 325-6U DS 16-7U #7F2929 #DDA32E #A7A7A7 #A9A98C
Pantone Equivalents for Base Color Palette The following image displays Pantone equivalents for the Page Color Palette. Pantone colors are used specifically for printing but may be useful for later stage branding. Each Pantone color has an equivalent color mix so that primary colors can be mixed together and used on a printing press. The Pantone color system is one of the most commonly used systems for printing colors. The Core Color Pantone Equivalents should be used only for printed material. These Pantone colors are specifically selected for uncoated paper.
#234F7C
#9F7CCD
#90C2D7
#E8E37E
#94CA6E
29
#BDBDBD 1px/Solid
#BDBDBD 1px/Dotted
#BDBDBD 1px/Dotted
#BDBDBD 1px/Dotted
30
WEBSITE LOGIC
Website Logic
31
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.
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.
32
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.
33
34
HEADER TREATMENT
Header Treatment
35
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 existant topic treatment. Utility pages (i.e. the About Page and others that include a header declaration) will have category names slated in #777777 Grey. In this manner all pages will have, at the very least, a default look and feel and, at most, a highly individualized visual distinction.
Possible 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. Possible 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.
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
36
TBD
Header Treatment - Optional Type Treatments
37
SHOW NAVIGATION
Show Navigation will exist at the top of every page and retain the same coloring throughout all pages. In essence, the Show Navigation is independent of page color treatment. The below close-up details Links From Shows and Local Air Times buttons (which may be presented as text links - TBD) with a hover over 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.
38
39
45 x 45
Use: Comment Images
3:2 3:2
135 x 90
192x150
450 x 300
3:2
3:2
1:1 80 x 80
Use: Story Page (Author Bio 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
16:9
200 x 300
1:1
200 x 200
Use: Story Page (Secondary and Tertiary) Home Page (Collection Images) Show Landing Page (Collection Image, Secondary Img),
3:2
40
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).
41
TECHNICAL SPECIFICATIONS
Technical Specifications
42
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.
43
44