Evaluation- Interactive Project

Evaluation for 'My Portfolio'

I find it hard to know how to begin writing evaluations, but I guess I'll start with my project as an overall. Generally I am very pleased with the results, I am a little frustrated that I could not do some of the things that I had originally contemplated- I'll touch on that later. Considering the project was five weeks long, I planned, designed, created and completed a website (my first). This is quite a large achievement, I finished a six-page portfolio which included pages which allowed people to interact and understand my work.

I planned and developed thoroughly, using my project book. I do regret not generating a few more ideas to work on for the design, but also I know that the design I picked reflects my creativity. I've said before that I wasn't too confident with the software,  I feel that this project was about getting to know the basics. Now I know the basics I am more than eager to learn new methods and skills. The sites I researched amazed and impressed me, so much can be done through flash, jquery and HTML5. On my portfolio I had the idea of having a slideshow gallery on my index page, just to display some text and interesting photos which will really grab the audiences attention. I also considered having an entrance page in which I would have a graphic or photograph. I am really interested in words and how they can be manipulated, this is an idea which I would like to explore in future interactive projects. I did touch on this in this project through my titles. I photographed and used scrabble pieces to make up words- this directly reflects on my interest.

Another way which I explored typography and text through my portfolio and development was by looking at fonts for my page. I eventually decided on Times New Roman, however I altered the character spacing so it appeared a little more interesting. 

 I am really amazed by the scope of creativity which can be displayed on the internet- especially when considering the contrast between some of the first websites to the interactive spaces we see today. Exploring existing examples definitely motivated me into thinking of innovative ways to  create a portfolio.

My design is quite simple but I think it is successful. The feedback I received from  peers and teachers told me that they liked the strong used of colour and thoughtful layout. If I could improve anything on my design I would consider trying to use a photograph as the main content of the page, with the nav, footer and header overplayed onto the image. This is a definite change to my use of black colour.

Dreamweaver was initially daunting, but with some explanation of HTML and CSS I soon found myself picking up the basic codes and being able to put it into practice. Next time I would love to try experimenting with the DIVS arrangement  and try using a two column layout. As I have seen with my research, interesting things can be done with layout and I'd like to implement this. I am planning to take web design as my pathway, therefore I am planning to create mini projects where I practice with layouts and coding- in the long run this will help me massively. My general achievements with the coding and styling has encouraged me that I am able to accomplish things which I never though I was able to. The image below demonstrates my final index page.

My project book is a general reflection of all my thoughts. Looking back over it now I am a little frustrated  with my vagueness on some areas. Whilst I was creating it, during the project I didn't realise that I had not included much on interacting with the audience and gaining feedback. My next steps now it is completed would be to look at ways too gather some thoughts from an audience . I would then take this information and use it to improve my website.

I am generally really happy with my design, especially for a first attempt. I have surprised myself with technologies and I feel I've made something which reflects my personality.

Typography Choices..

Below are the examples of text colour and font for my website- by doing this I have came to the decision on the most suitable style. Typography is very important when it comes to design because it defines the page appearance. 

 

Above are all the fonts I have compared for my webpages, I have found the fonts from the list on Photoshop. I have tried to consider different spacing, colour and style. It's been a touch decision deciding which font to use for my piece. I wanted something which would be suitable and readable for the user- especially if there are large amounts of text. I was struggling with most of fonts, I just felt they were not visually creative  enough. However I discovered the tool of character spacing on Photoshop. This tool allowed me to experiment with the space between each letter by tightening and loosening the space.

Although I looked at Sans Serif fonts, I did not think they worked with the page layout and style as well as Serif Fonts. I have used Scrabble pieces for my titles and because this gives my design a fairly 'traditional style', I need the font to compliment this. With this is mind I was able to rule down my choice of fonts significantly to only Serifs. 

This left me with Times New Roman, a common and popular font and Trajan Pro. Both of which match my page style. However Trajan pro is capitals and unfortunately this isn't what I wanted, I wanted to be able to use elongated capital letters combined with smaller lower case letters. The only problem I have left with Times New Roman is that it still looked too common and did not have a flare of originality.   I used my knowledge of character spacing and used it with Times New Roman- this was much better because the letters were closer together which gave it more appeal with an traditional edge.

