Saxby Technical Services

Web design, web development, IT website consultant and hosting 02-8090-0576

  • Home
  • Websites
    • Checklist
    • Pricing
    • FAQ
    • SEO
    • Wireframing
  • Clients
  • About
  • Contact

Wireframing

Wireframes make it easier to plan the layout of your website. The process of wireframing should be carried out when most or all the text and images are available. You need to see where that information is going. Wireframes are usually just black and white sketches showing the layout of the website. When you look at a WordPress theme or design your own website, you should, in your mind’s eye, convert the layout and images to wireframe objects.

Designers generally create static wireframes, starting from a sketch and progressing to Photoshop. A nice article describing the wireframing process can be found at tuts+. To help in this process, grids for sketching are available, can be printed and are found to be very useful.

An alternative to static wireframing is the generation of a wireframe in HTML and CSS so that interactions such as mouse-over on links, drop-down menus and buttons can be explored.

Dynamic wireframes have the advantage that active elements such as drop-down menus or hover effects on buttons or links can be demonstrated, galleries and images can be placed in position and text can be added. This provides a better user experience for how the website will perform and goes a long way to actually pre-writing the skeleton of the code to produce the website.

A basic dynamic wireframe could look like this:

This could contain a header image.

☰
  • Link 1
    • Link 1a
    • Link 1b
  • Link 2
    • Link 2a
    • Link 2b
    • Link 2c
    • Link 2d
  • Link 3
    • Link 3a
    • Link 3b
    • Link 3c

This would be an introduction.

This might be a section containing articles with images.

Content 1

Content 2

Content 3

This might be a call to action.

This would be the footer. Copyright © Your website

Wireframes done properly can allow an evaluation of the design, the layout and the interactions on the page without the distraction of colours, fonts and content.

Copyright © 2021 Saxby Technical Services ABN 93 342 308 872