Wireframing a Webpage

This week in the seminar I concentrated on getting one of my pages wire-framed, my reason for doing this was so I could plan how my website was going to look, and what sort of information I was going to include within it.

Firstly a wire-frame is a blueprint for your website and gives the designer direction, without it they would merely be guessing. It therefore helps the customer and the designer understand the relationship between the products content, pages, elements and functionality (Powell 2014)

There are three different types of wire framing, Low-Fidelity, Mid-Fidelity and High-Fidelity. this refers to the complexity of the wire-frame.Lo-fidelity wire-frames are usually just a rough layout document in black and white to show where items may be located on the page. High-fidelity wire-frames are in full colour most of the time and will contain some functioning areas, real images and meaningful text. Mid-fidelity will be found somewhere in-between the two.

Wireframe

Company Logo
This is where my logo will be, some possible functionality of this will be a hyperlink to the homepage, which could be useful to the customer. I have now decided on what my logo design will be and it is posted below.

Akeem Accesories Logo

Menu Bar

This shows the headings that the users will use to navigate through my website. Under the heading for “Products” there will be a sub-menu for the products that i will be selling. These products will hopefully appear in a drop-down sort of menu. This is not completed I may decide to add some more heading in the coming weeks.

Large Promotional Image
This are may hold new products that have been added to the site or possibly seasonal products. The box would hold a large picture of the product and then within that would be a description of it. Another use for this area could be to show promotional offer that I might have on at the time, it would be great for that because it is large and on the home-page so anyone who enters the website will not be able to miss it.

Brief Website Description
This area of the page will just hold some text regarding the background of my website.

Product Areas
I have decided that I am going to have some direct links to some of the most popular products on my homepage so users can see some of the things that might interest them straight away.

References
Powell, N. (2014). Why Designers Use Wireframes: Planning & Collaboration. [online] Available at: http://www.skilledup.com/learn/graphic-design/designers-use-wireframes/ [Accessed 14 Oct. 2014].

Advertisements