OUGD504 - Studio Brief 2 - Final Design Boards.

In my design boards I wanted to show the concept, solution, visual branding such as colour coding and font use, design and usability and then what it ended up looking like.

OUGD504 - Studio Brief 2 - Final Coding and Finishing.

The first element I coded was the navigation bar of the homepage.

CSS

HTML

Rollover Navigation Buttons

Next was the contents of the homepage. This was a grid of four rollover images.

To code the landing page, I used the same container size and placed the type as a png into it with the rollover button placed over that. The button would link to the homepage after the audience were made aware of what the site was for.

To code the dialogue throughout 'What Camera?' interactions I duplicated pages and added amendments in the coding for links and different buttons/images. These were done for every possible way of answering questions and organised as well as possible. This lead to 30 different pages just for the results.

 For the shop page of the website I needed to make the grid effective of the space in the container available I did this in the following way:

The column spans were duplicated four times with different rollover images and links to the other products to make everything equal.

Each product page would contain the same coding with two variations of 'add to cart' buttons and a different background image for each one.

The checkout page was coded the same without the further buttons.

OUGD504 - Studio Brief 2 - Final Layout and Interface Design.

I wanted my layout and interface to match my new branding, smart, clean, mechanical and straight-forward.

I sketched out the idea of my homepage so it was very similar to my previous one but with a better spaced out navigation bar and a grid view on the home page with photography on it which would link to different pages.

After sketching it out I decided not to include the social networking buttons as I wasn't quite sure what the point of social networking would be with a site like this as it had a contact page.

I placed the buttons I created on illustrator onto a digitally made art board of the correct dimensions and scale to make sure everything worked together nicely. 

My only thought was that the logo would be a link to the homepage so this should appear as a button too which was easily amended.

Now the design of the navigation bar was complete, I began work on the content area of the homepage by creating a grid of four equal sections and placed a square in each to represent a photograph.

Once the photos were found, resized and edited, they were then laid out into the designated spaces with one viewed as a rollover to give an idea what the site would look like in action. I really really liked the look of where this was going. It looked professional, clean, simple to navigate, mechanical and everything I was aiming for.

I realised after all of this had been designed that I hadn't fixed my original problem of the site not explaining what it did or what it was at the home page. The way I will fix this is to create a landing page which explains what the page does, that will then link to the page I have designed. Going for a slightly humorous introduction, visitors will be encouraged to click through to the website for the content they want being made fully aware that this website is catered for everyone.

For the first page of the 'What Camera?' dialogue I used grids to lay out the photograph title and the buttons linking to the following pages, these grids derive as halves of the original content grid for consistency so will be used for the rest of the content pages.

I didn't like the fact that the body copy was hard to see on the photo so I tried scrapping the photo and it worked much better. The rest of the pages following this dialogue will be exactly the same but with different links.

I designed the recommended camera page in the same format but with the body copy on the left and two buttons on the right to help the audience navigate. The lens page would be exactly the same but with different buttons.

For the terminology page I made two content page's to cover the specialised vocabulary used.

For the contact page I designed it to all be left aligned with the submit button on the right.

Once the user clicked the submit button, they would be lead to a page which thanked for their efforts of contact and that they would get a response as soon as possible.

For the shop page I wanted everything to be laid out in a very tight grid which kept in consistency with the rest of the site. There was a total of 16 products which made things a lot easier as it would work out well with a 4 x 4 grid.

For the product pages I needed to include the product photo, the name, the price and the description with the ability to add the product to the cart. This needed to be reproduced for each product. This would also be as far as the website would go as I am not capable of coding the shopping cart page to be responsive with what the user selects. 

This however will be designed anyway as a proposal.