Video-Based Tutorial: Page (1) of 1 - 10/10/10 Email this story to a friend. email article Print this page (Article printing at page facebook

Web Site Planning and Wireframing: Part 11 of 12

Wireframing the structural elements of a website By Laurie Burruss

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).

 Topics include:

  • 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

 Wireframing the structural elements of a website

So now for the fun part. We're going to start by outlining the main structural elements of this homepage. So we've got our header area done, and now we are ready to do our content area. I'm going to scroll down to that area and I'm going to click on my tool that has text and a rectangle, and don't get too picky with this. Just try to guess- timate. These are not design or content creation tools. You just have to play along and they don't snap, so you just do your best job.


And I'm going to go ahead and type Content Area, as soon as you draw the rectangle the I-beam pops itself inside the rectangle. Click outside, then click on the rectangle edge, and you can resize this just the way you want it to be. And you can just keep testing a little bit to make sure that it matches what you've got. Remember it's not precise, just do the best you can. Here, that looks good.

Now I'm ready to do the footer. I'll scroll down to the bottom of the page, click on the tool again, go ahead and get it pretty much covered by the Rectangle tool. Remember as soon as I let go off the Rectangle tool, the I-beam starts popping in. Type the words Footer and then Area. Click outside of the rectangle, click on the edge of it and resize. It's a little hard to get used to it first, but bear with it. It's kind of fun once you get used to it. That looks pretty good. A little bit more over here.

Okay, I'm going to go back up to the top, I'm happy with that, and ready to start working on the sidebars. Again I'll click on my Rectangle Text tool, draw out my first rectangle. Try not to touch the rectangle, so you don't end up selecting it accidentally, I'll type in Sidebar Left, click outside, and then click on the rectangle and resize.

Click PLAY or press spacebar to start or stop video

And I'm going to do something a little bit different with this one. I know that the content is going to flow all the way down and the only reason that the sidebar is visible right now is that is all the content I have. So I want to indicate to the client and to myself and to the other people on my team that the content could flow all the way down to the footer, so I'm going to extend that sidebar all the way down.

Same is true for the content area, click on that rectangle and drag it down all the way to the footer. So this indicates even though I don't have content currently that goes all the way to the footer, that content could flow in that area. Scroll back up and click on the Rectangle tool, the text, and define my second Sidebar.

Now if this happens, you accidentally click on the wrong rectangle as you start to draw, just click out and notice that accidentally made another rectangle, but there's no problem there, all you need to do is just click on that outside rectangle and delete it. Things like this happen all the time, no big deal.

So I'm ready to go, drag this all the way down, again all the way keep scrolling down, go, the screen withdraws a little bit slow, if that happens I'm just going to go, go ahead and type Sidebar, right. I'm just going to abbreviate that this time, and then click outside, click on the edge, and then resize, I can do it a lot faster after the fact. I'm just going to get it down, as fast as you can and then come back and tweak it, just the way you want it to be. Scroll down to the bottom, so again, I'll indicate that the content can flow all the way to the bottom by dragging the rectangle down to the top of the footer area.

It's looking pretty good. I've got all my main structural elements identified. I'm going to click outside of the rectangle to deselect it. I'm pretty happy with it. Do a Command+Save, and to see what we've done, I'm going to come up to View and choose Full Screen Mode, or Command+L, Ctrl+L, and look at what I've done. Wow! That looks great. That's real easy to see the structure and to see the main section areas that I need to define my layout and to start creating the features and content areas for my homepage.

About is an award-winning provider of educational materials, including Hands-On Training instructional books, the Online Training Library, CD- and DVD-based video training, and events for creative designers, instructors, students, and hobbyists.

The Online Training Library and CD-ROM titles include such subjects as Photoshop, Flash, Dreamweaver, Illustrator, Office, digital photography, Web design, digital video, and many others.'s all-star team of trainers and teachers provides comprehensive and unbiased movie-based training to an international membership of tens of thousands of subscribers. Considering the speed at which technology evolves, the Online Training Library is a great solution for keeping your skills current. Library subscriptions begin as low as $25 a month, with no long-term commitment required.

Page: 1

Laurie Burruss serves as the director of digital media at Pasadena City College, where she has also been design professor for the past 15 years. Laurie is a professional digital storyteller, and she has developed a rich curriculum in digital and new media, which includes Flash, ActionScripting, web design and development, motion graphics, digital video editing, 3D modeling and animation, and environmental graphics design. As director of the Digital Media Programs at PCC, she has established many partnerships and collaborations in interactive multimedia, with companies such as Warner Bros., Disney Imagineering, Industrial Light and Magic, and Apple. Laurie has served as project director for grants from the National Science Foundation, the Department of Labor, and more. Laurie received a BFA and an MFA in fine arts from the University of Southern California.
Related Keywords:website planning,wifeframing,web design,web developer,page hierarchy,acrobat,photoshop,web standards,usability testing

To Comment on This Article, Click HERE

Most Recent Reader Comments:
  • Web Site Planning and Wireframing: Part 11 of 12 by DMN Editorial at Oct. 10, 2010 9:22 pm gmt (Rec'd 3)

    Click Here To Read All Posts
    Must be Registered to Respond (Free Registration!!!, CLICK HERE)
  • [ServletException in:/common/ads/links.jsp] The absolute uri: cannot be resolved in either web.xml or the jar files deployed with this application'

    Our Privacy Policy --- @ Copyright, 2015 Digital Media Online, All Rights Reserved