Navigation Bar

Navigation Bar

I made the navigation bar in Illustrator. The reason I used Illustrator is because of its user friendly way of being able to create images. Also to be able to create images in vector and not bitmap so if the images need to be made bigger they will not be distorted. There is also another program called Flash which can also be used to make images, but thats more for animation and I find it harder to create images in, I find the tools more awkward to use and they can be very annoying, though useful for creating flash animations. Which I am thinking about creating and including in my website.
Here is the navigation bar from the 3D modelling page. As you can see not all the link pages are there. The original plan was to when someone goes onto the 3D page the 3D link would change into the photography link as you don't need the same link on the same page. But this proved to complicated and confusing. So I had to insert another link which is the photography link. I decided that the 3D modelling link should stay there it should just blank out and unusable.
Here it is in dreamweaver. Each link is a separate image and put together in a table. When in a browser and you hover over a link with the mouse it will light up.
When the link lights up this is another image. Also the when the link is blanked out this is another image. So altogether there are 3 images per link, blanked out, idle and highlighted. These are all stored in the image folder where they all can be found. All the pages use the same images so there is no need for multiple images and it saves space.

Gallery Page development

Gallery Page development

The gallery page will be similar to the photography page and because I have decied to keep all my page similar to each other to keep relations between them. Also because of my research has proven that website pages all look similar to the home page so you know your on the same website and haven't drifted of somewhere else.

1: This thumbnail shows that there will be a title 'Gallery' and then a table of small images altogether, each gallery page will have its own topic so it will keep the all divided and more organized. There will be a small image which will be linked to a bigger image, so the page isn't jammed up with big images.
2: This thumbnail is very similar to the first one but with some changes. For example the title has changed from 'Gallery' to 'Photography' and I have 'More' and 'Back' buttons incase the images do not fit on one page.
Final: I have decided to use the second thumbnail, as the more and back buttons will come in useful also the title 'Photography' is a better choice as it keeps the relation to the Photography page.

Photography Page development

Photography Page Development

Thumbnail designs 1

Here are some thumbnails for my Photography page.

1: This is a simple idea I had. I thought the photography page should have a photography theme. So I thought about using film negatives. There are three for each page, for chimp, car and Landscapes. It is very simple and I think I can develop this idea into other thumbnails.
2: Here is another idea and includes the idea from thumbnail 1. I have also expanded on this idea by making the page background a slide from a negative. Also I have made the 'Photography ' title in the style of the home page which is a blue print style. This makes the whole website relate together a bit more.
3: Idea 3 is a completely different design from the others. Everything has been made up of photographs. The title has been re-designed in this style as well. Though I do prefer the Blue Print style. The other three pictures are links to there own galleries. These are also styled as photographs. This is an idea I could use and expand on.
4: My 4th idea is also very simple. It's just three photographs hug up on a washing line. These photographs will be linked to their own galleries. The image behind these photographs is a SLR camera, its not very well drawn and unfinished. I do not like this idea, it looks a bit dull and uninteresting.
Final Possible idea: A possible page layout has been mainly taken from thumbnail 2. This is a good design because it has a Photographic theme, it continues the blue print style in the logo. There three links to the galleries when hovered over by the mouse will light up and little images will show up in the slides.

Thumbnail Designs 2

1: This idea uses many ideas and designs from the first page. It has the negative film and the photographs with also the blue print style Photography title. I think this thumbnail is a great page design and I think my this page will be mainly designed on this thumbnail.
2: Again this thumbnail is used many designs from the first design page, though it's different from the other thumbnail because the negative film is in front and the photographs are behind the negative. The title, though not designed correctly will also use the blue print style.
Final design: I have used my first idea and I have added some more detail and made some necessary improvements. I have added a navigation bar at the top so you can easily go to different pages with out having to go back to the home page. The navigation page will also be in a blue print style.

Here is the title and link area at the top of the page. When you hover over the links they will lighten up to show they are link and are useable to the user. I have carried on using the blue print style design and I have kept the same background image. I am planning to change the colours of the background, but it will still be the same design.
Here is the new colour design for the background of this page. I simply changed the Hue of the original background.
The title and links have been added to the page. Its looking good so far!
In Illustrator I have created a film strip which can be added as a background image, which will give the page a more photography theme to it.

Now to add some Photo themed links. Which are going to be photos which are links to pages. For example. There will be an image of a landscape, that will be a hyperlink to the Landscape page.
My page is now complete. I must now cut it up and make it a lower resolution (800x600) so I can put it into dreamweaver and make it web compatible.

