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

Web Site Planning and Wireframing: Part 10 of 12

Bringing a website into Acrobat Pro By Laurie Burruss

Bringing a website into Acrobat Pro

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

Bringing a website into Acrobat Pro

We're now ready to go and start creating our wireframe inside of Acrobat Pro. I'm going to my toolbar and launching Acrobat Pro version 9. You won't see much when it opens but don't fear. Come up to File and choose File > Create PDF > From File, or the keyboard shortcut is Command+N, Ctrl+N. I'll navigate out to my Desktop. Make sure you select the PDF file not the PSD. It works with the PDF file, select that, click on the Open button, and now we are looking at our PDF file inside of Acrobat Pro.



Because I'm working in an unusually low resolution, I'm going to make this image larger and make it fit the width of the screen. And I'm also going to set up a few of the great toolbars that are available in Acrobat Pro. If you don't know a lot about Acrobat Pro, or you haven't used it to be a multimedia tool or content creation, or proposal tool, I highly recommend that you check out some of the other titles on about Acrobat Pro to have some great ones both from multimedia presentation and for understanding all the different features that are available in Acrobat Pro.

Scroll up to your Tools dropdown menu, select Comment & Markup, and go all the way down to the bottom and choose Show Comment & Markup toolbar. We are going to anchor the toolbar to our other toolbars, click on the little dots here on the left, and just drag it up, and notice that it will become part of your toolbar set.

Click PLAY or press spacebar to start or stop video

The next toolbar that we want to get is the Advanced Editing toolbar. Click on the Tools dropdown menu, and choose Advanced Editing > Show Advanced Editing toolbar. Again click on the left right here, and drag it up to your toolbar. So we've got all our toolbars showing and we need one more toolbar, which is the Property toolbar. Click on the View dropdown menu, scroll down to Toolbars, select the Properties Bar menu, Command+E or Ctrl+E.

I am going to let this one float, it's a special toolbar, it changes contextually, and you will notice as we start working it will continue to change depending on what tool that we choose. The tool we want to use for this particular project, the wireframe, is the Text Rectangular Box called the text box. So we are going to click on that tool, and as soon as we click on that tool, notice that our Property window change, I'm going to go ahead and drag out a rectangle, about the size of the header image. If it's not exactly the right size, I'll change it. And also you will see that now there's a blinking I-beam inside there, I'm going to write Header Area.

Now I'd like to make this box so that I can see the image below it and I'd like to make the text so it's more legible and easier to see. So I'm going to select the text, go over to the toolbar, and select 24, I'm going to leave the text color Red, but I want this text to appear on the right side so I'll Align Right. I still can't see the image so I'm going to click out of the box for a moment and then click on the box again to get the outside edge of the box, this let's me change the features or the look of the box, instead of having a fill of white, I'll choose No Color. Now we have transparency. I'll keep it red because this is my wireframe and I want it to show up on top of the web site, the screen capture. I want it to be a solid line and I'd like it to be 2 points, so that we can see it.

Now I can click off of the rectangle and by clicking back on the rectangle, notice that I get a Move tool, and I can move this wherever I want it, and I can make it exactly the size that I need to make it for the header area, it would be right here, and if I right- click on this, I can say Make this Current Properties Default, and I want to do that, so that when I start making other rectangular boxes with the text, that they all appear to be the same. So I'll click on that, and I'm ready to start outlining and wire framing my entire 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

To Comment on This Article, Click HERE

Most Recent Reader Comments:
  • Web Site Planning and Wireframing: Part 10 of 12 by DMN Editorial at Sep. 20, 2010 4:27 pm gmt (Rec'd 3)

    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