19
2 | Page
T able of C ontents
I. Introduction ............................................................................................................................................................................................................... 3
II. Web Page Design Templates .................................................................................................................................................................................. 3
Design #1 - Red Bar with Tabs Template ............................................................................................................................................................................................ 3
Design #1 - Options for Subpage layout/Navigation ............................................................................................................................................................................ 4
Design #2 - Red Bar without Tabs Template ....................................................................................................................................................................................... 6
Adding Branding to Design #1 and #2 ................................................................................................................................................................................................. 7
Examples of sites using the Design #1 Red Bar with Tabs Template ................................................................................................................................................. 8
Design #3 - Small Red Bar Template .................................................................................................................................................................................................. 9
Examples of sites that could apply the Small Red Bar Template ...................................................................................................................................................... 10
II. Required Elements ................................................................................................................................................................................................ 11
Red Bar .............................................................................................................................................................................................................................................. 11
Iowa State University Extension and Outreach Wordmark and Site Name below ............................................................................................................................ 12
Links to Iowa State University and Iowa State University Extension and Outreach .......................................................................................................................... 12
Footer Elements ................................................................................................................................................................................................................................. 12
III. Navigation ............................................................................................................................................................................................................ 13
IV. Right Side Elements ............................................................................................................................................................................................. 15
V. Color Palette ......................................................................................................................................................................................................... 16
VI. Font Styles ........................................................................................................................................................................................................... 17
VII. Additional Styles .................................................................................................................................................................................................. 18
IX. Branding and Wordmark ...................................................................................................................................................................................... 19
X. Accessibility .......................................................................................................................................................................................................... 19
XI. Best Practices on the Web ................................................................................................................................................................................... 19
XII. Contact Us .......................................................................................................................................................................................................... 19
3 | Page
I. Introduction This Web style guide supplements the HTML template and both have been produced to help Iowa State University Extension and Outreach Web designers, developers and content authors of all skill levels create, maintain and manage websites that follow branding, usability, accessibility and technical requirements.
If you wish to make creative modifications to the template, please contact Iowa State University Extension Communications and External Relations (CER) [refer to “Contact Us” section of this guide] before doing so. While there may be options, there are certain required elements.
II. W eb Page Design T emplates In an effort to have consistent branding on our websites, three design templates have been created to meet the diverse needs of the Iowa State University Extension and Outreach websites. Each template is designed to be flexible to meet each website’s needs. However, there are a few elements that are required in all designs. See the required elements section.
Design #1 - Red Bar with Tabs Template When to use Design #1 is used when the site does not require a logo or certain colors to tie to a program or project brand. General Guidelines
• Navigation is in red bar (dropdown menus are optional) • Site title goes in the red bar • Page layout and box styles as kept consistent with the rest of
ISU Extension pages • Homepage layout is customizable • Gray toolbar at top is required. This space allows a consistent
place to put the ISU and ISU Extension and Outreach link on every site.
Note: Refer to the “Required Elements” section.
Download the Large Red Bar HTML/CSS Template at http://www.extension.iastate.edu/externalrelations/marketingmaterials/web_template
Example of a homepage layout The homepage layouts and design can vary depending on the needs of the site.
4 | Page
Design #1 - Options for Subpage layout/Navigation Option #1 - Tabs (dropdowns) Only Version With Right Sidebar area
• Optional Sidebar boxes can be added to the right sidebar. Limit of 4 boxes.
Without Right Sidebar Area • On pages that right sidebar content is not needed, the content area
can become full width.
5 | Page
Option #2 - Tabs (dropdowns) with Section Left Navigation Version • To be used on sites that need further navigation under a dropdown menu section. • For example, if the link History under the About Us tab has 10 pages under it, you may consider using a left navigation to those 10 pages to help users
navigate the History section. This navigation would only show for the History section. • Thus, the left navigation would change depending on what section of the site you were on.
With Right Sidebar area
Without Right Sidebar Area On pages that right sidebar content is not needed, the content area can become full width.
6 | Page
Design #2 - Red Bar without Tabs Template Left Navigation Only Version (ISU Template)
• To be used on sites that would like left navigation vs horizontal navigation. • For those that want to be branded as Iowa State University
o ISU Extension and Outreach wordmark and sidebar boxes are OPTIONAL when branded as Iowa State University
With Right Sidebar area
Without Right Sidebar Area On pages that right sidebar content is not needed, the content area can become full width.
7 | Page
Adding Branding to Design #1 and #2
Add a Masthead under the red bar in Design #1 or #2 templates
When to use
Add a masthead when the site requires some site specific branding as well as a significant tie to the ISU Extension and Outreach brand.
General Guidelines
• Navigation can be in the red bar, but is not required to be (dropdown menus are optional)
• Site title goes in the red bar • 100 pixel-high masthead under the red bar is
available for site specific branding • Page layout and styles below the masthead are
customizable
Note: Refer to “Required Elements” section.
8 | Page
Examples of sites using the Design #1 Red Bar with Tabs Template Standard Template Template with Added Masthead
9 | Page
Design #3 - Small Red Bar Template When to use Design #3 is used when the site requires special branding to build a brand alongside ISU Extension and Outreach or to relate to a specific audience.
Other situations to use the small red bar:
• For those that want to incorporate the navigation as part of the overall design.
• For sites that cannot fit the navigation into the horizontal width.
Guidelines
• Red bar with yellow stripe on bottom is required • Iowa State University Extension and Outreach
wordmark is required • Search box is not required.
10 | Page
Examples of sites that could apply the Small Red Bar Template
11 | Page
II. Required Elements The following are required elements when designing an ISU Extension and Outreach Web page:
Red Bar To reinforce the Iowa State University Extension and Outreach brand, one of the following red bars should be included at the top of the design.
Large Red bar (Tabs are optional)
Small Red bar
Note: When using the small red bar on a custom designed site, a dropshadow may be add to the bottom of the red bar to separate it from contrasting colors in the design. See example on the right.
12 | Page
Iowa State University Extension and Outreach Wordmark and Site Name below
Note: Refer to the online “Guidelines and Principles” for wordmark usage.
The ISU wordmark is a PNG file and is 291 x 50 pixels in size. Do not alter or manipulate the wordmark in any way. The site name is directly beneath the wordmark and styled with a font-face: lucida grande,lucida sans unicode,arial,sans-serif; font-size:16px; and font-weight: normal. All official ISU Extension and Outreach websites are required to link the wordmark back to the ISU Extension main homepage: http://www.extension.iastate.edu.
Links to Iowa State University and Iowa State University Extension and Outreach
All official ISU Extension and Outreach websites are required to provide links to ISU (http://www.iastate.edu), and ISU Extension and Outreach (http://www.extension.iastate.edu) in the top horizontal gray bar above the red banner.
Footer Elements
All official ISU Extension and Outreach websites are required to have a footer element including copyright, contact information, and policies links. The style in which these elements are listed can vary depending on the template or design.
13 | Page
III. Navigation When Using Tabs
1. Top, horizontal main menu tabs in red banner. Home link should always be on the left hand side.
2. Dropdown menu associated with main menu tabs. Dropdowns are optional. If they are not needed, the tab itself becomes clickable.
3. Left side navigation a. Left side navigation should only be used when it is necessary to provide additional navigation under a dropdown menu link. b. The title in the red bar at the top of the navigation box should match the title of the navigation dropdown link the user clicked on to reach this
section (For example, the About tab has options for Staff and History. If the user clicks on History and there is further navigation under History using a right navigation box, the title in the red bar would be History.)
c. Subheadings may be used to categorize links. d. The red background is used to identify the active link. e. Items in gray are sublinks under the item above. f. See page 14 for examples
14 | Page
When Not Using Tabs Use left side navigation
a. All navigation for the site would appear in the left side navigation b. Subheadings may be used to categorize links. These are styled with a dark gray background. (See
above for example) c. The red background is used to identify the active link. d. Items in light gray are sublinks under the item above.
15 | Page
IV . R ight S ide Elements These templates provide right side elements for various call-to-action options:
Guidelines: Please try to limit the number of boxes on each page to four or less. Note: For specific RGB and Hex colors used in these elements, refer to the “Colors” section.
The “Connect” box is an option to engage users through social media, and other interactive ways-like Google maps and RSS feeds. Link to newsletter subscription, Facebook, Twitter, Vimeo and/or YouTube pages. This option would usually reside on the homepage.
The “Impact/Success Story” box is an area to feature real-life stories that allow users to make a connection with services, products, research and information. This element can be used on the homepage. Use on sub-level pages when relevant to the content on that particular page.
The “Publications” box is an area to promote any publications. Links to the ISU Extension online store and other specific publications would go here. This box would appear on the homepage or generic pages. For more specific content, use the “Related Content or Links” box below.
The “Related Content or Links” box can be used on second-level pages to add a better user experience by listing and linking to content that would be relevant to page visitors.
The “Contact Information” box is the place for phone numbers, email addresses and physical addresses. This box would take the place of the “Connect” box on sub-level pages.
16 | Page
V . C olor Palette Official Colors Iowa State University red and yellow are the main colors in this design. Khaki, blue and gray and gradient variations of these along with gradient variations of the official red are the complimentary colors used.
Colors R G B Hex Value Red Top of gradient / Banner Bar / Red Box / Impact Statements / Success Stories
206 17 38 #CE1126
Bottom of gradient / Banner Bar / Red Box / Impact Statements / Success Stories
147 12 10 #930C0A
Yellow
Top and bottom of banner element
242 191 73 #F2BF49
Khaki Top of gradient / Extension Store Box 197 185 154 #C5B99A
Bottom of gradient / Extension Store Box 126 109 52 #7E6D34
Header color/ Related Content / Contact Box 226 226 197 #E2E2C5
Border color / Tables / Related Content / Contact Box
204 204 153 #CCCC99
Blue
Top of gradient / Connect / Contact Information Box
132 153 165 #8499A5
Bottom of gradient
70 112 129 #467081
Gray to white gradient Left-side of gradient / Selected item in right-side navigation 224 224 224 #E0E0E0
17 | Page
V I. Font S tyles
Element
Face and treatment Size Color
Heading One <h1>
Arial, Helvetica, sans-serif 2.5em #930C0A
Heading Two <h2>
Arial, Helvetica, sans-serif 1.6em #000000
Heading Three <h3>
Arial, Helvetica, sans-serif 1.083em #930C0A
Heading Four <h4>
Arial, Helvetica, sans-serif 1em #000000
Heading Five <h5>
Arial, Helvetica, sans-serif 1em #930C0A
Heading Six <h6>
Arial, Helvetica, sans-serif #000000
Body / Paragraph
Arial, Helvetica, sans-serif #000000
Link Style in main content area
Text-decoration: none; #006699
Link Style in colored boxes
Text-decoration: underline; #FFFFFF
Table header Arial, Helvetica, sans-serif 0.9em #333333
18 | Page
V II. A dditional S tyles Below you will find some of the CSS classes used in the HTML template.
Element .CSS Class Comments Submit Button
.btnSubmit (this style turns the submit button blue with the gradient effect.)
background-image: url('../Images/submitbuttonbg.jpg'); height: 25px; font-size: 0.8em; border: 1px solid #8298A5; font-weight: bold; padding: 3px; color: #FFFFFF;
Submit Button hover .btnSubmit:hover border: 1px solid #8298A5; background-image: url('../Images/submitbuttonbg.jpg'); height: 25px; font-size: 0.8em; font-weight: bold;
Table Styles
.gray
. To create a table like the ones shown below, use the class styles below on your table tag. (<table class=”gray”> or <table class=”khaki”>). The CSS styles for these are available in the HTML/CSS template. You can download this here: http://www.extension.iastate.edu/externalrelations/marketingmaterials/web_template
.khaki
19 | Page
IX . Branding and W ordmark Please refer to the Visual Identity Manual for more information on the proper use of the ISU Extension wordmark and branding standards:
http://www.extension.iastate.edu/externalrelations/marketingmaterials/vimanual.htm
Other marketing resources can be found at:
http://www.extension.iastate.edu/externalrelations/marketingmaterials
X . A ccess ibility ISU Extension and Outreach Web pages are viewed by a diverse group of users. As an educational and federally funded institution, we strive to keep Web pages accessible to as many people as possible regardless of limitations.
This template has been created using level one accessibility guidelines. Please make sure Web pages are accessible to all our users.
Visit: http://www.w3.org/WAI/ for more information on the standards.
X I. Best Practices on the W eb Some things to practice when creating your Web pages:
• Use the provided style sheet (CSS) when creating Web pages. • Use text that makes sense when read out of context when creating links. Avoid, “click here.” • Use XHTML when creating pages. • Use alt tags, height and width for all images. Use Border=0 to avoid link border around linked images. • Use search terms in content naturally. Don’t force the use of these terms.
X II. C ontact Us • Molly Doolittle, Web Content Coordinator at 515-294-5168 or [email protected] • La Tosca Goodwin, Web Content Coordinator at 515-708-0115 or [email protected] • Stephen Metcalf, Creative Manager at 515-294-2405 or [email protected]
