Prototypes

This assignment has taught me a lot about website design. We started off by using the box model to figure out how website layouts were created with div blocks, etc. I also learned how to create a sitemap, and how to use Invision to create high and low fidelity prototypes. Invision is a great prototyping tool and makes the process very simple with it’s sync from Photoshop option.

I learned how to design a website on Photoshop and the basic rules that must be followed such as- consistency across pages, logical placement of items on the pages and using a call to action on the landing page. I also learned how to create a mobile version of the website.

I realised that my initial thoughts regarding how the website should look were not the best, and that it takes constant improvements and rethinking to make a good website. Throughout the entire process of creating mockups, low fidelity and high fidelity prototypes my website has evolved significantly. I have altered the appearance of the pages (font and type size, added a search button to the navigation bar,etc) in my high fidelity prototypes.

The main obstacle that I had to face was ensuring that all my pages had continuity. Initially all my pages did not match up as some were very image based and others text based. I solved this by using a blue footer as well as a blue panel (for the page title) on the top of each page. I also added images to the relatively text heavy pages. After giving it some thought, I realised that the contact page looked better without an image as it would create a cluttered look and divert attention from the contact form.

This assignment has given me insight into the process which one must go through in order to design a website.