FRESNO STATE. Web Publishing STYLE GUIDE

Transcription

1 FRESNO STATE Web Publishing STYLE GUIDE

2 Web Style Guide Table of Contents INTRODUCTION Fresno State Web Publishing Guidelines Resources Quick Start Web Design Template Kits Quick Start Banner Design Catalog Minimum Branding & Visual Identity Master Brand Web sites Brand Web sites Sub-brand Web sites UNIVERSITY STANDARD WEB DESIGN Standards for Graphics & Communication University Branding UNIVERSITY BRANDING REQUIREMENTS Minimum Page Elements Elements with Content CASCADING STYLESHEET STYLING Sample Page with Tier 1 Banner tier1banner_layers780.psd Sample Page with Tier 2 Banner tier2banner_layers780.psd APPENDIX A Quick Start Banner Design Catalog Focus Icon Options APPENDIX B Quick Start Photoshop Files Introduction Tier 1 Page Tier 2 Page Banner File Organization Tier 1 Sample Banners Tier 2 Sample Banners APPENDIX C Style Guide Color Palette Pgs Pg. 21 Pgs Pgs Pgs Pgs Pg

3 Introduction Fresno State Web Publishing Guidelines Welcome to the California State University, Fresno Web Publishing Style Guide This guide was developed to assist the university community in designing Web sites that support and reinforce Fresno State s identity and visual presence on the World Wide Web. It is required that every university Web site adopts the minimum University Branding, and recommends that every university-related Web site adopt the preferred guidelines. This guide contains both the complete implementation of the new university Web design and the minimally required University Branding design. After consultation with and review by the Cabinet, the university s Integrated Marketing Council, and entities across the campus, University Communications has formulated these guidelines as recommended styles for the university s Web presence. Although very minimal elements are required, all are strongly encouraged. This Fresno State Web Publishing Style Guide gives detailed information to assist you in designing a Web site compliant with university standards, and contains directions for formatting page elements and creating banners for tier 1 or tier 2 pages. Resources (Attention Site Developers) Quick Start Web Design Template Kits University Communications has available for download and use Quick Start Web Design Template Kits for all 3 sizes and widths of the new Fresno State templates. Pixel sizes: 780 fixed-width, 980 fixed-width and max-dynamic (capable of stretching across any monitor width). Each kit contains: Sample Web site Starter navigation up to 2-tiers on a 3-column layout Tier 1 and tier 2 banners and the minimum required University Branding Fresno State Web Publishing Style Guide Standards for Graphics and Communications Manual Photoshop files to create your own tier 1 and tier 2 banners with selectable copy, university-specific focus icons, and photos designed at drop-in dimensions. The Quick Start Web Design Template Kits are based on the Clean Up the Web project specifications. For more information about the Toolkit and Web development training classes using the new site architecture contact Teaching, Learning & Technology Digital Campus at Web site kits are available for download at 19

