Website Style Guide Updated: November 2013
Table of Contents Typography 04 Color 08 Images 12 Navigation & Pages 22
Throughout the site, two
Merriweather is used throughout the site for headers and
typefaces are utilized:
titles, sub-headers and sub-titles and in the top navigation bar.
Merriweather and Roboto Slab. Both are available for free from Google Web Fonts, and are also available for download for use on desktops. Alternative ‘web-safe’ fonts for these include Georgia, and Times, followed by the generic CSS tag ‘serif ‘ as a last resort.
For headers and titles, Merriweather Bold is used, with a style variant of small-caps and in a shade of orange: # ba6a40. When used in the top navigation bar, the same styles apply as noted above, except color, which is the same tan as the content section’s background: #f1dec3. For sub-headers and sub-titles, Merriweather Italic is used in a shade of purple: #906864.
Roboto Slab Roboto Slab Regular is used for body copy, links, buttons and in the footer for navigation and contact information. When used for body copy, the color should be #393939. Links and buttons should appear as # E6D0B1, even in the hover state (containing color changes instead). In the footer, the color is #E6D0B1.
Merriweather Bold Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9 . ! / , The quick fox jumped over the lazy dog.
Merriweather Italic Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 123456789.!/,The quick fox jumped over the lazy dog.
Roboto Slab Regular Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9 . ! / , The quick fox jumped over the lazy dog.
Roboto Slab Regular
COLORS The general color scheme of the site should be followed to continue the visual unity. The site’s background is a darker shade of the tan used as the background for content (copy, photos, etc.) The navigation and buttons have an up state and a hover/active state. When in up state, both appear orange, when hovered or activated, they become a shade of purple that is also used in the footer. For the color scheme associated with typographic elements, see the section titled “Typography”.
# e6d0b1 R 230 G 208 B 177 This darker shade of tan is used as the background color for the entire site.
# f1dec3 R 241 G 222 B 195 This lighter shade of tan is the background color for areas of content on every page in the site.
# ba6a40 R 186 G 106 B 64 This rusty orange appears in the logo, in the navigation and social media icons and the up state for buttons.
#906864 R 144 G 104 B 100 This shade of purple is used as the rollover state for social media, navigation and buttons. It is also the color of the footer.
IMAGeS To prevent your images from becoming distorted or stretched out, most pages will resize the image proportionally to a maximum of 350 pixels wide. Home, About, About MTHS, Projects, Stoner House Gallery and blog are the only exceptions to this (directions has no image). For best results, itâ€™s recommended to only upload images that are at least 350 pixels wide. Uploading anything smaller may result in blurry images. On the next few pages youâ€™ll find screen shots of various pages from the website, along with the sizing of images.
Home/Index Slider: W: 950px H: 390px Bottom Section Images: W: 220px H: 165px
About Right Column Images: W: 325px H: 200px
About > About Manheim Township Historical Society Top Right Image: W: 350px Board Member Images: W: 140px H:200px
Projects Right Column Images: W: 325px H: 200px
Projects > The Stoner House > Gallery We recommend uploading images around W: 530px H: 400px, the space will adapt to vertical and horizontal images.
Blog Right Column Images: W: 325px H: 200px
Maximum 350 pixel width The following pages have images with a maximum width of 350 pixels, regardless of orientation.
NAvIGATION & PAGeS To the right is a site map showing your websiteâ€™s navigation. Pages are organized in accordance with user experience testing conducted before design and development of the site. As a general rule for adding pages, grouping similar pages will most benefit your user and keep the navigation easy to use.
Primary Navigation Below is the primary navigation. The MTHS logo acts as the home link. About, Projects, Events, Blog, Get Involved, Donate are buttons that take the user to the corresponding pages. Social Media icons live above the navigation bar and take the user to the corresponding website.
Secondary Navigation Within the primary navigation is the secondary navigation. The secondary navigation is found as a drop down menu during hover.
NAv & PAGeS 23
Tertiary Navigation Within the secondary navigation, is a tertiary navigation such as the Projects > Stoner House menu selection. This type of navigation should be used sparingly, but it helps group together similar pages that are specific to one idea (i.e. the example below).
Adding Additional Pages Should you want to add additional pages, itâ€™s recommended they become part of a secondary navigation attached to a pre-existing primary navigation button. Most pages can find a home in there or even become part of a tertiary navigation. Most content can also be added to an existing page, instead of creating a brand new one.
24 Nav & Pages