Portfolio Page Added

New Webpage

I have decided to add a Webpage to my main site based on my Portfolio with various works and computer products I commonly use every day including Adobe Creative Suite software and 3Ds Max.

Home Page


Portfolio Page


The Portfolio Page boasts some videos of an animatic which I have created along with a 3D model of a Jet which I created in 3Ds Max. This comes along with descriptions of what kind of work I do along with the types of computer software I used to create everything.

Website Development: Part 3

Almost There

During this week I have initially been working on the webpages, adding the new banner along with some newer features such as my box containers which have been set to hold the content within the webpages.

These containers were created using photoshop, the way I made them partially transparent is through CSS styling with various opacity codes which should make them cross compatible with many website browsers (I hope so..). If it isn't working on a certain browser then they should appear as an opaque container, not partially transparent.

In the About webpage, I have created my own image gallery, the user simply clicks on the image to make it expand. Then they can click it to make it shrink back to the thumnail size again. Again, this has an issue with Internet Explorer, it works but when an image is clicked, the webpage basically refreshes with the image appearing but the page jumps back up to the top. This will have to be fixed through CSS. The Contact and Fun webpages are pretty much in the same layout as the new Home and About webpages, but using the new transparent box containers improves and layout and visual features.

Website Development: Part 2

Banner

I have initially decided to change my banner and hyperlink images in order improve the features of each webpage. I have also decided to increase interactivity the user has with the website. To do this I have decided to create some rollover buttons using Adobe Illustrator and Photoshop (CS4). By simply creating two of the same image but different colour, I have been able to make a rollover hyperlink image. When the user moves the cursor over the link, it simply changes colour indicating where the cursor is focused.



As you can see above, the banner has been completely changed with different gradient colour usage and some 3D streak effects, which I will be applying more to the website later. The rollover hyperlinks are below the header within the content area; this makes it easier to identify (also due to size). The example shows that the Fun button has been highlighted red and the other buttons are not and this is due to the cursor rolling over the area.

Website Design: Development Part 1

Development

I have initially decided to being editing my website to finally increase my web presence.

I have been dismantling the website, taking out bits of old code and adding new material to increase the general visual quality of the site. I have completely dismantled the Homepage and because the CSS is one document and applies to all webpages. Heres an image to show the current construction.




The image above displays the current situation with the Homepage. The overflow scrolling box, images and the footer have been removed. The headers image has been shortened to 800px along with the content areas. This I feel makes it more centralised and more suitable for my website. The website hyperlink images in the header will be changed and my idea for this would be to used flash to make new buttons which will be animated, creating a better interactive effect to the site but keeping in mind not to over do it.


Webpage Removals
I have removed the Welcome and Music webpages for now. A preloading splash screen might be added by creating it in Flash CS4. Or I may go without. The Music webpage with the images will be completely removed. It has no true purpose within my website if I want to create a better web presence for myself.

Research

Website Research
Following in the Footsteps of Professionals..

I have researched into three interesting websites which are the most appealing to me to work by in order to increase my websites visual style and quality to become an ultimate online portfolio. By looking at all three different styles and ideas I have really found some great hints on how they have made certain elements to their sites to make them perfect as an online portfolio. The main hints that I have discovered is that a lot of these elements are being created by Adobe Photoshop and Illustrator and are simply being uploaded as a template to complete the website; this is what I will plan to do in order to achieve a successful looking website.

Website: 1.


This website above is very detailed and interesting, the house styles work very well and the layout is very interesting, however. There is a lot of unused space to the right which is being used for virtually nothing so reducing that or maybe making the layout central would improve the visual quality. The font style and colour works well with the website but doesn’t strive to help colour-blind users like myself. The hyperlinks are very small; some users might find it difficult to navigate. I like the background colour choice and it brings focus to the white font text. Will experiment this kind of idea one my website.

Website: Toby Powell


This website is another very detailed and interesting website. The house styles work pretty well and keep to basic blacks and whites and shades of gray (ideal for colour-blindness). There is a lot of unused space to the left, it’s just an image and a part of the main banner dominates the top left space. The font style and colour works well with the website but isn’t very large. I wouldn’t use this style at all. Crumpled paper for a background is original but boring. The hyperlinks are very small; some users might find it difficult to navigate but are much clearer than website number 1. Blog links are small icons. In my website I would definitely target larger blog and various site links to encourage users to visit them.


Website: Christian Cook Portfolio



My friend Christian Cook’s Portfolio website is very interesting and very detailed. The house styles work very well with the black background gray/white/light blue text and the amazing XML gallery hyperlink banner (links to his blog works) under the main links. It is very central and uses the best of the space to dominate the central area which is ideal to keep focus whilst reading the information. The font style and colour works well with the website but isn’t very large. I would definitely use a similar style to this, but I would really go for a larger banner to cover the top centre of the page along with large, interactive hyperlinks similar to this. The hyperlinks are very small; some users might find it difficult to navigate but are much clearer than website number 1 and 2. I would consider this kind of layout and style more than website 1 and 2.

Website Design

Website Improvements Brief

My current website Lee Cunnington.co.uk needs some work on it to make it more of an 'avatar' to myself than it currently is right now.

Improvements

- Integrate blogging with website to make it one base identity (maybe).
- Improve image galleries within website to make it more interactive and user friendly.
- Remove/Edit Welcome page its not very necessary as the user would primarily want to move to the main page of the website straight away instead of messing about with a welcome page.
- IMPORTANT: Edit website to become more Internet Explorer friendly not just FireFox, this is because the majority of users are still using older internet explorer(s) and new versions have been put in place. So improving my website to maintain the goal of being open to everyone visually is a main mission.
- Improve visual features of the website/improve homepage. Animation using flash will be useful, animated image galleries, improvement in color and font faces.
- Overflow scrolling bars might be removed, this is because the user can just use the main scrolling bar on the webpage. The text seems to be limited to the space of the overflow scrolling box area, so it needs freedom from this.

Presentation

Yesterday I presented my presentation to the class, it went fairly well.. no matter how nerve-racking it was. But I did it. Glad it's done.

I have uploaded it onto Slideshare: Lee Cunnington IDAT101