Photoshop Designs to Code Getting to Know Wireframes

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