Hello everyone, and welcome to October! In this post, we discuss the first design of the project, which we will create using a wireframe. This is an important process for all web designers, as it allows them to ‘draw/sketch’ their designs, experiment, and edit elements. Like an architect has blueprints, the same principle happens here.
Q: What is a wireframe?
‘The most important, yet underused, stage of any web or apps development’ – Paul Andrew, 2011
In a wireframe, we do little to none of the technical aspects of the site. What a wireframe is, is conceptual ‘sketch’ of how the website would look like online. This is the skeletal design of certain important page elements, like buttons, headers, navigation, organisation, in which the designer changes accordingly. Crucially, this is used to respond and picture how a user would interact with this design.
There are many wireframe tools to choose from. The most basic is, of course, trusty pencil and paper. However, we’re going to be a little more technical because we need to visual this on a technical level. For this reason, I was searching for one that a) was free, and b) didn’t involve a ’10 day free trial.’ Hey, call be cheap but Facebook’s free to use. Mainly.
I decided to try out ‘Lumzy’ as my wireframe tool. Why? Because it’s free and simply for me to use. Anyone interested in more information about free wireframe sites like Lumzy, check this link out:
I showed you a concept design of my system, based on Steam. In actuality, this pen-paper drawing is in fact a wireframe itself. But let’s be more technical about this.
The Production Reel
You want a play-by-play? Here we begin to look at creating the wireframe using Lumzy. Feels like Art Attack. Anyone remember that show?
Lumzy creation page. This is where we design the wireframe. The left sidebar contains elements. The blank canvas acts as a page to the website. Now we can be certain whatever is designed here will not look like the design I drew, but we can still play around with how things work.
So let’s start with the home page. You take any element you want from the left hand sidebar and drag them into the canvas to position. Clearly, I need to use the element called ‘button’ which will be used to act as navigation tools. The main thing that will take long is the editing: making sure everything fits and works as intended.
So to speed things up, I’ve gone ahead and started on the wireframe. As a comparison, I’ve included both my pen-paper design and Steam’s design. Almost everyone will notice I took the Steam picture straight from my laptop, however you can make out the similarities I’ve kept throughout.
For my design, I envisioned a ‘two tier’ level (separated by horizontal line) to better clear the home page. All the elements in Lumzy were taken from the left hand sidebar, which includes buttons and mock text and which are used to add the key elements to the page.
In the next series of post, we will look at into the design process in more detail, including factors that will influence the design process.