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

Web Site Planning and Wireframing: Part 12 of 12

Wireframing the feature 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 feature elements of a website

We have identified all the main structural elements of the homepage and the wireframe is looking very, very good. Now we will go on to identifying the features and the main content areas and the specific way we are going to mark up this homepage.

We would like this a to look a little different than the structural areas, so we are going to go ahead and click on our tool again and draw a rectangle and change some of the properties.

I am going to go ahead and type just gobbledygook for the moment, double-click on that text, move the toolbar where you can see what I'm doing and I want to make the text green and I want to make the font size 18 and I'll make that bold. Then I'll click off that and click on to the rectangle, click on the outline for the rectangle and make that green as well.

So now we have a box that looks different and we want to retain or keep that as a default. So I'll select the Rectangle, right-click on it and go ahead and Make Current Properties Default. When I delete this and draw out another rectangle, it should have the same properties and it does.

So we will start off by the most important feature that I can think of, which is the Site Identifier and select the outside, click on the box, drag it over to where we want it to be and then go ahead and resize that and again, I would like that text, I'm not quite happy with the text. If this happens, just go back. I would like that to be bold. It looks good.

Click PLAY or press spacebar to start or stop the video

Select that whole box one more time, right-click and make the Current Properties Default. Every time you do this that sets that as the default properties. I put my toolbar back up where it won't get in the way, and now I'm ready to go.

There are lots of different ways we can do the wireframes inside of Adobe Acrobat Pro. We have been drawing them out one by one, but to speed up the production we are going to start a new technique which is to select one of the existing boxes and do Command+C or Ctrl +C and then do a Command+V or Ctrl+V, then paste it right there. This makes it very easy to start identifying different parts of your web site. So I want to do the primary navigation, resize that box. There we go. Double- click on that text and call this Primary Nav. Select that side of it, just get there where I can see what I'm doing, bring that up right here. It looks good. Great!

Again, I'm going to do copy, paste, drag it to the other side, this will be my Secondary Nav. Double-click on the text and all I need to change is the word Primary to Secondary. Great! So I have identified the Site Identifier, the Primary Nav, the Secondary Nav.

Moving down on my features, I don't really have a Location Indicator for this homepage or a cookie crumb trail or any of those things and each homepage is going to have slightly different features and unique content areas. So don't be worried if yours doesn't look exactly like mine.

Let's go down to the body area, click on our Rectangle tool and draw out a box. There, I just did my copy, Paste again. Call this Main Section Title. Great! Click outside, anywhere outside, then click on the edge. I'kk do another copy, paste, drag this down over to a subsection Title. Double-click on this and we select the word Main and type Sub and then close that up. There we go. It looks good.

Let's just check out what we have done do far. I'm going to go up to View > Full Screen Mode to see how it's looking. Yes, that's looking really good. We know we have some work to do it down in the content area and also down here in the footer area.

So I'll hit the Escape key and go back into the document. Moving on down, I'm going to take that tool and select something and select that, do another copy, paste and this one will be our body text and stretch that out to cover a whole paragraph so that we can see that easily.

I will call this one Body Text. Great! Then do another paste. Sometimes it doesn't do that, just do copy, paste again. Move this one up here to do an embedded link. Double-click on that font and type Embedded Link. Good. Get out and then back in there by clicking on that edge and just move it up a little bit and enlarge that box just a little bit so that we can see everything that's going on. It looks good. Great! I'm happy with that.

Go scrolling down to the footer area, go ahead and do paste, great. Drag that down here and resize again, cover that footer area. I'm going to pull this way out to the right. Double-click on this text and this is where I put some of that important information that we find down here. We have our Contact Info. Next line, we have our Legal Info/Date/ Copyright. Good and that's looking good.

Well, couple of more features that are just unique to this web site. Let's scroll back up to the top. We have a calendar, we have a Showcase and some Related Links and we should be able to identify an image as well. So I'll click out, I'll select another one. Copy, paste, grab that, resize it. Double-click on this, this is the feature and then I'll call it Calendar. Click on the edge, copy, paste, drag it over to the Showcase and do that one more time. Do a paste then drag it over the Related Links and resize. It's still not quite right, we need to rename it and resize this one. So we will finish up. Even though these look like images, they are actually links to outside resources.

So I'll double-click on the word Calendar and call this Outside Links & Resources and then above that, I'll double-click on the word Calendar and call this Showcase. Go ahead and do a Command+Save or Ctrl+ Save. Let's look at it one more time in Preview Mode. Go to View > Full Screen Mode or Command+Alt or Ctrl+Alt. It's looking really, really good. We have got most of the things that we were identifying as features.

Oh! I see one we haven't gotten. Let's go back, hit the Escape, click on that sidebar, do a copy, paste. Drag this one over the image to identify a content image. Even the word Welcome is also a part of the image. Double-click on the text, select it and type in Content Image. Do one last check. I do Ctrl+Alt or Command+Alt to see in the Preview Mode and there you go. That's the finished wireframe for the Pasadena City College, Digital Media Center.

Now keep in mind, everybody is going to have different features, different content for their homepage, so everyone doing this will have slightly different look to their wireframe. In this case, I was not able to find a site wide utility. I don't have a Search or a Login. I don't have a Locater device or cookie crumb or breadcrumb trail to find out where I am. There are no forums on this page and there are no examples of rich media, QuickTime movies, Flash banners or any of thing like that, but I have identified most of the features and this gives you a great idea of what wireframes can do and how they can mark up your ideas for a homepage.

It's a wonderful tool and a great way to let your client know what you are thinking about and how you are approaching your design process.

About lynda.com
www.lynda.com 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 lynda.com 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. lynda.com'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

HOT THREADS on DMN Forums
Content-type: text/html  Rss  Add to Google Reader or
Homepage    Add to My AOL  Add to Excite MIX  Subscribe in
NewsGator Online 
Real-Time - what users are saying - Right Now!

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