In regards to colour, it is obvious that I need to keep it related to my chosen colour scheme of shades of red, black and grey. The singular colours do work well but for added emphasis and links on certain words, I am going to change to alternative colours and add text decorations of italics and bold.

More Website Progress..

Here is my VERY nearly completed Gallery page..Gallery was created in Adobe Bridge, and entered into Dreamweaver using an <iframe>

I am pretty impressed with the success in making the gallery :) I need to make a few small changes to the layout of the gallery but apart from that it is mostly completed!

Website Progress..

Here are a few pages from my portfolio.

These three pages are practically finished, feedback is appreciated. :)

Image Optimisation Cont..

I already have created my thumbnails which are small versions of the image I plan to use  for the gallery. I attended a seminar where we had to look at ways to optimise the image so that it is suitable for the web. As I am using large photographs I need to re-size them so that they are suitable for the web, by doing this I have also enabled myself to display images correctly in my portfolio. 

I have carried out this process for all of my images which I want to use on my web album. It is really important to do this procedure. It has enabled me to understand what kind of images are suitable for the web and that it is pointless using a file which is too large, as it will eventually slow down the website. For this image I have cropped, slightly edited it using the curves tool and also saved for web and devices.

For this image I have chosen the format PNG-8, I looked at every option available which would be suitable for the web. The GIF format was very pixelated and when I previewed on the internet it wasn't happy with the result. (See  below)

 

The image resolution is 72 dpi, which is what was recommended to us by Sean, After experimenting with different dpi's, I found that this was the most suitable.  I chose against JPEG medium and high because they were over 50k and took over 20 seconds to load, I do not want my images to take that much time simply because it will slow down my site. JPEG low also did not work for me as the format quality was very poor. However all of my images differentiate, I expected this because I knew all of my photos were from different sources and therefore would have different properties. I have ensured that they are all of the best suitable quality and experimented with all of the four formats to come to the correct decision.

Image Optimisation

Today I learnt that images for the web need to be saved in the correct format to ensure that they are able to load quickly and they aren't too large. The easiest way to do this is on Photoshop and through the option of save for web and devices. 

The image below displays the quality of saving as PNG-8 file, the image is 72 dpi.. PNG files are usually used for graphics or layouts.  There is a definite alteration in each of the image qualities. This tool is very handy, as it shows you four different options and how long it will take to load on the webpage, the image in the left corner is the original. On the right there are options which can be changed to increase the speed of the file loading. This has helped me to understand the difference in the file types. 

Below are four options of saving as a JPEG file.  The image appears to remain in much better quality by choosing JPEG, the colour is less pixelated and remains smooth all over.

 Below are four options of saving a GIF file. GIF files can be particularly handy on the web as the can be used to create small animations. GIF files are usually used for banners and layouts. From all of the options I have I can now select the most  appropriate image and quality, with full knowledge of how long it will take to load on my page.

Social Networking & Audiences

When designing it is very important to consider who you are going to be producing the product for. This also applies to my website. Although it is obvious that is going to be created for me and to broadcast my work, I still need to consider my audience. Twitter, Facebook, Deviant Art, Linkedin and blogs are all ways to target an audience in a professional manner.

Social networking is the perfect way for me to be able to join groups which I can communicate with, which is related to my work. I am already a member of twitter and Facebook, and I also have blogs which I write about projects I am currently working on.

For me, Twitter is the best social network to be able to use to start building an audience and followers who are interested in what I do. It works in both ways, as I am also able to follow and trend a topics relevant to web design. I want to include a twitter feed on my website, which will show direct tweets and conversations which I am having. This way I am expanding followers and I am creating something which is used on a professional and formal basis.

At the minute I am not sure which page would suit the website best. I feel that it will probably work best on the 'contact me' page, as it will lead the user onto my twitter and also will enhance the interactive experience.

Facebook is also useful for expanding audiences, especially now that it has the 'timeline' which enables the user to document everything which has been shared over years. For the website I don't plan to have a Facebook page, as I prefer twitter. I do however appreciate the usefulness and the awareness it can have.