Reading the structural elements of a site
Video: Reading the structural elements of a siteIn this movie, we finally get to the good stuff, designing for the Internet. We have looked at the technical limitations of the web. We have looked at how web standards and best practices are an important issue to address in designing web sites. And now, we get to bring our creative genius and our design skills to how to create a great a web site. My theory is that are really only two pages that you need to design. There is the homepage and everything else what we call secondary pages. In this lesson, we are going to take some time to look at the structural elements that need to be on a homepage.
- A case study
Viewers: in countries Watching now:
In Web Site Planning and Wireframing: Hands-On Training, Laurie Burruss, director of digital media at Pasadena City College, demonstrates the essentials of creating a web site with a polished, professional appearance and a compelling user experience. The goal of this hands–on course is to deconstruct a web site’s home page in order to identify its structural elements and feature set. Using Acrobat Pro and the web developer’s toolkit, Laurie shows how to capture a homepage and create, in another layer, its visual framework (wireframe). Exercise files and a downloadable PDF quiz accompany the course.
Download the free support materials here from the Exercise Files tab.
After learning the tools and techniques demonstrated in this course, viewers can continue on to the next course in this series: Creating a CSS Style Guide: Hands-On Training.
- Seeing, scanning, and reading a web page
- Understanding naming conventions
- Creating file structures
- Understanding page hierarchy
- Using Acrobat and Photoshop with wireframes
- Building a professional wireframe from scratch
- Identifying and using web standards in site design
- Usability Testing
Reading the structural elements of a site
In this movie, we finally get to the good stuff, designing for the Internet. We have looked at the technical limitations of the web. We have looked at how web standards and best practices are an important issue to address in designing web sites. And now, we get to bring our creative genius and our design skills to how to create a great a web site. My theory is that are really only two pages that you need to design. There is the homepage and everything else what we call secondary pages. In this lesson, we are going to take some time to look at the structural elements that need to be on a homepage.
Taking a look up here at this info graphic. You can see at the top we need to have some page title. A way of identifying in a browser that this is the homepage. Typically, the next structural element would be a Header. This could be graphics, it could be text, it could be a combination of both of those but that's typically at the top of the page. Content is usually prominent but below the header, then at the bottom, this structural element is called the footer and contains another form of navigation and some of the Technical and Contact Information that needs to go on a web site.
Then the side bar, this can contain News items, it can contain secondary navigation, features, all kinds of things that you might want to make available to your user. If it's a 3-column layout, you will often see sidebar, content, sidebar, but get used to the idea that these structural elements, the page title, the header, the content and footer and sidebar will be used again and again. Understanding the structure will help you eventually start to the design the layout of your homepage. So let's get out look at a real world example. Let's go to the lynda.com homepage and see how these structures are used in her homepage.
So, Now we are in the homepage of the lynda.com web site. Let's see if we can find the structural elements that we have been talking about in the last slide. At the top here we have the Title page and it also has a bi-line. Learning at your own pace is considered to be a bi- line and the name of the company and the name of this web site is lynda.com. As we move down into the viewport, we see right at the top just as I described the Header. The Header in this case is both image and text and also includes some navigation. But the main area of this web site is the content area, it's prominent part and they are a lot of kinds of content that you can access in the main real estate of this web site.
Sidebars exist- there is really one, two, three, four sidebars and another one that I really wouldn't call a sidebar. But a sidebar usually contains two, three or more pieces of information that the user might want to go to, to dig deeper into the site. Remember on a homepage you are trying to seduce that user to come into the site and really explore it. Down here, we have more content, which I would call secondary content. And then finally at the bottom, we have the footer. Now the footer in this case is not a prominent thing but a necessary thing. It's often a required element by the legal department of the company. Notice that in this case, the footer is in a grayed text, whereas the main content is using red and black which is much more prominent. If we blurred our eyes, we would see the content area before we would notice the footer area, which is a great way to talk about the importance of information. So, as we are designing we need to think about what is important, what is structural and how we want to layout our page to invite the user and to see the features and to see the content that we actually have.
Just one more recap. There's your title, there's your header. Again, the main real estate is the main content. Some examples of sidebars. And as we scroll down to the bottom an example of the footer. Lynda.com does an excellent job of showing the main structural elements that should be on every homepage.
There are currently no FAQs about Web Site Planning and Wireframing: Hands-On Training.