Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Photoshop Designs to Code
  • Discussion

  • Study Guides

  • Table of Contents

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Getting to Know Wireframes

  • Show both the website wireframe & the page wireframe from my site
  • Show page design & the wireframe boxes at the same timeWhat is a wireframe?
    • a layout of the website design without the visual or design elements
    • a screen blueprint or skeletal framework. Like a house with just sheet rock & the basics or a skeleton of a body. It is a stripped out version of a website framework or web page.
  • Wireframing is a skeleton or blueprint of either a page or a website. It does not contain design elements.
  • We create a wireframe of our design to assist us in planning the layout of the page
  • The wireframe will help us set up the coding portion of the pageThere are different types of wireframes
  • Generally a page wireframe or design wireframe is a sample of the page without any visual design elements
  • Show my example from my site
  • There are also site navigation wireframes that show navigation & links between pages
  • We need a page wireframe
  • Open our document to show how we are creating the various boxes of content
  • We look at the page from a box standpoint
  • We need to define the boxes, determine how we plan to nest them
  • Walk through our web page & plan out all of these boxes
  • Then we give the box a name
  • Talk about how this process helps you move from the graphic side of things to the web side of things
  • For coding we need to define these boxes