I decided to mock up a website by applying my new branding. I will hopefully get chance to build this website, but the style is something I have never created before. I need to find javascript that will allow me to slideshow fullscreen images as well as scroll through each project.
Homepage
The homepage will follow the logo that is used throughout my branding. There will be the square logo over the image i have decided to use alongside the brand, which is one of my dad. The square covers the face adding a element of mystery behind the person in the image.
As you can see from this close up, the three pieces of text will remain at the bottom of the webpage consistently throughout the website. The first stating 'Sam Lane Graphic Design', and the next two being my email and phone number. The email will pop up with a separate box to drop me an email when clicked.
As you can see from this transition slide here, as you scroll down through the website, projects appear one by one. A full screen image brings the impact of each project and the black and white keeps the theme running consistently, relating to the whole yellow. black and white branding.
Projects
Here you can see an example of a project when the webpage has been scrolled down from the homepage. This can be controlled by simply moving the mouse wheel / trackpad down or if you use the arrow keys, it will jump quicker through each project.
As you can see now from the images above, we have arrow keys in the centre of the page on the left and right of the image. These are what control the images that belong to the project. These can be controlled by simply clicking on these icons, or again using the arrow keys for a quicker response.
Heres a close up screenshot of the arrow icons. These are clean rounded lines which relate to the brand and typeface used throughout. The yellow also stands out well enough on both a white and black background which will be the photographs of the projects.
Information
Looking at a close up of the same page on the Bacardi project, you can see the link at the top of the page. This will stay there consistently throughout all the projects and is a quick link to more information about me as a designer. When this is clicked, it will bring a large yellow section that drops over the project image. This will remain here and can be minimised by clicking the 'hide me' link at the bottom.
Here you can see how this will look. This opens on the 'about me' section which has a simple paragraph explaining who I am and what I do...
"Sam Lane is a Graphic Designer and all round creative thinker, with a strong focus on branding and editorial design. He works in both commercial and non-commerical realms of design,and is always open to collaberate, so get in touch for enquiries. Each client and project requires a different approach and process. Sam realises this by offering the diverse skill set and creative network required to deliver intelligent and dynamic outcomes."
This close up shows the type in more detail. There are 5 links at the top of this section with information about myself. These are the About section, Services I have to offer, my CV, Contact details and a link to sign up to my monthly newsletter.
Information Pages
The separate pages in the information box are shown here in order ; Services, CV, Contact & Newsletter
Services I offer including a focus on Branding, Identity and Publication.
CV. This includes Education, Experience, Exhibitions and Selected Clients.
Contact. A Link out to my email and my phone number accompanied by more links out to other places on the internet you can find me.
A simple text box to type in your email address to sign up to the monthly newsletter. This updates people on projects I have been working on as well as part of my lifestyle.
Other Projects / Website Movement
Examples of the movement of the website and how some of my other projects might be displayed across the scrolling website...
Bottom Page
When the projects come to and end, The last image will move into a bright yellow screen of the brand. This will leave the user with a bold statement to finish on. This will be accompanied by the 'lane' logo in the centre of the page. The type at the top and bottom of the page will now turn black to contrast with the yellow.
Moving Gif
You can see by this moving gif how the website will function, using the scrolling down technique to move through projects, the arrow keys to flip through images in each project and the link at the top to bring down the yellow box of information about me and the projects...
