Wireframes

The wireframe stage was most important as it allowed us as a group, to streamline our ideas, and get feedback on the designs we had created. The idea was that we would be able to create four wireframes each to begin with, two different designs for both desktop and mobile. We would then bring in both and discuss the benefits of each and the reasons for choosing certain elements of the wireframe. This was a good process as it then allowed us to com back with a better wireframe that combined the best parts of the first two. Once we were at this stage, we combined both mine and Aidan together to create wireframe that had the best parts of the previous wireframes. Since there were three completely separate stages within the design process of the wire framing it meant we were able to smoothen out any flaws within the design. Below you will see the process between the different wireframes.

Alistair Kenyon-Brodie First Desktop Design

Alistair Kenyon-Brodie Second Desktop Design


Alistair Kenyon-Brodie Combined Desktop Design

SECOND MOCKUP - DESKTOPAlistair Kenyon-Brodie First Mobile Design

SECOND MOCKUP - DESKTOPAlistair Kenyon-Brodie Second Mobile Design

SECOND MOCKUP - DESKTOPAlistair Kenyon-Brodie Combined Mobile Design

MOCKUP-MOBILE

Aidan Crow First Desktop Design

Aidan Crow Second Desktop Design

Aidan Crow Combined Desktop Design

Aidan Crow First Mobile Design

Aidan Crow Second Mobile Design

Aidan Crow Combined Mobile Design

Combined Mobile Design

FINISHEDWIREFRAME - MOBILE

Combined Desktop Design

FINISHEDWIREFRAME - DESKTOP
As you can see the wireframes began with a very simple design, something worth noting from the offset is the way both of the designs contain an overlay on top of the welcome image. Aidan’s was the logo, mine was the greeting message, this is something we decided from the beginning that we should keep for the final version, and you can see in the final design that the images have an overlay that is specific to their state. Aidan and I had a similar idea when it came to the categories page, and how to present the different ones. Mine consisted of segments with images inside that represented the category while Aidan had a blank page which held icons for each category. This is again something we combined, so that the background image changed to something that related to the category when you hovered over the icon.

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