Wireframing and Design

• 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

• A wireframe for the website heriotsfpgolfclub.co.uk is shown

 

 

 

 

 

 

 

(wireframe copyright Jambour Digital ltd.)

• 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

• 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

• 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.