I wanted to keep my website simple and realistic in terms of what I could potentially code. I started by applying my logo to where it could potentially be displayed on the site. I firstly chose to have my navigation top and centrally aligned. I chose the typeface Gotham as I thought it was bold and simple and worked well with the rest of my branding. When on the selected page the button will be underlined:
Standard website layout, with logo:
For the homepage I wanted a selection of photographs from my work that you could click on and it would take you to an individual page where their would be an overview of the project and more images of the work. For the homepage I tried making the photos black and white so the style of the website would be consistent and all the same colours. When hovering over a specific project the image would either go back to its original colour or have a faded opacity of the green colour I used throughout my branding.
However, after looking at the images collectively I decided my work didn't benefit from being in black and white and felt that the images looked more appealing and worked better when they were its original colour.
For my homepage I wanted the images to make up one big image without all the samples of work being the same size, these are the images of work for my homepage. i have also placed my logo on the page for consistent branding:
Individual page of website:
When clicking on an image of the work from the front page you will be taken to a separate page that talks about the project in more detail. A passage about the brief and the concept behind the design and the choice for the design direction.
This is the final layout for my individual pages on certain projects. The text chosen is the same throughout my range of branding to keep it consistent.
I do feel with that final mock up that it looks a bit like a jewellers website, this is down to the choice of type on the navigation bar I think. Either of these fonts would work much better as a design website. I think I will go with the top choice, letterhead std as this is in keeping with the rest of my branding.
Final page for individual project page:
I decided on a slightly off grey colour for the background instead of a white, I think the images of my work look better against a subtle colour.
This is a mock up of the page when clicking on a single image:
My contact page and about page are basic designs, including information about where to get in contact and a short passage about me, where I have studied and what particular parts of graphic design I am interested in.
For the homepage I wanted to show the image as it would appear before clicking on it to be redirected to the individual page. When hovering over it the image opacity will be lowered and a title of the breif will appear as shown below:
I decided to go with the typeface below as it is clearer and more legible for the viewer.
No comments:
Post a Comment