4 Quick Start Banner Design Catalog Appendix A of this document contains a Quick Start Banner Design Catalog and instructions for using the enclosed Photoshop files. If you are acquainted with Photoshop use the files to create your banners. Start with selecting a right-side image from the images collection then select a focus icon from the icon collection for the center of the banner area. The Myriad Pro font used in the Photoshop files is not available for distribution, though it is contained in the font collection bundled with Adobe Creative Suite 2. To ease creation of banners, the Photoshop file contains the college, division or broad category (left-side copy). Refer to the banner file organization page in Appendix B for more information. University Communications Design Services also is available to work with a professional Web developer of your choosing, providing university style requirements, as well as making available resources such as photos and other graphic elements. We want every university-related Web site to be successful with the new university design. The Quick Start Web Design Template Kits, Quick Start Banner Design Catalog and Photoshop banner files are available for download from styleguide Minimum Branding & Visual Identity The Fresno State brand is more than the Sunburst logo. The brand includes the university s name, courses, history, people and reputation. The users experience with the Fresno State Web presence also is an integral part of the brand, and it is important this experience is one that enhances the brand. Master Brand Web sites: The Fresno State home page ( and top pages (home pages of the university s eight colleges and schools), as well as the Office of the President ( Brand Web sites: These include all university-related Web sites. Minimum University Branding is required, though use of the complete design is highly encouraged. Sub-brand Web sites: Auxiliary organizations are not required to use these templates though it is highly encouraged. Personal pages: Campus employees should not use or attempt to mimic any of the branding or visual design aspects of the official Fresno State Web designs. 20

5 University Standard Web Design Standards for Graphics and Communications Use of campus logos and graphics and other communication guidelines is discussed in the Standards for Graphics and Communications at Photographic images used for decorative or promotional effect on official Fresno State Web sites must be approved by University Communications. (Signed model releases must be on file for any recognizable individuals used in images). University Branding 1. TOP RED HEADER California State University, Fresno 2. BLUE MEDALLION/BRIGHT GOLD BANNER Fresno and global navigation 3. FOOTER (University privacy/disclaimer policy) OFFICIAL UNIVERSITY COLORS & STYLE GUIDE COLOR PALETTE (see Appendix C) 21

6 University Branding Requirements The top red header, blue medallion/bright gold banner and footer. This page is the simplest and easiest to produce and will ensure that your site meets the minimum University Branding requirements. The Style Guide color palette, official university colors and their hex color values are included as a design reference in Appendix D. 1 TOP RED HEADER 2 BLUE MEDALLION/ BRIGHT GOLD BANNER INSERT YOUR OWN CONTENT OR CUSTOM DESIGN (See next page) 3 FOOTER DETAILS Top Red Header csuf_header780.gif (780 x 15) Blue Medallion/Bright Gold Banner csuf_nav.gif (780 x 27) Footer 22

7 University Branding Requirements This is a sample page of the minimum branding requirements with content. 1 TOP RED HEADER picture_300 (300 x variable height) 2 BLUE MEDALLION/ BRIGHT GOLD BANNER 3 FOOTER 23

8 Cascading Stylesheet Styling Sample Page with Tier 1 Banner Large banner option shown with university branding top red header, blue medallion/bright gold banner and footer, plus optional elements. The elements are available in all widths: 780 fixed-width, 980 fixed-width, and max-dynamic. 1 TOP RED HEADER 2 BLUE MEDALLION/ BRIGHT GOLD BANNER PRIMARY NAV BAR LEFT BAR 1 (NAVIGATION) BANNER 1st tier 780 x 178 pixels LEFT BAR 2 picture_160 (160 x variable height) Photo w/caption and 3 pixel white border on top/bottom, flush to bar edges. RIGHT BAR 1 picture_149 (149 x variable height) Centered photo w/ border and padding. picture_160 (160 x variable height) Photo w/caption and 3 pixel white border on top/bottom, flush to bar edges. picture_300 (300 x variable height) picture_149 (149 x variable height) Centered photo w/ border and padding. RIGHT BAR 2 3 Footer banner 780 pixels wide variable height FOOTER 24

9 Cascading Stylesheet Styling Sample Page with Tier 1 Banner Large banner option shown with university branding top red header, blue medallion/bright gold banner and footer, plus optional elements. The elements are available in all widths: 780 fixed-width, 980 fixed-width, and max-dynamic. 1 TOP RED HEADER PRIMARY NAV BAR 2 BLUE MEDALLION/ BRIGHT GOLD BANNER LEFT BAR 1 (NAVIGATION) BANNER 2nd tier 780 x 104 pixels RIGHT BAR 1 LEFT BAR 2 picture_160 (160 x variable height) Photo w/caption and 3 pixel white border on top/bottom, flush to bar picture_149 (149 x variable height) Centered photo w/ border and padding. 3 picture_160 (160 x variable height) Photo w/caption and 3 pixel white border on top/bottom, flush to bar edges. picture_300 (300 x variable height) picture_149 (149 x variable height) Centered photo w/ border and padding. RIGHT BAR 2 Footer banner 780 pixels wide variable height FOOTER 25

10 Appendix A Quick Start Banner Design Catalog IMAGES/ARTS/design1 IMAGES/ARTS/show2 IMAGES/ARTS/show1 IMAGES/ARTS/dance IMAGES/STUDENTS/architecture IMAGES/STUDENTS/tech science IMAGES/STUDENTS/inside pavilion IMAGES/STUDENTS/graduates1 IMAGES/STUDENTS/fans IMAGES/STUDENTS/graduates2 IMAGES/STUDENTS/art students IMAGES/CAMPUS/night clock tower IMAGES/CAMPUS/fountain IMAGES/CAMPUS/craig IMAGES/CAMPUS/thomas IMAGES/CAMPUS/alumni IMAGES/CAMPUS/science IMAGES/NATURE-AG/cattle IMAGES/NATURE-AG/fern IMAGES/NATURE-AG/vineyard IMAGES/NATURE-AG/crop IMAGES/SCIENCE/science class IMAGES/SCIENCE/energy IMAGES/SCIENCE/circuit board 26

11 Appendix A Focus Icon Options ICONS/MEDALLIONS/ medallion-small ICONS/MEDALLIONS/ medallion-large ICONS/CAMPUS ICONS/ 3 graces ICONS/ACADEMIC ICONS/ graphic globe ICONS/ACADEMIC ICONS/ diploma ICONS/ACADEMIC ICONS/ cap ICONS/ACADEMIC ICONS/ globe ICONS/ACADEMIC ICONS/ #2 pencils ICONS/ACADEMIC ICONS/ books ICONS/NATURE/ apple-barcode ICONS/NATURE/ grapes ICONS/NATURE/ leaf ICONS/NATURE/ grapes2 ICONS/ARTS-MUSIC/ trumpet ICONS/ARTS-MUSIC/ band leader ICONS/ARTS-MUSIC/ colored pencils ICONS/STUDENTS/ female1 ICONS/STUDENTS/ male1 ICONS/STUDENTS/ female2 ICONS/STUDENTS/ graduate 27

12 Appendix B Quick Start Photoshop Files If you are an experienced user of Adobe Photoshop you can create banners from Photoshop files enclosed with the Fresno State Web Publishing Style Guide. Most of the work has already been done. Start with selecting a file for a specific site width: 780, 980 and maxdynamic. These Photoshop files are unique because they are multi-layered and contain all focus icons and images listed in the Quick Start Banner Design Catalog plus all college and many department names. Select a banner image and focus icon from the Quick Start Banner Design Catalog. Then follow instructions for the tier 1 and tier 2 banners in this Appendix and refer to the Photoshop banner file organization on Page 16. Use care when saving image files that the correct compression is selected. Use the Save for Web setting in Photoshop for best results. Recommended file format and optimization settings for the banner is JPEG format with 60 percent compression. Be sure to select the progressive setting to allow the banner to be downloaded in multiple passes. 28

13 Appendix B Quick Start Photoshop Files Tier 1 Page tier1banner_layers780.psd Tier 1 Banner -The banner in this Web page example is not a mandatory page element. See page 5 for an example of a page with the minimum required branding elements. -Included in the Quick Start Web Design Template Kit are layered Photoshop files containing rightside image, icon and text layers for colleges & departments. -Dimensions: 780 fixed-width (780 x 178) 980 fixed-width (980 x 178) 2. Image Area (part of banner file) -Image area is from right of guide to top, bottom & right edges. -Area size: 434 x 178 pixels -Images can be found in layers folder named IMAGES. -New image may be used in place of those provided. 3. Focus Icon (part of banner file) -Icons in folder named ICONS. -Make desired icon layer active, hide other icon layers. 4. College, Division or Broad Category (left copy)* -Default style is white text in bright gold bar, 28 pt. Myriad Pro** Condensed and Bold. First part of title is Condensed, second part is Bold. Connectors such as of and & should be in Condensed weight. -When necessary, use 28 pt. Myriad Pro Light Condensed in black, flush to top of bright gold bar for first portion of name. 5. Department Name or Narrow Category (upper left copy)* Three size options, depending on length of department name: top: 51 pt. Myriad Pro Light bottom: 40 pt. Myriad Semibold with 40 pt. leading top: 42 pt. Myriad Pro Light bottom: 30 pt. Myriad Semibold with 32 pt. leading top: 42 pt. Myriad Pro Light bottom: 24 pt. Myriad Semibold with 26 pt. leading * NOTE Most California State University, Fresno division and department names are contained in the COLLEGES & DEPARTMENTS folder. If necessary, create new text by editing an existing name or using a text layer in the folder named EDITABLE COPY. **NOTE Myriad Pro is an Open Type font (cross platform, Mac & PC) available through Adobe. It is part of the font collection bundled with Adobe Creative Suite 2. If you do not have access to this font, University Communications can assist you in the creation of the banner file. If this is not practical, use a sans serif font for the banner such as Arial or Helvetica. 29

14 Appendix B Quick Start Photoshop Files Tier 2 Page tier2banner_layers780.psd Campus Home Directories Search image1 image2 image Tier 2 Banner -The banner in this Web page example is not a mandatory page element. See page 5 for an example of a page with the minimum required branding elements. -Included in the Quick Start Web Design Template Kit are layered Photoshop files containing right-side image, icon and text layers for colleges & departments. -Dimensions: 780 fixed-width (780 x 104) 980 fixed-width (980 x 104) 7. Image Area -Choose a replacement image for image 1, 2 or 3, then paste your desired photo. -Each image is: 145 x 84 pixels -Some images are included in the layered file in folder named IMAGES. -New images may be used in place of those provided. 8. College, Division or Broad Category (lower left copy)* -White text in bright gold bar, 28 pt. Myriad Pro Condensed and Bold. First part of title is Condensed, second part is Bold. Connectors such as of and & should be in Condensed weight. 9. Department Name or Narrow Category (upper left copy)* Two size options, depending on length of department name: top: 36 pt. or 30 pt. Myriad Pro Light bottom: 28 pt. Myriad Semibold with 28 pt. leading -or- 22 pt. Myriad Semibold with 22 pt. leading. * NOTE Most California State University, Fresno division and department names are contained in the COLLEGES & DEPARTMENTS folder. If necessary, create new text by editing an existing name or using a text layer in the folder named EDITABLE COPY. **NOTE Myriad Pro is an Open Type font (cross platform, Mac & PC) available through Adobe. It is part of the font collection bundled with Adobe Creative Suite 2. If you do not have access to this font, University Communications can assist you in the creation of the banner file. If this is not practical, use a sans serif font for the banner such as Arial or Helvetica. 30

15 Appendix B Banner File Organization Photoshop Layers Palette for Tier 1 Banners Icon Folder Icon Sub-Folder Active Icon Layer Inactive Icon Layer CAMPUS ICONS Images Folder Text Folder Division Sub-Folder College Name (lower left copy) Department Name (upper right copy) Department Names -inactive layer 31

16 Appendix B Tier 1 Sample Banners (780x178 pixels) 32

17 Appendix B Tier 2 Sample Banners (780x104 pixels) 33

18 Style Guide Colors & Official University Colors The colors used in the Quick Start Web Design Template Kit are displayed below. The official university colors are Cardinal and Blue. Official University Colors Cardinal Blue #b11a3b #00287a Style Guide Color Palette #b40001 #ffbd43 #a0965a #758bb0 #eaeaea #e1e7f9 #748aad #