Web Style Guide. May 15, 2010

Size: px

Start display at page:

Download "Web Style Guide. May 15, 2010"

Alexina Owens
5 years ago
Views:

1 2667 N Washington N Washington Blvd. Blvd. North Ogden, Odgen, Utah info@castlecreekpd.com Web Style Guide May 15, 2010 This is the official style guide for the Castle Creek Dentistry web site. Use the information in this guide when updating and creating new content for the web site to maintain cohesion and consistency across all pages within the web site. This web site was designed to be accessible to all potential patrons. This has been accomplished by limiting the size and content of the site. Following the guidelines set forth in this document will maintain this accessibility. Page Size In order to accommodate the greatest population of users the page must be 800 pixels wide. The length is flexible; design to accommodate the information. Font Usage Further information will be given regarding font usage in later sections of the document. These are the official fonts used for the design of this web site. Area Font Family Size Display Color Link Hover Header Address Georgia...serif 17 px Black NA Header Bullets Georgia...serif 18 px, strong Red NA Content Header Georgia...serif x-large Red NA Content Body Arial...san serif medium Black NA Content Body Header Arial...san serif large Red NA Navigation Links Arial...san serif 16 px, bold White Turquoise Secondary Link Header Arial...san serif medium, bold, italic White NA Secondary Links 1 Arial...san serif medium White Medium Green Footer Link Arial...san serif 12 px Red Turquoise Footer Copyright Arial...san serif 12 px Black NA Link Arial...san serif 12 px Turquoise Medium Green Form Links Arial...san serif 12 px Turquoise Medium Green Map Link Arial...san serif 12 px Red Turquoise

Color Values The official identity colors for Castle Creek Pediatric Dentistry are Light Green, Purple and Red. These colors make up the majority of the web site.

2 Color Values The official identity colors for Castle Creek Pediatric Dentistry are Light Green, Purple and Red. These colors make up the majority of the web site. Colors that may be used in conjunction with these are listed below the official colors. Color Name R G B Hex Value Light Green #E6EA96 Red #C1272D Purple # Turquoise #3C9CD7 Medium Green #CBDB2B Golden Yellow #FEC214 Header The dragon logo and Castle Creek identity must appear at the head of every page, as illustrated below. The measurements are in pixels and relate to how large the boxes that contain the objects are Footer A consistent footer must appear at the bottom of every page and look as illustrated below. The footer is made up of a 14 px color box, and a text area. The text area is defined with a 2 px solid border on the bottom edge only in Red. This text area also houses the footer link and copyright text. Use the appropriate text as described under the font usage area of this document. 800

Navigation The final required element is the navigation area. This area is to be located on the left hand side of all pages. It is to measure 176 px wide by 360 px high.

Photographs should be relevant to the business of pediatric dentistry. They should show children smiling and brushing their teeth.

This helps potential clients create an image of the practice in their minds before they visit, creating a sense of familiarity for them.

3 Navigation The final required element is the navigation area. This area is to be located on the left hand side of all pages. It is to measure 176 px wide by 360 px high. The background should be Purple. The links themselves should follow the standard font usage included in this document. Images An important element of this web site is photographs. Photographs should be relevant to the business of pediatric dentistry. They should show children smiling and brushing their teeth. Images should include a wide range of ethnic groups in an effort to illustrate the multicultural clientele of the practice. Images of the practice should also be represented. This helps potential clients create an image of the practice in their minds before they visit, creating a sense of familiarity for them. Images of the dentists with their families as well as the staff should be provided on the web site. This also creates familiarity for potential and current clients. These images should follow one of the following two design methods: 1 2 Method 1: include the images in the footer. This method should include a 14 px Red box above the images. Images may be aligned to one another and surrounded by a red field or they may be separated from one another with red as seen below: Method 2: mimic the navigation area on the right hand side of the page cropping photos as necessary to fit within the 176 px wide by 360 px high area.

4 Other Links Provide relevant links to external sources in a right side link area. This area should be 176 px wide by 360 px high to mirror the navigation bar but should be colored Turquoise. The links themselves should follow the standard font usage included in this document. An example of this kind of link navigation is provided in following pages. Forms & Map links These links will always be provided on the Contact Us page and should follow the font usage guidelines and examples that follow. Language This web site is for adult parents of child patients. It should convey this through the use of clear and accessible language describing the practice. The site design is meant to appeal to the children, but the content needs to appeal to parents. Providing access to fun teaching tools for children is acceptable, but always select content with the parent user in mind. Style Guide The style guide is meant to bring together all information used to create the web site and current best practices. As the site is updated and changes the style guide should be updated to include new thumbnails of the individual pages and provide instruction on the new changes. Technology and Development Standards This site has been designed to provide a resource to potential and current clients. It strives to be accessible to every demographic and type of internet user. Because of this the technology used strives for simplicity. The current web site exists in CSS with internal style sheets for each page. While the style sheet could easily be converted into an external style sheet this web site isn t meant to be constantly updated so internal style sheets work for now. The current header and footer CSS styles are provided at the end of the document for easy look up, though one should look at current pages in Dreamweaver to see how they have been successfully applied. Future development should keep with the current simplistic ideal and avoid using moving graphics, videos and excessive information.

