Wireframing




A website wireframe is a visual guide that represents the skeletal framework of a website. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together.

The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on what a screen does, not what it looks like.

A Beginner’s Guide to Wireframing

You can do wireframing online or by hand:



wireframe




Setup

  1. Download the starter code for this exercise and unzip it's contents.
  2. Inside the provided vssl_mockup folder, create an index.html file. Make sure to create it on the same level as the img folder and mockup.png.
  3. Add the boilerplate to your html file.
  4. Open index.html in your browser.



Exercise




Re-create the mockup for VSSL -- HTML First!

  1. Your main focus today is to set up the HTML file for this mockup. Take a look at the mockup and think about what tags you'll need and how you'll need to organize the HTML.
  2. Images - You have been provided with all of the images that you need to create this mockup in the vssl_mockup/img folder. Take a look at what you have before you begin. Think about the relative path for your images when creating them in an <img> tag.
  3. Text - Feel free to use lorem in place of this real text.



mockup




Finished Early?

Create a style.css file and link it to index.html and get started on the CSS to style it! Remember that you can check if you attached your CSS correctly by adding a background color to the page temporarily.

Below are some resources to help you with positioning.