Evaluation

Overall I am pleased with the final outcome of my website. I have managed to include everything I wanted in my plan. And designed a website which I find visually pleasing. The unit has taught me skills which I would like to take further and gave me a fundamental understanding of web design in Dreamweaver. Furthermore it gave me greater knowledge of the technology behind websites and how they are translated to different devices like the computer, iPad and mobile.

The website I made is a ideal for someone like myself nothing too special but can do the job well. And is a great starting point for a first website. But as a result of it being a first website there are definitely some areas which I'd like to patch up and perhaps use more interactive features. But besides that I would be happy to publish it online and make it open to the public.

For me, I pleased with the interactivity involved and the visual appearance of the website. As an example, I was pleased to implement the contact form in the way that I have. I feel it is more processional that just leaving an email address. And also I like how I managed to make it so the buttons become darker when you are on them - small features like this really bring a website together and make it more successful. I think it is vital to have links to external sources of information about yourself too, like the blog page and Facebook. It gives the audience greater freedom in finding things out about myself.

When it comes to things I would have done differently, I would have like to make the portfolio page more interactive. As an example, I would have liked to have a slideshow going between portfolio pieces by itself. I think it would have been more professional than just having a pop up window. But I ran in to a few technical issues when trying to do it, so I left it out. But it is always something I could add in the future. Another thing I would have liked to have done is manage to embed a Youtube video on the homepage, I think this would have made it more interactive and visual - but I couldn't work out how this was done.

Besides the minor changes that I stated above, I am pleased with the final website. It fits my specification and I'm happy with it as a first website. During this process I've learnt that web design is something that I would maybe like to look into further - this was something that I didn't have an interest for before hand. It just goes to show you can know things unless you have tried it.

Portfolio Website Design

Idea Generation

From the start I new I wanted to make a portfolio website which would be ideal for someone like myself to put up work for others to see. So when generating ideas I took a look at many other 3D artists websites to see what they had done and then I went ahead a made a basic mind map of the pages I would like to have - as seen below. 

Here is my mind map, it shows what I would like to have in each page which I believe I have successfully achieved most of the stuff I listed and planned to do.

Inspiration

One of the artists I research was a VFX student named Miguel Santana, his website was very interactive and visually pleasing. Like most things, he has a warming colour scheme which is always nice to have as colours can have such a big impact on you and how you feel. 

http://miguelsantana.net/

On the website he has included a number of interactive features and slide shows. He has embedded a number of videos onto a single page which I great for ease of use. the menu is clear on the right and the website overall is split up nicely. On the far left you have small thumbnails of some of the work he has done and when you click on them it opens them up with a bigger version. The main page is sort of like a blog where he comments on the works he posts and it is all in order of when it was originally posted. Making it easiest to find his newest work. 

This is the website for a character artist called Andrei Szasz. This one is done a little bit more differently and the whole website it more oriented around his actual work. There is little information about himself- but I like the way it is easy to see his work as it's all right there on the homepage. 

http://www.andreiszasz.com/

All his main works are presented on the homepage and after that some of his older work can be found on the link below - but obviously you'll want people to see your later work as opposed to some of the older stuff. When you click on on of the images, it takes you to a page with a number of different views of the character. Including breakdowns and WIP's. By doing this you get a great knowledge of how he went about creating that particular piece. 

Website Concept

After mind mapping and doing research online by looking at other peoples art work. I decided that I would like to make a portfolio website. Looking at some amazing & inspirational work online really motivated myself to do things in a similar way to them. I planned to have a well structured and simplistic website to navigate around on. 

I chose to do a portfolio because I would like to have a place to display my work digitally as it can be used to show people things in a matter of seconds and I thought it would be fitting being an interactive media student. When clients are looking for potential employee's they often search online and having the accessibility of a website means they can easily find out information about myself and the style I work in and If I would be able to do the job for them. 

I broke down the menu section into 4 different tabs which included , Portfolio, About, Contact and Blog. I thought this would make it easy to move around the website having bold and clear titles. A big banner at the top straight away tells you who I am and what I do - Jordan Dunstall - Digtal Artist. On the homepage it's a brief summary of myself, but on the 'About' page it goes into greater depth. I've also planned to add a show reel on the homepage, this gives instant and interactive access to my work. For the actually portfolio page I wanted it all clearly laid out so people can see the thumbnails then go ahead and click them to bring up a larger version. Lastly, the contact form would be a place for people to speak to me and ask me questions - fairly standard things. 

Final Website

Here are some screen shots of the website I designed for my portfolio, it includes some interactivity to view my work and information about myself. The website is all designed in a styles that suits myself and I planned to make it easy to understand and navigate around.

