Reversing the Process

For homework, we had to reverse the process for the site firstchoice.co.uk. I began with the sitemapping because I found this the most difficult of the two processes.

Sitemap

I decided to do it in Photoshop which ended up being a bad idea because it took a lot longer than I had anticipated and I noticed you can use Balsamiq for sitemaps too only after making it in Photoshop...

On second look, I realised that the 'home' box should be more centralised. I tried to find pages linked through 'extra' and 'last minute deals' but could not find any. I do think that this still demonstrates the basics of a sitemap however. 

Wireframes (Digital)

For the wireframes, I felt more confident about making them because it seemed more straightforward. I decided to approach each wireframe in a different way; both digitally and by hand to experiment on the most effective technique for me. First is the Balsamiq one:

This took me a considerable amount of time to make because I tried to be as accurate as possible. Whilst making it I really understood why we were reversing the process in the first place. If I just dived into making the wireframe for my own website, I would not have the knowledge I gained form this task; the knowledge of building the site and knowing exactly where to place things for their best effect. Each component is like a Lego brick that slots into place and they all work together to produce the result. I think my design eye has improved because of this.

Wireframes (Hand Drawings)

The first hand drawn wireframe was pretty straightforward. Handrawing was quicker for me, but not as accurate and neat; some boxes and images are not to scale and my lines may not be as straight as they could be. It was also hard to judge the size of the page and not run out of space on the A4 paper. Next time I would focus more on measurements although this is what Balsmiq is for.

First Drawing (And Screenshot):

Next I did a longer page, so I had to use two pieces of A4 as I ran out of room on the first. my first choice (pun intended) was to use A3 but I think the size of A4 represents a scrolling page more. I was less neat on this one because I wanted to try a different style. If it is hand drawn it may as well be a sketch in my opinion.

Second Drawings (And Screenshot):

The Design

I noticed quite a few design patterns of the website whilst reversing the process. Firstly the colour scheme was consistent the whole time. Then I noticed the picture-tile designed which is becoming quite a popular choice in websites recently; presumably because of Microsoft's Windows 8 an Phones using the tiles layout.