You can not just import the whole image into Dreamweaver, things need to be cut up into single images and imported in. To do this I must select the Marquee tool and cut the images out. The images must be cut out in a square form, or have cut out holes in the image. This can now be imported into Dreamweaver as a background to a Div tag.
The images will be links to galleries. The images you see on this page are separate images and have been imported and placed on the page by using a table. A table is a lot like the building blocks for the website, like they are for a buildings. Its a structure.

I must now test it out in a bowser to makes sure everything is sitting correctly and not out of place. I must try it in different browsers to make sure they are compatible.
Here is a shot of it in Dreamweaver. I have made some adjustments to it. I have added another link button, its the Photography link. As its the same link on the same page I have blanked it out and is not linked to anything.Here is the website in Camino. Success! Everything has come out how I have wanted it to!
Firefox: Again! Success! No problems!

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!

Information Architecture Map

Information Architecture Map Development 1

Here is the map for my pages and links. The start is the home page (Red) and then that leads of to the four main pages (Blue): About Me, Graphic Design, Photography and 3D Art. They are in any order so the order of these pages my change. After these pages we have sup-pages (Orange), basically pages that are related to things on the pages before. For example the Photography page has three photo albums on it these extra sub-pages will have the galleries for these. I think I have enough pages and topics for my Portfolio website. I don't want to overload my website with pages otherwise it may get complicated and people may get lost!

Research - Moonfruit

www.Moonfruit.comMoonfruit - Moonfruit is a flash website designing company where they give you a flash based website template which you can then change, alter and manipulate to how you desigher your website to look like. Also no coding or computer programs are needed for this, its all the features and settings are all done on the moonfruit website via an internet browser. You get given user friendly toobars and design features which are free to use and if you would like to upgrade you must start spending money.

The Moonfruit site itself isn't a very complicated design and is very simple to understand, read and use! It explanes what the website is about, what it does, how, support and anything you really need to know about the company.

Research - Google

www.Google.com
Google - Google is a search engine. You type in your desired search requrest and click on Google search button. It then searches the web in seconds for your request and lists them on a new page. If you have an incorrect spelling it will give you an option to correct this. It doesn't auto correct because your words maybe correct but google doesn't recognise them.

The simple layout design of this page makes google very fast, easy to use and very reliable. It can take less then a second to load up the main home page and it usarly takes 0.50 seconds to list search results.

As well as web search there is also an image search, videos, maps and news. It has many uses and because of these it is used around the word in lots of different langauges.

Google only uses Html code.

Research - Facebook

www.Facebook.comFacebook - This is a social net working site, where inderviduals can create a profile about them selves; interests, hobbys, what they do for a living and things that they do and don't like doing. They can then search for friends that they know, for example, old school mates and long lost friends. Then they can easily communicate bettween each other for free.

What you can see on the image is the main home page. Where you can login or for new users create there very own profile. This page is nicely spread out and well designed. It can load up in seconds, so its good if you have a slow download speed. It also fits on the page with no scrol bars. It is very easy to read as its for all ages and is set up for different langauges. So anyone from around the word with internet access can use this site.

The main page has a signup form so its really easy to just sign up and create a profile with no hassel of clicking loads of links.

Compaired to Youtube, there are alot of differences! The website use (Video and social networking), the stlye, colours and the whole design and set up.

Facebook has been built using Html code with included Javascript to create more complex features.

Research - Youtube

Research - www.Youtube.com

My first research website is www.youtube.com I'm going to compare and evaluate.

Click to get bigger image.

Youtube is a very popular website and used by millions. There goal is to let inderviduals to upload there very own videos of what ever they like as long as it doesn't break there polisy or code of conduct rules. The idea is to "Boradcast yourself".

Brief Analysis

My project is to create an online portfolio, the portfolio will include my college work and other work I have done out side of college. There are a lot of things I have done that I am not happy about, depending on their condition I may not upload these designs. It will include my photography, drawings, 3D models and computer images I made for college. For example; calendar, company logos , leaflets and animation.

I was thinking of using bright colours for my website; oranges, blues, purples and greens. These bright colours will make the website stand out in front of darker websites and it will look more cheerful. I will first design my website with pen and paper, then build on that to get a design I am happy with. I will design my website in photoshop so I have a template and build it in Dreamweaver. I was also thinking of having a [age that scrolls across, from left to right and not up and down. Though this may not work out!

Each page will have a gallery which will hold the images. If you click on them they can be viewed at a higher resolution. Information and details will be included with the images so there is an explanation about the image being viewed.