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

Web Site Planning and Wireframing: Part 8 of 12

Capturing 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




Capturing A Website

To start this project choose a web site with a well-designed homepage, but I want you to make sure it's not Flash. The way Flash works is very different than the way HTML works. If you are not sure how to check this, you can right-click anywhere on the web page and you will see that it says Web Developer. That indicates it's an HTML site. If you move around the site and click other places, you will see that wherever I right-click on this particular page it says Web Developer. A pretty good indication this is an HTML or XHTML web page. A lot of web pages are hybrid. They will have both HTML and Flash.

For instance, I showed you's homepage and that's a hybrid web site. They have some Flash elements on it, but it's not an all-Flash web site. I highly recommend not using an all- Flash web site for this project.

Click PLAY or press spacebar to start or stop video

In this project I'm choosing the homepage for the Pasadena Digital Media Center. The first thing I'm going to do is do a screen capture. On the Macintosh that screen capture is done by doing Command+Shift+4. So on my keyboard I'm going to click Command+ Shift+4 and notice that my cursor instantly turns into a cross here. I'm going to move up to the top left corner of the viewport and then I'm going to drag to the right and when I let go of my mouse it will take the picture.

It will take me two images to put the whole page together. I could do just a screen capture of the window, but I want to get the whole version of the homepage not a truncated view. So I'm dragging down to the right and I'm being careful about this not sloppy. I want to be really careful and get exactly what I see in the viewport. It will be better to air on the side of being a little too large than a little too small.
Let go and believe it or not, I'll show you in a few minutes that makes a clipping that's on my desktop. I'm going to scroll on down to the bottom of the page, do Command+Shift+4 again and mouse turns into a cursor, go up to my upper left corner, drag down to the right carefully, getting what's inside the viewport.

I am going to close Firefox. As you can see we have two pictures, at the top and the bottom of the homepage for the Pasadena City College, Digital Media Center and the next thing I'm going to do is edit this together, put it together, composite it together inside of Photoshop, so we can start to make our PDF.


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 8 of 12 by DMN Editorial at Jul. 16, 2010 3:37 pm gmt (Rec'd 2)

    Click Here To Read All Posts
    Must be Registered to Respond (Free Registration!!!, CLICK HERE)
  • -->

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