Web Site Planning and Wireframing: Hands-On Training

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.

Table of contents

Introduction

• Course overview
  
• Using the exercise files
  

1. How the Internet Works

• How the internet works
  
• How a user connects
  

2. Using Your Browser

• Choosing a browser
• Installing the Web Developer toolbar and Firebug

3. Deconstructing a Web Page

• Deconstructing a web page with a browser
• Reviewing the head and body of a web page
• Understanding the structural elements of a web page
• Using the Web Developer toolbar to reveal the CSS
• Using the Web Developer toolbar to investigate images on a page
• Using the Web Developer toolbar to outline a page
  
• Using the Web Developer toolbar to resize the window
  
• Using the important miscellaneous tools in the Web Developer toolbar
• Using the Web Developer toolbar to validate a page
  
• Exploring a website using Firebug
  

4. Learning the Ground Rules

• Creating proper file structure
• The eight commandments of naming
  
• 5. Designing for the Internet
• Reading the structural elements of a site
  
• Reading the features of a site
  
• Effective informational design
  
• Effective architectural design

6. Wireframes

• Setting up a project
  
• Capturing a website
  
• Merging the screen captures in Photoshop
• Bringing a website into Acrobat Pro
  
• Wireframing the structural elements of a website
  
• Wireframing the feature elements of a website
  

Conclusion

• A case study

Mediafire:
http://www.mediafire.com/?w0mlbywwmaa
http://www.mediafire.com/?vptnnr1tnzl
http://www.mediafire.com/?xcmnhibubnm
http://www.mediafire.com/?2izgphnvxob
http://www.mediafire.com/?gta2z1znp1t
http://www.mediafire.com/?byyplytnmai
http://www.mediafire.com/?ogmnbcboclm