ASMP Website Design Specifications

Transcription

1 Page 1 ASMP Website Design Specifications

2 Page 2 All Pages 130 pixels (background = #ffffff) 100 pixels (background = #000000) Header Bar Use logo provided in PSD file. Match size and placement. AMERICAN SOCIETY OF MEDIA PHOTOGRAPHERS: black (#000000), pull image from PSD file, or set in 10 pt Arial Black 95 using sifr (match letter spacing from PSD file). Match placement in PSD file. Take Action Menu Find a Photographer, Join ASMP, Member Login type: white (#ffffff), pull image from PSD file, or set in 14 pt Arial Black 95 using sifr (match letter spacing from PSD file). Match placement in PSD file. Rollover is a 3 pixel tall underline (#993300) centered 8 pixels below baseline of type. Match underline width to type width plus two additional pixels on each side. Quick links type is bold and white (#ffffff) (Helvetica, Arial, San Serif) 11 pt. Match placement in PSD file. Main Menu Navigation text is bold and black (#000000) (Helvetica, Arial, San Serif) 11/20 pt (type is 11 pt with an additional 9 pt of spacing between lines of type). Match placement in PSD file. Note the alignment between this column of text and "Find a Photographer" above. Information for text is bold and white (#ffffff) (Helvetica, Arial, San Serif) 11/20 pt. Match placement in PSD file. Footer Bar Type is white (#ffffff) 11/14 pt. Match placement and line breaks in PSD file. Window Placement (see below) The ASMP website is designed for a fixed width page and should be centred within the browser. ASMP header should anchor to the top of the browser window with no visible margin. The background color for the broswer window is gray (#999999) 70 pixels (background = #5b5c5c) 160 pixels (background = #cccccc) 800 pixels

3 Page 3 Flyout Menus Four levels of flyout menu have been accounted for, but will not be needed at the time of website launch. Flyout menu type is bold and white (#000000) (Helvetica, Arial, San Serif) 11/20 pt. Flyout menu type should align with it s parent main menu navigation type to the left. Rollover state of flyout menu type is bold and red (#993300) 11/20 pt. As flyouts occur the rollover state of the parent menu should remain in the rollover state color. If flyout menu type needs to extend to two lines the line spacing should reduce to 11/14 (11 pt type with 3 additional points of spacing between lines) so that the two lines hold together and separate from the other menu entries above and below. Dotted grey rules (#cccccc) are a pattern of 1 gray pixel, followed by 2 pixels blank. Rules should be centered between lines of type and centered within column. The first 4 or 5 pixels on each side of column should not have a dotted gray rule. Flyout menus can drop down, or up as needed to avoid any scrolling of menus. Alignment with parent main menu should be maintained in both instances. 160 pixels (#999999) 160 pixels (#999999) 160 pixels (#999999) 160 pixels (#999999)

4 Page 4 Home Page A B Mural Image Murals can be made up of: One vertical and one horizontal photo (A) Three vertical photos (B) One horizontal photo and one ad (C) Total width for mural is 620 pixels. Total height is not absolute and will be flexible depending on combination of images used. 620 pixels Photo Captions C Italic and gray (#999999) 10 pt Spotlighted Features/News/Upcoming Events Box widths are absolute (see diagram to left). Box heights are always equal and determined by length of text. Box height should extend 20 pixels below baseline of lowest line of text. Note that in many instances this will create white at the bottom of one or two boxes (see C). between baseline of caption and top of box between lowest pixel of shadow and top of footer bar 200 pixels (background = #999966) 200 pixels ( background = #993300) 200 pixels (background = #5b7a8e) Home Page Headers Black (#000000), pull image from PSD file, or set in 14 pt Arial Black 95 using sifr (match letter spacing and placement from PSD file). Home Page Subhead 1 Bold and yellow (#ffffcc) 12/15 pt Home Page Subhead 2 Bold and white (#ffffff) 12/15 pt Home Page Text White (#ffffff) 12/15 pt Shadows Pick up from PSD and match placement and relationship with boxes.

5 Page 5 Mission On the home page only the Header Bar has a rolls over to display the ASMP mission. Pick up mission graphic (text, box and graphic) from PSD.

6 Page 6 Type Styles F C B G A E J I Page Header 1 (Blue Bold) (See A) Blue (#7c98ae), 26 pt Arial Black 95. Pull from PSD or use sifr (match letter spacing from PSD file). Page Header 2 (Red Bold) (See B) Bold and red (#993300) 15 pt This style is always followed by a dotted rule (see Page 6) Subhead 1 (Black Roman) (See C) Black (#000000) 15 pt Subhead 2 (Red Bold) (See D) Bold and red (#993300) 12/17 pt Subhead 3 (Black Bold) (See E) Bold and black (#000000) 12/17 pt Links (See I) Green (#5d5f2a) with underline 12/17 pt Right Nav Links (Business and Education Resources Pages only). (See J): Green (#5d5f2a) with underline 12/22 pt for single line entries. 12/15 pt for links that wrap to more than one line. (This will help the links that wrap to hold together and separate from the other menu text above and below Rollover and Active State: Red (#993300) with underline 12/17 pt Visited State (Business and Education Resources Pages in Right Nav only): Gray (#999999) with underline 12/17 pt Paragraph Spacing Text Roman (See F) Black (#ffffff) 12/17 pt Standard between paragraphs is one full return equal to one line of text (in most cases this will be 17 pt). D Text Bold (See G) Bold and black (#ffffff) 12/17 pt Text Italic (See H) Italic and black (#ffffff) 12/17 pt H

7 Page 7 Business Resources (Two Column Template) 620 pixels Text Box Box widths are absolute (620 pixels see diagram to left). Box heights are determined by length of text. Box height should extend 20 pixels below baseline of lowest line of text. One pixel gray (#cccccc) rule around all sides Dotted Rule Dotted grey rules (#666666) are a pattern of 1 gray pixel, followed by 2 pixels blank. Rules should be centered between lines of type and extend the width of the column. Shadow Shadow should appear to the right and below text box. Pull art from PSD. 290 pixels text column 290 pixels text column between box rule and right edge of design for shadow between main menu column and box rule and between box rule and text column between text columns 20 pixels betwen text column and box rule

8 Page 8 Business Resources w/ Right Nav (One Column with Sidebar Template) 440 pixels Business and Education Resources pages are the only ones with Right Nav. Note that Right Nav cap height aligns with cap height of Page Header 1 (Blue) to the left. on each side of box rule 420 pixels text column 160 pixels 10 text column pixels for shadow for shadow or

9 Page 9 Your Local Chapter (Single Column Template) The Your Local Chapter Page has a mural image that should be picked up from the PSD. 620 pixels 600 pixels 10 pixels 10 pixels

10 Page 10 Business Resources w/ Photo For Business Resources use One Column with Sidebar Template (see page 7) Member photo Background is gray (#cccccc) Photos have an absolute width of 150 pixels whether vertical, or horizontal. Credits are Text Italic (see Page 5) 170 pixels 150 pixels Solid Rule Rules that appear in the right column are grey 1 x 160 pixels gray (#666666). Rules should be centered between lines of type and extend the width of the text column. (See A) above and below photo credit A on each side photo

11 Page 11 Education Resources For Education Resources use Two Column Template (see page 6) The Education Resources Page has a mural image that should be picked up from the PSD. The image runs the entire width of the text box area. 20 pixels 20 pixels

12 Page 12 Education with Sidebar and Sponsor Logo For Education Resources with Sidebar and Sponsor Logo use one Column with Sidebar Template (see page 7) Sponsor logos should be placed with a generous amount of clear white area around them. Please confirm with graphic standards of each sponsor to confirm amount of clear area required around their logo.

13 Page 13 Member Benefits For Member Benefits use One Column with Sidebar Template (see page 7)

14 Page 14 News and Announcements For News and Announcements use One Column with Sidebar Template (see page 7)

15 Page 15 Find a Photographer: Search Page For Find a Photographer Search Page use Two Column Template (see page 6) Dotted Rule Dotted grey rules (#666666) are a pattern of 1 gray pixel, followed by 2 pixels blank. Rules should be centered between lines of type and extend the width of the column. 620 pixels Spacing Elements Allow at least 4 pixels between each element in the search form in the same group. Allow at least 15 pixels between each group of elements in the search form. 4 pixels 15 pixels

16 Page 16 Find a Photographer: Results Page For Find a Photographer Results Page use Two Column Template (see page 6). Template may need to be modified to accommodate thumbnail bar. Thumbnails Gray (#cccccc) band is 50 x 600 pixels. Thumbnails should have an absolute height of 50 pixels whether vertical, or horizontal. Allow 5 pixels between thumbnails. 5 pixels 15 pixels above and below dotted rule 15 pixels between last line of text and thumbnail bar

17 Page 17 Find a Photographer: Portfolio Page Horizontal Photos XXXX Vertical Photos XXXX 620 pixels 5 pixels on each side of box rule 430 pixels text column 160 pixels 10 text column pixels for shadow for shadow

18 Page 18 Chapter Page Chapter Page Header Bar Use logo provided in PSD file. Match size and placement. Chapter name: blue (#7c98ae) ), pull image from PSD file, or set in 26 pt Arial Black 95 using sifr (match letter spacing from PSD file). Match placement in PSD file. AMERICAN SOCIETY OF MEDIA PHOTOGRAPHERS: black (#000000), pull image from PSD file, or set in 10 pt Arial Black 95 using sifr (match letter spacing from PSD file). Match placement in PSD file.

19 Page 19 Foundation Page For Foundation Page use One Column with Sidebar Template (see page 7) Header Bar Use logo provided in PSD file. Match size and placement. Chapter name: blue (#7c98ae) ), pull image from PSD file, or set in 26 pt Arial Black 95 using sifr (match letter spacing from PSD file). Match placement in PSD file. AMERICAN SOCIETY OF MEDIA PHOTOGRAPHERS: black (#000000), pull image from PSD file, or set in 10 pt Arial Black 95 using sifr (match letter spacing from PSD file). Match placement in PSD file.