Final Portfolio Website

Evaluation

As the final task for Unit 44 Website Design i have designed my very own portfolio website in Photoshop. I have then taken the design in parts into Dreamweaver and used a mixture of coding in html and multiple styles in css to make it work and turn it into a fully functioning website.

Over the course of making my portfolio websites i have learnt a great deal about Dreamweaver including how to use div-tags, what the difference is between a div id and div class and many other things such as how to use styles effectively.

To start with i researched similar styles of portfolio sites to the one i wanted to create. I searched for stylish and simple designs, and found a few that influenced my first design. After trying to code my first design and finding that it wasn't working in the way that i wanted, i decided to start fresh. This time i made sure to make everything simple and aligned with rulers so it would be easy to cutup and easy to style in dreamweaver.

Now that i had the design sorted, it was time to go into dreamweaver. At first i found the process very hard. I had designed my site very simply as i knew i would struggle to code it well, but even then it seemed i couldn't even do the simple things. After some time i became more comfortable with the html side of things and understood how to write div-tags and make them work how i wanted them to. All that was left in my way was the css. I watched countless videos explaining how to layout a page but every time i tried to apply it to my own page i would just come into problems i didn't know how to solve. With some luck and loads of research i ended up using bits and pieces i had learnt from all of the videos put together to achieve what i wanted.

I am not entirely pleased with the site i have created but i believe that it is a good start for my first ever fully functioning website. Next time i create a site i would like it to look more stylish and more advanced so i can show my full potential to anyone going to it. I set out to make it simple and stylish which i think i have achieved. There is still room for improvement, for example i could make the gallery page better to look at and more functional. Also i have still yet to write the About me and Contact page in full, but they can be added easily at any time. Overall i believe i have created a well set out site that is easy on the eyes and easy to use. I have accomplished what i set out to make. Not only that but i have learnt a lot about web design as a whole on the way and now find it more enjoyable than i did to start with.

Below is a short video showcasing my site running in a browser.

Ideas and Development

Below are various different versions of a site design i have come up with for my Portfolio website.
I decided to go for a simple minimilistic style that is easy on the eyes and very clean.
This made it easy to design and easy to tweak, making the layout different each time but still looking good.

Not only have i made it simple so its easy on the eyes, but i know that i am not that great at coding, so making it simple will give me an easier time when i eventually take it into Dreamweaver.

Initial Design :

Variation 1:

Variation 2 :

Variation 3 :

Variation 4 :

Creating in Dreamweaver

Produce a basic page template in dreamweaver

Here i have followed a Beginners Tutorial on making a Basic Website in Dreamweaver. The site is compiled from a number of Banners and Images with some links near the bottom which will take you to other pages.

It was coded using div-tags in html and various styles in css.

Research Web Design issues

Good Websites :

Here i have done some Research and found some creatively designed Website Layouts which are very different to your average layout. I have written my opinion on each one on why they work well.

http://digitalmash.com/

As soon as you open digitalmash in your browser you will notice how quickly it loads, this adds to the easy access factor for the user and will stop them leaving from being impatient. Secondly you will notice the simple and clean layout which is matched with the "easy on the eye" colors used to create an all round mellow feeling. You can easily navigate to a word from the page and click it which will reveal the text attached from underneath, this gives a good balance between a fixed and fluid layout. Also not only is the font easy to read but the language used by the author is very down to earth, almost as if you are having a genuine conversation with him. Overall i think this is a very simple clean layout which is very user friendly and relaxing on the eye. Definitely a layout i will be taking inspiration from.

http://melissahie.com/

This website for a start has an amazingly quick load time, almost instant. On the home page you are greeted with a very simple yet attractive vector graphic which will keep the user interested and encourage them not leave. The contrast of colors between the background and the graphics makes them stand out yet still keeps it easy on your eyes. The headings are easy to read and stand out from the background very well. When you have stopped admiring the impressive graphics and get around to clicking on one of the headings, you will be greeted with a nice animation that will slide your screen across to the desired section of the site. Overall i think this is a very cute and different idea for a website layout, i think the sliding idea could be used as inspiration.

http://basilgloo.com/

I found this website quite amazing. When you go to the web address you are greeted by a loading screen with a funny animation of the creator jumping, this doesn't last long so isn't too much of a bother. When the sire has loaded it doesn't look like much, just a glamorous design with some words... but as you scroll down the whole site comes to life. The creator you see stood in the middle starts to get crushed b the top of the page and everything on the website starts to appear on the paint strip running the the middle, everything has an animation as it goes and comes of the edge of the page. Overall i believe some of the text could be made slightly easier to read but this site is definitely enjoyable and a great way of getting people to notice the creator and his style.

http://sitotis.hr/

To start with, this site has a great load time for the high quality graphic it is based upon. It is set out in a very creative style as you can see, yet keeps everything easy to read and simple. As you click the tabs on the right you will be taken to a new page in the book, which again loads very quickly and is set out in good order. There is not much i can fault about this site apart from that it would be nice to have a page animation every time you clicked a tab.

http://thehorizontalway.com/

I really liked the style this site used. It is very creative and different from your bog standard average website. Instead of scrolling down to read the content you scroll sideways by either using the arrow keys or of course using the scroll bar at the bottom. I thought the grungy design fit it well and everything was quite easy on the eye. The only things i can fault it for is that some of the text may be hard to read for some people, and that it should scroll when you put your mouse to the edge of the screen. Apart from that this was my favorite design out of the 5 and would love to design a site similar to it in the future.

Research Web Technologies

1. Web site - Place on the web where you can get information

2. Web Application two way interaction application coded with web technologies

3. Uniform Resource Locator - Web link Hypertext Transfer Protocol

4. Content - stuff that is on the website. The information contained within. Content is King

5. Layout - The way the website is constructed - i.e. 3 column, liquid, fixed, blog, magazine

6. Structure - Elements of the layout - such as header footer, sidebar, menu

7. Cookies - small files used to store information about a session in your browser

8. Servers - the physical location of websites.

9. Remote - Machines containing websites external to your location

10. Local - Your own connection using a browser to the web

11. File Sharing - p2p system of sharing files between local machines

12. Ecommerce - Making money. The business of buying and selling on the internet. The virtual economy

13. VOIP - Voice over Internet Protocol

14. HTML - Hypertext Markup Language

15. XHTML - E(xtensible) Hypertext Markup Language

16. DHTML - Read Canvas

17. JavaScript - Programming Language, called a scripting language used for behavior (interactivity in web pages)

18. Perl - Used often for processing forms

19. PHP - PHP Hypertext Preprocessor

20. ASP - Microsoft version of PHP - called active server pages

21. Java - programming language used to make applications, web applications and games

22. Client Side Scripting - runs from the browser

23. Server Side Scripting - runs from the server

24. Cascading Style Sheets - Language to alter style of websites

25. FLV - Flash Video format

26. Canvas - Interactive Element which behaves like flash within an HTML5 document