The Life and Times of Thomas Vigrass Design for the Internet
For this web development project, the title was ‘The Life and Times of...’ which gave me the freedom to create a site about any aspect of myself in any style in which I wanted. I also had to incorporate the past, present and future in to the sites body. The theme of my website is in keeping with the brief for a past, present and future contextual basis as it contains details of all three elements of my life. I have produced an online biography and professional profile where I identified my future professional and personal goals and aspirations. I have identified target companies and areas of work and I have detailed the locations in which I would like to pursue these opportunities. I wanted to develop something which I could showcase to potential employers, a site which would demonstrate some personality, creative flare and exhibit my professional experience. The website’s content is mainly focussed around the past and present with information of my background and how I have progressed through my life to the point I am at now. The creative element of my site comes in the design and layout of the site in that it is aesthetically pleasing in its choice of colours and structure. I wanted to chose an attractive background and colour scheme, but maintain a simple and easy to navigate lay out and structure, so that information can be accessed easily by users whilst the site would complied with most web standards. As the places I have lived in and travelled to have been of huge involvement in my life and the cities I intend to move to, I decided to include them in the design of the site. I thought it would be nice to take the skyline of either London, New York or Sydney then silhouette and blur their images for effect. The overall look and feel, with the light beaming out, the skyline of London and the circus type font face, was all to depict the website as a show case, as the website is a online biography / CV. The site is aimed at people of all age’s particularly potential employers.
First and foremost I believe that a site, unless for commercial use, should be have usability at the centre of its priorities. As Jakob Nielsen stated, ‘If a user cannot figure out how to use a website in a minute or so, they conclude that it won’t be worth their time and they will leave’ (Nielson, P10, 2000). As Nielsen said, it is ‘widely held feeling that consistency is one of the most important usability considerations (Nielsen, 1991). With one study discovering that ‘users define 'usability' as their perception of how consistent, efficient, productive, organized, easy to use, intuitive, and straightforward it is to accomplish tasks within a system (Shneiderman, 3,3005). Therefore, I have aimed to ensure that a consistent layout and navigational structure remains on all pages of the site so that user’s journey was under their control. Also, I aimed to maintain some web standards to ensure a positive user experience, so that the navigation tool bar ran across the top of the page and that there was a click through to the home page in the top left hand corner.
I also wanted to avoid any horizontal scrolling, user testing showed that users have a strong aversion to it and always comment negatively when they encounter it. (Nielsen, 2005) The navigation bar and roll over was created using css image sprites, where I took one icon and smudged out the details, lightened the colours, played with the opacity and added my own text to create a new appearance for the buttons.
For the first page of the website I wanted to create a splash page welcoming visitors to the site and introducing them to the theme. At first I was considering a page which was heavy in content, with a background of the subject however, I thought that I would invest my energy into designing a visually impressive page.
I created this design within Photoshop by playing around with a range of features, studying multiple tutorials on layering and with my existing skills within the program. I toyed with many different images, and actually implemented quite a few other designs before settling on this. I decided to import the design into Adobe Flash to bring it alive, by creating a breathing effect with the image’s transparency , which I think created a very appealing result, one well suited to the website’s title ‘the life and times of...’. The contrast between dark and bright colours is appealing to me so I wanted to integrate this into my site, pitting the dark, yet detail background against the stand out electric blue colours. After reviewing a range of designs and websites I found an image which I liked and amended it within Photoshop to combine layers and create the background effect I wanted:
The white beams and clouds in the background had originally made it difficult to read the white text; therefore the background was brought down a few levels in brightness. Although for print, my research made it clear that black text on a white background was not recommended; a large amount of market research into legibility and colour-inversion for websites have given missed results with ‘many saying that pure white screens are harder on their eyes than pure black screens’ (Transio, 2006). The rationale I have behind using the sky line of London and not another city I have lived in or intend on living in was that London is where I feel my home is and I have fantastic past, present and I know future experiences. It therefore seemed like the perfect choice, I think has integrated well into the site. Users are more likely to comment of the actual appearance of the website rather than in the layout of its information (Fox, 2008). For my ‘future’ page, named ‘next’, the logo’s where saved almost ten months ago when I was researching for a separate website, however, they were never used. I came across them on a digital creative production company’s website (www.specialmoves.com) and thought they would make for an attractive web design. I selected the images of the companies and agencies in which I would like to work – imported them into flash, and over 120 frames animated the logos gradually appearing and flashing. The flash was then published into Dreamweaver.
I decided to incorporate a fully interactive page for viewing my curriculum vitae and also this accompanying report on the site. Therefore, determined that the best option for creating this look was to import the document into Isuu which converts PDF’s into flash and then I was able to embed the file into my site and edit the appearance and style of the feature within the code. On reflection I would have liked to have built something myself in flash but feel I did not have adequate amounts of time to implement this.
In Conclusion: On reflection I feel I could have expanded up on the content of the site however, I wanted to spend time researching design styles and incorporating an attractive site design. The site was fully cross-browser tested within Firefox, Explorer, Safari and Chrome to ensure that the site function within expected levels of performance. I believe that the over design has been successful, in regards to the colours and use of the skyline and I am especially happy with my integrated of flash animation I created myself into the site. I feel like I have developed my flash and Dreamweaver, and particularly my Photoshop skills, with the various features on the site, and honed my creative eye for detail and colour. This is the second website which I have created from scratch, the first was created entirely from tables. Some real progress has been made in the approach I have taken from the first site in terms of the standard structure and navigation for a site, and the variety of options of available to create this structure.
Jakob Nielsen, (2000), Designing Web Usability, New York Ben Shneiderman, (2005) Design Process and Evaluation, Available online – [Accessed December 27th 2009] - http://usability.gov/pdfs/chapter1.pdfB Jakob Nielsen, (1991), Assessing the Usability of a User Interface Standard – Available online, [Accessed December 20th 2009] - http://www.useit.com/papers/standards.html Paul Gilster, (1997), The Web Navigator, Canada CSS Image Sprites, Online resource - http://www.smashingmagazine.com/2009/04/27/the-mysteryof-css-sprites-techniques-tools-and-tutorials/ Colour-Inversion research, (2006) – Online resource: http://www.transio.com/content/why-youshouldnt-use-white-text-black-background James L. Mohler and Jon M. Duff, (2000), Designing Interactive Websites, Canada Chiara Fox, (2008), Sitemaps and Site Indexes: What They Are and Why You Should Have Them, Available online – [Accessed December 15th 2009]
Design for the internet accompanying report