How To Create A Simple Website Wireframe.

If you’re in the process of updating your own website, or are starting from scratch on a new one, what’s the best way to design and implement your ideas?

The answer is the Wireframe. This is a simple line drawing that sets out all the key elements of your web page. After all, it’s much easier to move these basic shapes and ideas around the page, and it makes editing and tweaking that much easier.

Wireframe Example

Using wireframes is an ideal way to create your new website. There’s no complication about having to move large blocks of complicated text or swathes of colour around the page. The wireframe lets you, or your client, focus on the important aspect of layout without unnecessary distractions.

Every important element of your web page should be represented in the wireframe.

Keep things simple and try to use basic shapes rather than involved graphics. Make sure you label each element and include navigation buttons that allow users to access the main sections of your site, a company logo, content areas, search boxes and user login areas.

You can sketch out your wireframe on paper if you prefer. If that approach isn’t for you, then most graphic software packages like Adobe Photoshop or Illustrator come ready equipped with all the basic tools necessary to create wireframe. Of course, there are specialised graphic software packages designed specifically for this kind of work: have a look at OmniGraffle or Graffletopia. These packages simplify wireframe creation, providing shapes, lines, arrows and text tools to customise your blank webpage.

The important thing to remember is that the layout of the page is the key to a successful website. Once you or your client is satisfied with this, then you can start to add the colour and all the other razzle-dazzle trimmings.

View our portfolio

portfolio

Speak to us

up-arrow