Wireframes & Designs.

A wireframe is like an architects ‘blueprint’ but instead of a building its of a webpage. It is the general hierarchy of the content, it excludes the images, buttons, colours, style, colour and graphics an focuses solely upon the functions, hierarchy of content and the different scenarios the site can be seen, desktop, tablet and mobile. Much like designing a logo for the first time, you must make sure it works in both black and white. The wireframe is drawn up in black and white, this can be done in multiple ways, there are many resources available for developers and designers on the web but you can also draw on paper, whiteboard or even a mockup within photoshop itself. Due to the simplicity of the concept of making wireframes, they are very quick therefore allows you to create many concepts in a small amount of time.

I also created physical designs with colour and images to help me visualise and decide which one would be best. I used colours that would best portray the business based upon the colour research, to provoke certain emotions in the user.

Here are my three wireframes & their physical design…

Number 1.

Wireframe-1

Mockup-1

This wireframe gives the user something relate to, it tells the story of someone who comes home to discover their roof is leaking, then called acorn roofing to get it fixed. You get to see as as user the result of using the company, this tries to my brainstorm researching the sales techniques, having interested the user, now at the end of the page, a telephone number to contact the business. This method works in theory but comes across as cheesy, childish and unprofessional. I decided not to use this as my design.

Number 2.

Wireframe-2

Mockup-2

The most professional and easy to follow wireframe, this is the one i decided to take through and actually design as a final website. It gives the user what it wants, a description of the company, confidence with using their services because of previous customer’s comments on the work that had been done and finally the contact details. This wireframe cuts to the chase and gives the user what it wants.

Number 3.

Wireframe-3

Mockup-3

Very similar to wireframe number 2 in the sense that it is designed to cut out clutter and give the user what it wants, its style is also very similar. The drawbacks of this wireframe is that the ‘above the fold’ section of the site is simply an image with the logo and contact details which doesn’t particularly entice the user to scroll. The contact section of this page seems to be quite messy also.

References:

http://en.wikipedia.org/wiki/Website_wireframe

http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing–webdesign-7399

http://uxmovement.com/wireframes/the-importance-of-tying-personas-to-wireframes/

http://wireframes.linowski.ca/wp-content/themes/darwin/images/PersonaTemplate.pdf

Trip to Ferens Art Gallery

As a group we took a trip around Ferens Art Gallery to study the artwork, and gather information that we could use to help us understand the creativity that took place when firstly creating the art, and secondly arranging the artwork around the gallery.

The questions I asked myself about the images as I walked round the gallery were;

– What is the image content about, and what emotions does it provoke in the user?

– How does the visual layout of the artwork attract attention, and further interest in the artwork?

– How does the general layout of the art gallery and the presentation of work effect the viewer?

– How can the certain images manipulated for the web to its best ability?

– What do I personally like/dislike about the work, layout and general presentation?

I studied multiple images, and here are the notes that I have for each image.

Featured Image;

(http://www.heritage-learning.com/wp-content/uploads/2012/09/st_ferens_slide.jpg)