My One Page Website

Introduction
As part of our qualification we were instructed to design a one page website which we would later develop into a larger project. I decided to design a portfolio for my digital artwork which i could put on show to anyone interested in viewing my work. I decided to remain simple with the name and just title it 'Jona Robinson Portfolio' as i found it was self explanatory and straight to the point. Once developed it could link to social websites such as 

Facebook - To promote my work

Twitter - Where people can have more recent up to date information.

Tumblr - For people to view some of my more recent work.

Blogger - So people can read my blog entries. 

Designcrowd - To view some client-based work.

Target Audience

My projected target audience is anyone interested in viewing my work. This could be anyone from random web surfers to people who have actually searched for my work. Hopefully i will draw attention to my website with socially advertising my portfolio on websites such as tumblr and design crowd. People who are interested in my work there can then goto my website and a majority of my hits will be come websites like this.

The content will appeal to all age ranges and not be age or gender specific, for example, not too childish nor will i use sexist themes / colours. I don't want my website to be targeted to a specific audience or apply to only certain age groups or genders as it would potentially loose interest to certain groups. Although it may be more appealing to people who are specifically interested in graphic design and art, i will not intentionally target it to a specific audience.

Browser Compatibility
I want to make my website accessible to as most people as possible. The best way to do this is make sure it works on ALL mainstream browsers such as Internet Explorer, Firefox, Opera, Safari, Chrome etc. To do this i would test my website on all browsers once i had created it and make the necessary tweaks from there to make sure it works on all browsers.

Another massive medium are Smart Phones, therefore i am going to try my best to make sure that my website looks good on mobile devices too. This opens a huge factor for user ability as anyone, anywhere can view it. Im also going to try and make sure it works on smart phones such as iPhone, Blackberry, Android etc.

Use of Content
Most of my content will edge towards promoting myself and my work. I can easily do this by showing a portfolio of imagesct and examples of my work so people gain a understanding of what kind of designer i am at a glance without the need to read into it. Alongside my portfolio i would have a brief text description of how i got into designing with the help of qualifications and previous jobs.

Twitter Feed on Website

I could expand on this with my social links for information sharing, if people want to view most recent work they could view my tumblr. Alternatively if people wanted to see up-to-date posts they could view my twitter, therefore i have included a twitter feed on my hope page, as you can see above. I plan to make all my content very up to date and the best way to do this is link to social networking websites.

Comparison of Design and Website
I went through a lot of different stages when it came to designing my website. I played around with different designs and layouts to see what i prefered. Firstly i went for a green and silver approach and wanted the website to look 'professional'. After designing the website i thought it looked too 'business like' where as i wanted it to seem like my hobby and something i enjoy, so i decided to get rid of this design and start with a empty canvas.

First Website Design

My second attempt I wanted the website to be more design related and hobby-like. After playing around with the colours and design for a bit i decided to go for a black background with orange off colours. Therefore i liked the idea of having abstract images covering the most part of the webpage and having information to fill in the empty spaces such as social links / about me. After it was designed i thought the design itself wasn't as relevant as I had thought and I had got a bit off-topic. I did not like this design and decided to re-design it again.

Second Website Design

Finally i wanted to remain professional whilst still keeping it hobby-like. Therefore i approached the website with the intentions of having it like my previous too just not too business-like and not too childish at the same time. I wanted to give the effect of a room wall; with the flooring, wallpaper and skirting boards to simulate this. After designing the website i was very happy with the design and wanted it to be my final.

Final Website Design

Software Used

There are two programs that i frequently used to get my website to the stage where it currently is. Most of the website work was done in Photoshop. This involves everything from buttons to banners. Everything you see on the website that isn't content text, i previously designed on Photoshop. I would occasionally use Illustrator for certain images for vector based images, but a majority of the work was done in Photoshop.

The other major program i used was Dreamweaver. This is where i put everything together. Firstly i would use columns and rows to create a layout that my images would be placed into. Once they were placed into them i would tweak them to size and into proportion. Once in place i would develop this by editing the html code and further developing the website. For example adding a twitter feed or a Facebook like button.

Testing and Accessibility
It is vital to make sure your website works perfectly for all audience types. For example, what if my user used a mobile phone to view my website or a PC running internet explorer. You need your website to be usable by every different method. Not doing so, leaves a massive gap in your audience and could potentially lose users or hits.

Also i am going to run my website through the W3C validation service. Which scans your website and makes a report of how accessible your website is. For example, taking into consideration Alt Tags for blind or visually disabled people etc. There are a lot of different methods to ensuring people who may have trouble viewing my website, can still do so.

Uploading the Website
I now needed to upload my website. This is why i made sure the website was 100% working and no broken links etc. I would do this using a hosting package, which you can either get for free or pay for your own. In this case i will be using x10 Hosting which is free. The domain i chosen was JonaRobinson.x10.mx.

Once i was ready to transfer the files online. I used FileZilla, which is a very popular and well known FTP program, which stands for File Transfer Protocol. The program basically connects your own local files to the server which the website will be hosted on. Then, I transferred the files to the server; this included the index page, all the images or css files i used - basically every file related to the webpage allowing it to function.

Final Thoughts

Overall i am very pleased with the final website design. I thought the website itself shows that this is my hobby and i enjoy doing it, without being too business-like.