Final Website Layout

 

This is the final layout for my personal website. The idea is based on the research that I have gathered from looking at existing design websites. I have incorporated all different elements of websites that I have found which appeal to me to create the above layout.

This layout is simple, subtle, easy to navigate around and will have simple animations to make the website more fun and interactive for the user. The website allows the work that I am displaying become the main focus of the website rather than having an overpowering website both in colours and design.

Final Website Research

I have done my last bit of research on existing websites for campaign advertising to see what colours, layout, animations and gallery ideas they use so I could incorporate this within my website.
Below are my favorite websites that I have found.

This is a simple but creative website design. The logo that this companies uses is the same shape as my branding so it would fit in with the style of this website. The buttons are small so they are not the most dominant graphic on the page but can still be easily seen. This also leave a big gap for the viewing window so the work can be seen on a big scale.

This is a gallery that I have found which I am going to use. It outlines the work that is being shown and the simple tab menu at the top is an easy navigation method to use but also fits in with the design of the website.

Branding

For the branding for my website I have decided to stick with using my name. Instead of using my full name as I did on my first inital idea I have decided to go with using my initals as this still makes it personal to me but I can be more creative with the branding if I am only using two letters.

The design that I have decided to go with is the round circle with my inital inside of it. My first idea was to use the initals of my name and choose a font that when the "s" and the "a" were close together they would form a heart. This would make the website look feminine and it would add a creative element to my branding.
In the end I decided not to go with this idea as with the first logo design that is above it looks too forced and does not work. I am going to use the first logo on the second line as it looks formal but not to corporate. It is a fun friendly and easy to read font.



 

I then added some colours to the logos to see what colour scheme would work best within the website and what two colours complimented each other. Purple and cream are the chosen colours for my branding.

Simplistic Website Designs

Above are some more websites that I found that look simple but work as they help highlight the work and buts all attention on the work rather than the website.
All of these websites use the thumbnail idea to view the work as I have previously mentioned so I will defiantly be using this idea in my website.
Another thing I really like about the above websites is the simplicity of colours that have been used. I want to used pale, subtle but feminine colours to help compliment my work.

Inital Ideas

This is the first inital idea I had based on some of the website that I had been researching.
After creating this first layout there are a few changes that I want to make before creating my final design layout.
The branding that I have used for myself is too overpowering. It needs to more subtle and recognisable as a logo and a brand.
The buttons being aligned in the center don't work as it looks too much like a power point presentation. The thing that i do like and will be using in the final design is the square thumbnails to view the owrk. This gives the viewer an indication of what work they can view and make it easy for me to add new projects to the page as of when I have more work to upload.

Website Animations

I have been looking at websites that have animations when viewing different pages and viewing work as I think this makes websites look more fun and intriguing to viewers.

                                http://studio.carioca.ro/


This website has nice animations when choosing a page to view. On first opening the website the image is aligned to the left but when you click on a page to change to the image slowly animates to the middle. Each page runs smoothly and effectively.

                                http://www.yestosafesex.com/

This is another website that works well because of the animations that is uses. This website is different to any flash website as I have seen as it animations along a horizontal line depending on what page is clicked. I also like the graphics and colours that are used within this website.

Gallery Ideas

The first idea that I have had to display my work in a gallery to to have a scroll menu which will move either left or right depending on the position off your mouse. I have been researching various websites that use this technique and any other gallery ideas that i like, to see what various different styles and designs there for displaying your work in a website.

http://www.brookpifer.com/#/Portfolio/Campaigns/1

What I like about this is there are no arrows to choose whether you want to forward or back. The image is the button and depending which half of the image you roll over with your mouse, it will take you that way. This is a creative and different idea and looks a lot better than having to line drawn arrows underneath the images.

http://www.tomnagy.com/publish/html/index.html

This website uses the scroll menu to display thumbnails of the gallery. Its runs nice and smoothly but the only problem is getting the menu to stop when you have found an image that you want to view, the menu does move quite quickly.