Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Depending upon what type of site you are building, you may want to consider building a style guide for your site. A style guide can assist anyone building content for a site by displaying the visual formatting for your site, explaining how certain styles are executed and even pointing to online resources to explain how specific techniques work. Style guides come in many shape and many sizes, and can be customized for your site's specific needs. And you can see there is a lot of stuff already on the page, and we're going to take a look at all the stuff in just a moment and explain kind of how this is structured.
But we need to finish our style guide out, so a lot has been done, but we need to finish it. So right here the headline says, General Page Layout. I'm going to hit Enter or Return to create a blank line above that, and that's where we are going to enter in our content on this page. So the first thing I'm going to do is I'm going to type in Heading 1, and then I am going to use my Properties Inspector, make sure I'm on the HTML tab, and I am going to change the Format from Heading 3 to Heading 1. I'll hit Return or Enter to go down next line. I'm going to type in: Used once per page to identify page content.
So you can see we are showing somebody what a Heading 1 looks like, and then we are telling it how Heading 1 should be used on the pages within our Explore California site. I'm going to go down to the next line, and I'm going to type in Heading 2. I will format that as a Heading 2, again it changes, and just below that I am going to type in a paragraph: Used for all top level headings not identifying page content, again, setting some ground rules for when this should be used. Hit Return to go down to the next line, and I'm going to type in a Heading 3.
Once again, remember I can grab my pulldown menu here for Formatting and change that to a Heading 3, and below that, I am going to type in: Used for subheadings and any headings not categorized as a "main heading". And then finally I'm going to go to the next line, and I'm going to type in, Not used: and here we are going to follow our own advice. So if I have a subheading and any heading not categorized as a main heading, which I guess this is not a main heading, that would be a Heading 3.
So I am following my own advice in using the structure of the site. Go down to the next line, and I am going to type in: Headings 4-6 are not used in the Explore California Web site. So this style guide is not just showing you how something should look. It's telling you about when you should use something, how you should use those elements, that sort of thing. So we've just added some headings to the page, and letting people know how those are supposed to be used and how they are supposed to look like. You will notice that we also have an identifier that this is the style guide.
This is how our breadcrumb looks, and if we scroll down we can see that we have some information about the General Page Layout. This is telling it how pages are typically formatted, what type of accent images should be used, how our breadcrumb are used, how links should be styled and used, and things like that. We also have further explanations about Navigation, Sidebar & Extras, Call Outs within our main content, table styling, which we turn to Live View we get to see that's a little bit clearly, how Lists should be styled: ordered, unordered, definition list. And we have some information about validation: how we should validate our code, where our hacks should be placed so that proper validation occurs, that sort of thing.
So there is a lot of information on this page; however, we've left a lot of stuff off. There is no instructions on how to style forms, to show how those are done, a comprehensive navigation guide to tell exactly how the navigation should be done and show it, and things like that. So obviously, some style guides would be of single page; other style guides are going to be an entire section of the site, sort of explaining how the site works. Now I want to highlight on my style guide as an example of this. Here I have the New York Public Library's online style guide, and you can find this yourself at legacy.www.nypl.org/ styleguide/, so this is their old style guide.
They left it up here as a reminder for people working on their Web site. Now, the benefit to this particular style guide was that not only can we sort of see how the styling works, but you will notice they are giving clear guidelines as to how you should use things, which document types they are going to be using, and the benefits of working through them, how to make sure your XHTML valid, that sort of thing. We have a CSS: Style Sheet & Tips. They have guidelines on linking to Style Sheets, Style Sheets that you can use from the Public Library and CSS Validation. So this was really made because there are lot of developers and freelancers that are all not connected at all doing Web sites and pages for the New York Public Library.
Well they all need to look the same. So this style guide not only gives them access to the existing style sheets, which they can use for their projects, but it shows them how the documents should be formatted in terms of this XHTML, the best practices that they should follow, some places online where they can go and learn more about validation. It's a very comprehensive style guide, and it's something that, as a designer, if you are going to work on a project for them, this is godsend to have. You can come right here and figure out exactly what you need to do with the content you're creating. So that's really cool. Now not every site is going to need a style guide - the New York Public Library is huge; however, their flexibility in providing the exact information needed, makes them extremely useful and versatile, regardless of the type of site that you are building. Now, when working on sites that will use a development team, or any sort of outside vendors, a style guide can provide crucial information that ensures content is designed and developed according to your standards.
Now if you are using a smaller site, style guides can serve as a single-page overview of your site design, which is nice, and that makes actually a good way of communicating the design principles you are working with to your client, as they can just go online and look at the style guide. Now regardless of how you use them, style guides give you a living, breathing document that can change as your site changes, and an effective way of communicating your design and development strategy.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.