Slides badge

Wireframing and Design

Learning Intentions

  • Understand the industrial standards when building website

  • Understand the concept of wireframing

Success Criteria

  • I can explain the benefit of wireframing
  • I can build a wireframe for a website

What is a wireframe?

  • A wireframe is one of the is one of the first steps to building a website.
  • A wireframe allows us to very quickly design a website using pen and paper or specialised software like Balsamiq.
  • A wireframe consists of little to no actual content, but uses descriptions to explain what each section of a page will be about

An example

  • A wireframe for the website is shown

(copyright Jambour Digital ltd)

An example

So why do we bother with wireframes?

  • Wireframes in the industry cut costs by huge factors because:
    • They are cheap to produce
    • They allow the product to be designed to the wireframe
    • They allow the client to see what their finished website will look like
    • They can be easily (and cheaply) changed if something is wrong with them
    • They actually improve your skills in design

So why do we bother with wireframes?

What does a wireframe look like?

A button

A graphic

An input box

What does a wireframe look like?

Share zone

Product image

Allows user to insert quanity

# of

Additional product images


Site wide search

Button to add to cart

Key points about wireframes

  • Text is kept to a minimum, graphics aren't represented.
  • There's no need to get lines perfect - you don't need to use a ruler! Just make sure it's roughly representative of what it's meant to be!
  • Only headings or keywords (such as Add to Cart, the user's login name etc) are represented with text. Off squiggly lines just represent the text

Build a wireframe of each of the following websites:



Planning your own website

  • Over the course of the next few weeks you will be building your own websites using code. 
  • The website will be about you
  • Whilst it will not be immediately obvious what your website will end up looking like since you're likely very new to web development, you can use other websites for inspiration.

Your task is to design wireframes for your own website. This website will be focused around you, take a look at some personal websites for inspiration such as:



Presentation Overview
Wireframing and Design
© 2020 - 2024 J Balfour
06:41 | 22-07-2024
Join Live Session
Start Remote
Save Progress
Slideshow Outline
Presenter Mode
Generate Quiz
Generate Lesson Plan
Widget Screen
Canvas Controls
Random Selector
Volume Meter
Binary Converter
Python Editor
Show Knox 90
Provide Feedback
    DragonDocs Management
    Random selector
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍

      Apply a filter:

      All slideshow files