Self Branding - Web Presence

I started to apply the brand across my online identity to see how it would work and function, successful or unsuccessful...



Behance

Twitter

Facebook

Tumblr

Cargo

Self Branding - Website

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...

Self Branding - Logo / Identity

Logo Development

I tried to create a more contemporary looking logo, which added a little bit. In the end, I realised this was a little bit too stylistic and not really true to type of Graphic Design that I'm creating. I'm quite a contemporary designer, but like to think that I'm not just a one trick pony with the Northern European style designs. This is why I stripped it back to the basics. The clean cut square with the four letterforms inside.

I also experimented with some different typefaces before finally selecting the chosen typeface in Avenire. 

You can see more of these experimentations in this scribd document below;-

Final Logo

I slightly adjusted the alignment of the letterforms so that the logo was easier to look at visually. The alignment of the 'A' and the 'E' now fit much better together 

Logo x Imagery

I found that the logo works brilliantly over black and white imagery, tying in with the theme. I used this old picture of my dad as part of the initial branding, but you can also see how the colour and different shapes can work over any black and white imagery relating to my work or lifestyle.

Stationary Set

Business Cards 

I wanted the business cards to be different to anything else that i've seen before. I also wanted the person who received it to get a sense of worth when they held it or looked at it. I thought I could achieve this by carefully selected the stock, the weight of the stock and the finishes to add a really tactile and luxurious element to the cards that will make someone want to keep it but also give them a sense of the style of design i create.

 I think these designs do both. I like the idea of using the pulp finish of the stock, real thickness, with the addition of the yellow stock sticker taped over the edge of the card and also maybe and embossed finish.

Letterhead

I applied my brand across various different pieces of stationary starting with a letterhead. I wanted to keep this simple and following the theme of my website, used the type aligned to the bottom of the page with the logo on the right. 

Moleskine / Notebook

The logo is easily applied to a moleskine and notebook through the bright colour scheme. Central alignment of the logo tends to work best. 

Stationary

Ipad / Iphone

Self Branding - Concept