Over the past couple posts we’ve cover how I prototype a corporate website architecture. We’ve looked at the atomic elements, global components, components, corporate homepage design and briefly covered internal page structure. Today I want to talk about the style guide.
Website Style Guide
The website style guide is an important part of every website. It will keep the formatting of each page consistent throughout the entire website. I doubt I have to explain the benefit of a style guide. What’s awesome about it though I try to style as many common HTML elements as you think the website administrator will need to manage content effectively on each page.
When the prototype is passed onto the design team, they will know exactly what to build into their css style sheet, and this will also let the programmers know what to build into the WYSIWYG rich text editor. This will help us build search engine friendly pages that are easy to format for website owners and also easy to change colors and font properties across all pages if needed.
Headings
H1, h2, h3, and h4 are headings that are show in the style guide. Each have different font sizes, colors and styling to make the website more readable when being read by visitors. User like to scan page heading looking for the information they are interested in and using different font properties helps organize the page content. When the website owner is adding content to their WYSIWYG editor, they will just have to select h1, h2, h3 or h4 from the drop list to format the text properly.
Paragraph Text
Paragraph text is the body text that is consistent throughout all pages in the main body area. This is the default text that will show when a website owner is writing text in their WYSIWYG rich text editor.
Lists
At some point the website owner will want to create an unordered list or an ordered list. An unordered list is a bullet point list. Ordered lists are numbered list (1,2,3,4) as opposed to bullets.
Blockquotes
Blockquotes are HTML elements that are smart to stylize so the website owner has an opportunity to make quotes really stand out. They can be used to emphasize main points on a page, show testimonials, client stories and more.
Alerts
Alerts are smart to think of ahead of time. They will be used for confirmation messages, error messages, or even notes / tips that stand out from other content. The confirmation or success message is something a website visitor would see after filling out a form. If they didn’t fill out the form properly, they would see the error message. The note alert is a component that the website owner might want to use to make sure the reader knows something about the page before continuing to read. It could also be a tip, download, or did you know area that stands out front the surrounding text.
Footnotes
Footnotes are great for giving credit to sources throughout your text. If the website owner quotes a source when writing content, they can add a superscript to the sentence (e.g., you have three seconds to attract a website visitors attention 1 ). Now in the future you can use an ordered list to quote the source at the bottom of the web page.
In the next article I’ll be discussing the sidebar, why it’s important and how you can use it effectively.