OUGD504 - Wireframes

What is a Wireframe?

A wireframe is a visual representation of a user interface. It strips back the design to define the heirachy of items on a screen and to communicate what the items on that page should be. The wireframes can be thought of as the floor plan for the website.

Wireframes are used for:

• A basis to begin creating screens.
• A reference point for functional specifications.
• Communication of the functionality of the design.
• Exploring ideas.
• A basis for prototyping/testing early ideas.

How do I create a wireframe?

For a low fidelity wireframe then you can create a wireframe using pen and paper. For the software route you are better using a designed wireframe for the task.


My Initial Wireframes:

The first photograph shows the first two pages of the website wireframe designs. The top drawing is the initial page that would be seen once the website IRL has been typed in. This shows the brand name and gives the option to go straight to the menu. As an extra detail there would be a slideshow of pictures of the models in the product and some of the development stages of the product. If you were to scroll down on the same page (home page) then you would see the drawing in the second box. This shows the information about the product. The stages of the development and the meaning behind the creation of the company are very important to the client which is why it is vital for them to be included somewhere in the website. The information that will be presented in a scroll format are Why bamboo is best, Handcrafted in the us, Styles, Colours, Packaging, Our development, Pledge Rewards and the Size Chart.

The second image shows the next two pages I have created a very rough wireframe for. The first is the dropdown menu which will be able to be clicked on from every page. The options on the menu are Home, Shop, Shipping and Returns and Contact Us. From this menu, when clicking Home it will take you back to the first page which appears when going onto the website which is all the information about the brand and its development. The second option is Shop; when this is clicked on you will see a page that looks a bit like the second drawing in the image above. This has the different options of what you want to shop for and the way in which they are displayed (showing: E.G. Price low - high). The the products would appear below these options with the name underneath the image of the underwear. 

The final image shows the wireframes for two other pages I was thinking to include in the website. The Contact us page and the Shipping and Returns. Both these pages are able to be clicked on from the menu and once clicked on will bring up a page like the ones above displaying all the information that the viewer will be needing. 

Feedback:

After creating the initial wireframes we had a small group discussion about each others ideas with one of the tutors. My feedback can be seen below:

• Could look at using the pant waistband as the header of the page.
• Maybe create some mood-boards to define a colour scheme. 
• Look at more websites that are in a similar market to the Aubrey and Oakes Underwear brand.
• Use of light colours could be nice.
• Minimalistic design would work well.
• Maybe use the idea of pealing back layers of the website in order to view the product? - Similar to the way a person has to undress to show off their underwear. 

I plan on using the feedback I have been given when creating my digital wireframes and when starting to look at the actual design of the website.