This is my main page, it has a minimal design scheme, but I have done this to keep navigation simple and easy to use. I planned to have a YouTube video embedded into the homepage but I couldn't work out how it was done in Dreamweaver. I thought having a large banner at the top made it easy to understand what it's about and it was all designed in a style I like. At the bottom I included a few sample pictures of the work I done.

This is my portfolio page, it layed out in a nice easy to use way. Furthermore, using a tutorial I found online I was able to make it so the menu selection bar at the top darkens according to which page you're on. In this case it is portfolio. This makes it easier for the audience to know what page they are on. Each image is able to be clicked on in order to bring up a new pop up window. A process that we got taught during a demo. As you can see below. 

Here is a screenshot of the pop up windows when you click on a specific piece of my portfolio - which will automatically adjust the size according to the screen size. This means it could be used on a number of devices. 

Here is the 'About' page of my website, it is fairly obvious what this page is all about. It's just a breif summary of who I am, what I do and some of my interests. And of course a photo which is yet to be put on there. Again, using the technique I learned I was able to have the 'About' button darken as it is selected. I think it is important to include an 'About' page as if I client is looking to hire you'll they'll want access to some information about yourself and your background.

Here is the contact page I did. It is minimal and easy to navigate. I have implemented a contact form using techniques learnt from the demo's in class and an online source. This makes it easier for a someone to contact me as opposed to opening up an emailing program and having to get my address etc. What they need is all there for them. Furthermore I have added a Facebook and Twitter link in the corner which are just images with links to URL's. That way people can have other options to contact me and find out information about me. 

And finally the 'Blog' link on my website is just a link to another page. On this page the audience would be allowed to see some of my WIP's and other off topic research. In this way people can see how I approach my work and the development stages I take. 

Off Topic Research

The 960 grid system is a tool used to give guides to your websites, therefore you can create then in Photoshop using these guides giving you greater freedom and control of the look. And then using some CSS which they provide for you, it allows you to transfer the website designed in Photoshop into Dreamweaver. There are various column options available but the two most popular are the 12 column and 16 column variants. The 12 column layout consists of 12 column grid has 12 available columns each of 60px width, with a 10px gutter on each side. The 16 column version consists of 16 columns of 40px, again with a 10px gutter on each side.

Here are some screen shots of the two different column layouts:

Here you can see various websites that have used the 960 grid system and just goes to show how versatile of a system it is. You can see how it is broken up in a number of columns - these are your guidelines you stick to whilst designing it in Photoshop. The 960 grid system appealed to me greatly as I didn't find the designing aspect of Dreamweaver so friendly to use and where as I'm a lot more experienced in Photoshop it would have given myself the ability to go that extra mile design wise, whilst still having a fully functional website.

Using HTML

Using HTML for web design

In this tutorial we learnt the process of making a basic website using HTML code in Adobe Dreamweaver. We covered how to set-up new pages, create link to pages, using tables, inserting images and previewing the website in your browser. 

First of all you should go File > new > HTML

Now go Site > New Site give it a name and select a root folder for it (The folder can be anywhere)

Make sure to re-name your documents at save them, or else this will look unprofessional on the final website. The first document should be a index.html always, this is the home of your website. 

Create as many more pages as you want and repeat the process, in this case I've created an 'About' and 'Contact' page.

At this stage go to insert > table and change the settings as you wish and hit 'OK', this should create a table on the document you are on.

You can now also import images to the document by saving them to your root folder (The one you made at the start), they should now appear in the library - if not refresh with 'F5'.

You can now drag the images from the library into the cells in the table, as shown here. In this case I used some .Gifs I got online. You should be able to see them there. 

Now, I create a new HTML page called 'Large_01' and place a large image here from my library. 

I head back to my other page (About page) and go Window > Behaviour. This should open a new tab on the right, now you can click the small + icon and choose 'Open browser window' with one of the cell selected. This should open a window of options, in the 'URL to Display' browse to the 'Large_01' HTML we made, this creates a link between the two. You can change the other settings if you wish. 

To make the audience aware we can click on the small image, we add a '#' to the Link tab in the bottom tool bar as shown in this image. Now a hand-cursor will appear when you roll over it. 

Now if you preview it by click the small globe icon at the top tool bar then > Preview in Chrome etc.. You will see a working draft of your website and you now should be able to click one of the images and make a new larger image of it pop up in a new window. 

If you want to you can create new page, call them what you want. Then back on your index page, you can create links to your other pages byconnecting them on the 'Links' toolbar a the bottom of the page - you can have as many as you want.