5 Web Pages as of May 15, Home: index.html Elements: 1. Header: includes Dragon Logo, Castle Creek Word Logo, Address & Phone number, and Red color box. 2. Navigation area: includes links 3. Content Area: includes Content Header and Content Body copy. 4. Footer: includes integrated photos, Red color box above and below, Text box with link and copyright.

6 1 About Us: about.html Elements: 1. Header: includes Dragon Logo, Castle Creek Word Logo, Address & Phone number, and Red color box. 2. Navigation area: includes links 3. Content Area: includes Content Header and Content Body copy. 4. Right hand placement of pictures 5. Footer: includes Red color box above and Text box with link and copyright.

7 1 Meet the Dentists: meet.html Elements: 1. Header: includes Dragon Logo, Castle Creek Word Logo, Address & Phone number, and Red color box. 2. Navigation area: includes links 3. Content Area: includes Content Header and Content Body Header and Content Body copy. 4. Right hand placement pictures 5. Footer: includes Red color box above and Text box with link and copyright.

8 1 All About Teeth: teeth.html Elements: 1. Header: includes Dragon Logo, Castle Creek Word Logo, Address & Phone number, and Red color box. 2. Navigation area: includes links 3. Content Area: includes Content Header and Content Body copy. 4. Right hand Navigation area: includes links and link headers. 5. Footer: includes Red color box above and Text box with link and copyright.

9 1 Contact Us: contact.html Elements: 1. Header: includes Dragon Logo, Castle Creek Word Logo, Address & Phone number, and Red color box. 2. Navigation area: includes links 3. Content Area: includes Content Header and Conent Body Header and Content Body copy and /form links. The Content Body Headers on these page have been modified from the font usage table to be bold. 4. Left Hand map with link and picture. 5. Footer: includes Red color box above and Text box with link and copyright.

The web site was designed with the logos side by side, however, they may be arranged in other ways as long as good design

forms, business cards, signage and official advertisements.

10 Acceptable Logos The preferred logo for Castle Creek Pediatric Dentistry is the Purple Dragon used in conjunction with the Castle Creek Word logo, however, two other acceptable logos exist which may be used when appropriate. The web site was designed with the logos side by side, however, they may be arranged in other ways as long as good design principles are maintained. Required The Castle Creek Word logo is required to be present on all literature and web pages dedicated to the practice. Preferred This logo is the preferred Dragon logo and is required on all official practice information including web site home page, forms, business cards, signage and official advertisements. Acceptable The following two logos are acceptable for use for non-home web pages, promotional materials such as t-shirts, water bottles, and frisbees. They must be used in conjunction with the Castle Creek Word logo. High resolution.eps files are available for all of these files. Web ready.gif are also available for the Castle Creek Word logo and the Purple Dragon.

11 Header and Footer CSS as of May 15, 2010 body { background-color: #FFF; #container { background-color: #e6ea96; width: 800px; position: relative; margin-right: auto; margin-bottom: 0px; margin-left: auto; #headerd { background-image: url(images/ccpd_logo_dp.gif); background-position: center center; height: 208px; width: 176px; background-repeat: no-repeat; background-color: #e6ea96; #headerw { background-color: #e6ea96; background-image: url(images/ccpd_logo_hd.gif); background-repeat: no-repeat; background-position: center center; height: 160px; width: 624px; #headert { color: #000; background-color: #E6ea96; background-position: center center; height: 48px; width: 624px; padding: 0px; margin: 0px; #headert p { color: #000; font-family: Georgia, Times New Roman, Times, serif; font-size: 17px; text-align: center; padding-top:.25em; #headert strong { color:#c1272d; font-size: 18px; text-align: center; #colorbox { background-color: #c1272d; height: 14px; width: 800px; background-repeat: no-repeat; background-position: center center; clear: left;

12 #menu { background-color: #7670B3; width: 176px; height: 360px; #menu ul { margin: 0; padding: 0; #menu li { list-style: none; color: #e6ea96; display: block; text-align: center; height: 3em; padding-top: 1.5em; #menu li a { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #FFF; #menu li a:link { color: #FFF; #menu li a:hover { color: #3c9cd7; #colorbox2 { background-color: #c1272d; height: 14px; width: 800px; #footer { background-color: #FFF; height: 20px; width: 800px; font-family: Arial, Helvetica, sans-serif; color: #000; font-size: 12px; text-align: center; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #c1272d; vertical-align: text-bottom; margin-top: 4px; #footer a { color: #c1272d; font-weight: lighter; font-size: 12px; text-decoration: none; #footer a:hover { color: #3c9cd7; text-decoration: none;

CSS. https://developer.mozilla.org/en-us/docs/web/css

CSS. https://developer.mozilla.org/en-us/docs/web/css CSS https://developer.mozilla.org/en-us/docs/web/css http://www.w3schools.com/css/default.asp Cascading Style Sheets Specifying visual style and layout for an HTML document HTML elements inherit CSS properties