Tuesday, October 13, 2009

Home Page Development

Home Page Development
I started off with a good idea of making a 'Blue print' style to my first home page to show, skill, technique, precession in my my work, and also because I like the look of it!

Drawing 1 (Top Left):
This idea was to have a simple welcome message "Welcome to Mikes Portfolio" and then to have the four link page buttons in the middle with a graphic in the middle of them and surrounding them. The graphic will be something in the style of a blue print. The graphic is undeveloped.

Drawing 2:
In this thumbnail I am going in more detail with the welcome message. Again making it in the style of a Blue print, using straight lines, dotted lines and arrows. I also thought about including a pencil and rubber to make it look like its just been drawn or its a table in front of you.

Drawing 3:
In this design I was creating a graphic which could be placed on the home page which can relate with the links. I don't want to have a very complicated design, I want keep it fairly simple so its not taking up all the space and I don't have lines everywhere. So a square cube I thought was a good idea.

Drawing 4:
This design was another idea I thought of instead of the cube. It is another simple design which I could use. The image is a picture of the world. If you hovered the mouse over the links, the land and the link would light up. I do not like this design as its not related to the blue print idea

Final:
The final design is a simple design on what the page may end up looking like. I have taken ideas from all of the other designs and merged them together to get something that I like and something that I think is respectable.

I have built the home page in Photoshop. I have also made some improvements on the design and details.

I have designed a artistic background to make it look more interesting and it gives it more of a graphical style, I am really happy with it! I didn't like the pencil and rubber idea so I didn't include it.
The cube was created in Illustrator. With Illustrator I can easily create images for many reasons. For one, Illustrator creates shapes and objects using 'Vector' an not 'Bitmap' so images can't get distorted when stretched and Illustrator is more user friendly for creating your own images.

When the mouse hovers over one side of the box, it lights up and is linked to the other pages. Which I am please about, the Home page now looks a lot more interactive! Though the 'About Me' page link is missing. This will have to be included somewhere. I have been thinking about putting it under the title where the purple coloured section is. It also might be a good idea to put the other links with it, so it still fits in with the other pages and so the about me page link isn't on its own.

I must now cut up the page and re-build the site in Dreamweaver.
I think the page looks great! I am really happy with it! I still think its missing something. It still seems bit plane. But I should expect this as I wanted something similar to the Google home page, not to many images, it should fit the page with no scroll bars and its very easy to navigate! Lets try the page in a browser!

First Camino: Excellent! No problems!

Secondly Firefox: Great! No problems here either!

Has you can see in the next few image the link highlight when you hover the mouse over them!

No comments:

Post a Comment