File Formats

File Formarts For Mobile & Web Devices
When mobile & web comes into play, there are certain procedures you should take into account. With mobile internet speeds not being as fast as our broadband, It takes longer to load an image on a website. Therefore optimizing the image to have a lower file size would make it load faster - a much better experience for the audience.

Depndant on the type of image, there a three different file formats you generally always should use. JPEG's are used for more photographic images & images with gradients. GIF's are used for images with block colours and not great detail. PNG's are used for images that require transprancy.

JPEG
Pros:
- Low File Size
- Adaptable quality
- Good for photographic images

Cons:
- Loses quality & data of an image
- Cannot hold transparency
- Cannot be lossless


GIF
Pros:
- Great for block coloured images
- Can hold transparency data
- Low file size

Cons:
- Not good for detail/photgraphic imagery
- The transparency is limited
- Compresses images

PNG
Pros:
- High quality transparency
- Good for Flash
- Versatile for web design

Cons:
- Higher file size
- Compresses the file
- Does not support animation

Here you can see the difference between file formats. JPEG is smooth at only 40% quality, therefore it is very versatile for devices - it can look good at come at a low bandwidth cost. GIF you can see is poor quality, it shows grain and loss of colours. This is because GIF has a small limit on the number of colours it can show. The maximum is 256 colours, but in this image it shows it at 32 colours. And finally PNG, it is good quality, but comes at a higher file size, JPEG would be more ideal as there is no transparency and a variety of colours. 

Website research

Website Navigation & Layout Reasearch

The BBC is one of the most famous news institution's in the world. They encounter millions of website hits each day and must be able to inform their audience in a quick and informative fashion. The purpose of the BBC is to provide information on what's happening around the world, in order to successfully do this they have to make sure their content easily accessible on a variety of devices. 

This is the desktop version of the BBC's website, it's minimal, clear and easy to use. It's laid out in an orderly way, with the main headlines in the standing out amongst the rest of the website. I believe this is one the main purpose of visiting the BBC website, therefore having it as the main element of the homepage would make sense. Further to the top of the we have the weather forecast and the time, again this is quick and easy way to access information you may be seeking. The interface includes a number of categorised links to different areas of the website - this includes TV schedules, Sport, Weather etc. What's great about the BBC's homepage is that you can get a majority of the information you may need all from one page, as it manages to fit it all in small chunks. 

Furthermore, if you click on a particular article you get a detailed page on the information you want, including different forms of media - such as videos. It also has links on a side bar to different articles which may interest you, like the most popular articles read that day and featured articles. Doing this is informative for the reader and also keeps them using the website. They do also include sharing buttons for Facebook, Twitter and other social networking sites - this gets the audience commenting and debating on particular issues through out the world.

This is the mobile version of the BBC website, it's a much more streamlined and user friendly layout compared to the desktop version. It is more about giving straight up information which is generally the main use for surfing the web on a mobile. The layout scales down and up for the resolution you're viewing it at, therefore the mobile version can be used for multiples devices - including a tablet. This is a feature that the desktop version does not have. Furthermore, it has a lower bandwidth cost due to it being more optimised for the type of device it is.

The version of the BBC has less features than the desktop, as it is unnecessary and better for a mobile device to keep things simple and easier to run as it has less hardware resources.

The mobile version has categorises of news, sport and weather  all on one page, I think this is due to the fact, it would be much more ideal to get all the information on one page. Because generally when browsing online on a mobile you don't want to have spend lengthy times reading, quick and minimal texture tends to be the better and easier choice.

In conclusion, I can see that there are big differences between the desktop & mobile version - both with there own pro's & con's. The obvious one is the layout is different, which is mainly for accessibility purposes. But, you have to take practicality into account, it's not always easy to find a computer and log on, just to check for messages. Having the portability of a mobile to access it, is much more ideal to quickly check up when you're out. However, it's more enjoyable to browse on desktop as it's allot more visual and interactivity involved - this is because you would generally spend more time on a desktop version as opposed to mobile.

Ebay
It is a well known virtual bidding service - where millions of people go on each day. It's a great place to sell and exchange items and is used world wide. A service of this magnitude must give access to all age groups on different devices in an easy to use way.

Statistics:
Mobile internet use nearing 50%

The most rapid growth was among younger people, where 71% of internet-connected 16 to 24-year-olds used mobiles.

Just 8% of internet users aged over 65 made use of the newer technology.

Year	Households (millions)	Percentage
2006	14.3	57
2007	15.2	61
2008	16.5	65
2009	18.3	70
2010	19.2	73
2011	19	77