Project Discussion Part II: The Wireframe Model

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:

http://speckyboy.com/2011/02/23/10-completely-free-wireframing-and-mockup-tools/

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?

Lumzy1

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.

Home_Page20130923_231514 20131013_123043

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s