Porfolio

I then sketched out a map of the portfolio and a few ideas about what will be included in each page.

I then made a very quick wireframe sketch for the main pages of the portfolio.

I then created more detailed wireframes using "Moqups"

I decided to keep the portfolio simple. I wanted to make it readable to to viewer on many devices.

I placed the navigation bar at the top of the page with large text so they are usable on touch devices such as Mobiles and Tablets that are smaller than desktop and laptops.

One change I did make to the design of the portfolio was the footer. Instead I decided to use a back button at the bottom of each page. I felt there was no need to have links to all pages at the top and bottom.

Before I started creating my portfolio I made notes to understand what I needed to do.

I worked out who the portfolio is for, what needs to be included in it, what browsers and devices it will be viewed on.

I decided that it needs to be suitable to be viewed in all popular browsers such as Chrome, Firefox and Safari.

I also decided that it needs to be suitable to be viewed on desktops and laptops as well as tablets and mobile devices.

I tested the portfolio on different devices and browsers.

Far left is a test screenshot in Chrome on an Ipad mini, portrait. The content filled the screen width and the images and text resized appropriately.

The other image to the left is a test screenshot in Safari on and IPhone 5c, again portrait. The content also filled the screen width and again resized images and text appropriately.

I also needed to test the portfolio landscape.

The top right image is a test screenshot in Chrome on an Ipad mini landscape. This test was again successful as the content filled the width of the screen and resized everything appropriately.

The bottom right image is a test screenshot in Safari on an Iphone 5c again landscape. This test was successful as the content filled the width of the screen and resized everything appropriately.

I did encounter some difficulties when creating the website due to the limitations of Hotglue.

To go make sure every text box were the same colour and text style, I had to clone them.
I also had to make them appear on every page in order to make the colours the same but had to clone the duplicates or the position would change on each page.

I also had trouble aligning sections of the portfolio.

To make all the pages the same and having the same spaces between boxes and to centre objects on the page, I had to use the grip guide. However I also used boxes to make sure the spaces were exactly the same as the grid is not small enough for such small adjustments.