Wire Framing

For this project, me and Alistair in total made 6 wire frames, firstly we made two for the desktop and two for the mobile, and then arranged to meet up at college and talk through our ideas towards the structures of the websites. We then mashed the best of each design together, and met up again to talk through the page in which we had decided for both desktop and mobile, we then merged these ideas together to create the ultimate and final wire frame design, for the desktop and mobile.


First Wire Frames


Here are the first set of wire frames, my ideas towards the design and structure of the website, I went down a more interactive and highly visual root.

Home Pages (Mobile & Desktop)

 homem2 home2m1 homedt2homemob1

For the product selection on the website or the store page, would be built up of three different pages. One too select the style of hoster, and then the next page to select where about the holster would be located on the body.


3 Product Pages (Mobile & Desktop)

product2d2 productd2 productmob2 productbodyedt2 productpagedt2 productpagedt1

Next is the FAQ page, the idea behind the buttons on this page is inspired from the WALMART drop down menu on the latest version.

FAQ Page (Mobile & Desktop)

  faqd1 faqmob2 faqmob1

The next page is the contact page.

Contact Page (Mobile & Desktop)

contactm1 contactd2 contactd1


Second Wire Frames


From the previous wire frames, me and Alistair discussed and analysed each others ideas, and criticised and spoke about which pages we liked and the one’s we didn’t. After speaking about our ideas, we combined the best bits from each design into one final individual wire frame for both mobile and desktop.

Mobile

homewebfinish

PRODUCT1MOBFINISHFAQ3MOBFINISH

PRODUCT2MOBFINISHPRODUCT3MOBFINISHCONTACT3MOBFINISHDesktop

homewebfinish

PROUDCT3WEBFINISH PROUDCT2WEBFINISH PROUDCT1WEBFINISH
FAQWEBFINISH
CONTACTWEBFINISH


Final Wire Frames


We then after combining the best ideas from our first wire frames, talked through each others finished wire frames, and then merged them together to make one final wire frame, mixing both of our best ideas together.

Desktop

finishedwireframe-desktop

Mobile

finishedwireframe-mobile

Now we had a complete final wire frame, it was time to begin the design stage, and actually create the design of the website in relation to the research that had been conducted by me and Alistair

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