The Critical Report
Introduction
The website I have designed is a personal website used as a way for me to present my portfolio online, advertise my services and make contacts in the industry for future work. As Shelly et al. define it, the ‘personal website’, “allows you to advertise your employment credentials, meet new friends or share a common interest” (Shelly et al. 2008: 19). My website focuses more on the employment side than on the social side they describe, and so mixes elements of the ‘personal website’ genre with what they define as the ‘commercial website’, which is primarily created “to promote and sell products or services” (Shelly et al. 2008: 20). It functions both as a personal website, by including my CV for example, and as a branding of my own work into a commercial context as Kaveh Photography. In this sense, a mixing of the website genres allows for the personal website form to function as a mode of corporate branding and professionalisation of an individual practice.
My main goals are to create an engaging, user-friendly and creatively designed website, which will present my work in a clear way. My target audience is mainly potential clients, who will have an easy way of accessing and evaluating my previous work, learning about me and contacting me. It is also aimed at interested peers, friends and contacts who would like to have a way of seeing my work. The value and purpose of the website then is ultimately to help me in developing my practice professionally, networking and archiving work as a way to help my future career.
Specifications
I initially researched website specification. VORD web design for example, give a clear outline of elements to include in such specification. This included considering why the site is needed, what will be its style, primary content, secondary content, functionality, and any additional requirements (Vord 2010). They propose that “the most important thing in any specification is to clearly state what you want the end product to do” (Vord 2010). I defined this as ‘I want the website to act as a showcase for my photographic and video work, allowing contacts and potential clients to view my work and contact me’. The primary content is my photographic work, which I intended to incorporate into the design style of the site. The secondary content is further information about me. The style is mainly functional, acting as a backdrop to the photographic work on display, but must also be a coherent part of the brand identity created. Additional requirements include elements such as the necessity of embedding video into the site.
Structure
About:
This page functions as the website homepage. It includes my logo, a stylized image of me, stills from my work, and the introduction to my bio. The bio. can be expanded by clicking a ‘read more’ button. There are other buttons to access the other pages of the site and also links to other relevant personal sites such as Facebook and Flickr.
Portfolio:
This page is a visual representation of my work. It shows video work and slideshows as embedded YouTube videos and contains links to images of photographic work as galleries.
Galleries:
These are series of images according to the themes ‘City of London, ‘Behrouz Ghaemi’ and ‘Notting Hill Carnival’.
Future Project:
This describes my future hopes and aspirations.
Contact:
This is a way for users to contact me via an online form system.
Site Map:
This provides an easy way for users to orient themselves and navigate the site.
Analysis and Design Approach
There are three main factors to analyse in relation to my website – its content, its design style and its organization of information / user interface. As Niederst has argued, “a successful website requires attention to how the information is organized (its information design) and how users get to that information (its interface design and navigation system)” (Niederst 2003: 389). What is also vital in this context however (of a photography website) is the visual look and style of the site, which must reflect my practice and make users interested in my work, and its content, which must be presented in a creative, engaging and clear way. As Lopuck also makes clear, it is important to “integrate design and navigation” (Lopuck 2006: 9) into a coherent whole.
Starting with visual style then, I decided that, in order to effectively achieve the aims of the project, it was important to have a coherent brand identity throughout the website as a whole. This is created by the continuity of colour – each page has a drop shadowed white box on a grey background, and the logo, which is repeated at the top left of each page. The colours – grey and white – are very neutral, allowing the work itself to stand out, rather than be overshadowed by the background design. There is also coherence throughout in repeated use of fonts, alignment and layout. The logo is minimal and simple, creating an effect of clarity, but uses a different font from the rest of the site in order to mark it out as distinctive.
Further continuity is created by the repetition of key elements – such as the images on the homepage, which are then also used as icons in the picture galleries. I created an image of myself using a Photoshop effect, in order to create a more visually striking image of than an untouched photograph, reflecting the creativity and innovation which the website attempts to communicate.
In terms of content then, most had been made already – my photography and video work. The key point here was how to present this, and what extra information to add. I included an extended bio. on the about page but made this optional (through the ‘read more’ button) in order to maintain the clear design of the page and keep the focus on the images. I had to carefully select a range of images for the homepage in order to showcase the range of my work, and found using a strip of images the most effective way to do this. The galleries allow for one large image at a time to be displayed, creating maximum impact for individual photographs, while also seeing thumbnails of others in the series, so they can be placed in the context of my work as a whole. Users can click through in sequence or select individual images, allowing for a degree of interactivity to increase interest.
In terms of information organization, Lopuck has argued that “your goal is to get users from one page to the next in as few clicks as possible” (Lopuck 2006: 66). I adopted this strategy by using a hierarchical system of buttons and sub-buttons, ‘Portfolio’ > ‘Notting Hill Carnival’ > ‘Image’ for example. At the same time I maintained the main menu bar at the top of each screen to allow users to move quickly back to the homepage without having to navigate back through all the menus. Niederst has argued that “site diagrams are useful for communicating the structure of the site and developing its navigational asystem” (Niederst 2003: 389), so I decided to include this as part of my design. The pages were made using Photoshop and incorporated into Dreamweaver. I used Fetch as a FTP client, purchased a domain name and starting hosting package. Throughout the experience it was vital to conduct constant testing and checking of the site. As Niederst argues:
[Web design is] designing for the Unknown: unknown users, unknown browsers, unknown platforms, unknown monitor sizes, and so on…Becoming a good web designer requires a solid understanding of the web environment in order to anticipate and plan for these shifting variables. (Niederst 2003: 37)
This ‘unknown’ nature of the design process forced me to test across different platforms and browsers, and assess different user responses. As Grannel adds, “regardless of the form styles you end up using, be sure to rigorously test across browsers, because the display of form elements is not consistent” (Grannell 2007: 322). I tested on Safari and Firefox on a Mac, and also on Internet Explorer on a PC. I showed an awareness of different browsers and system setups by, for example, keeping within a maximum resolution range for the images. I wanted images to load quickly but also be displayed at high enough resolution and size to communicate the impact of the work, and it was important that this would be consistent however the pages were displayed at the user-end.
Evaluation
Some aspects of my website have worked very well, using visual design and information design to effectively communicate my ideas and to achieve the goals of my project. Consistencies throughout the design have ensured that a coherent brand identity is produced, as a minimal backdrop to showcasing my work. The use of galleries has allowed me to organize and curate photographic work into consistent categories, giving me control over how the work is viewed, while also allowing interaction from users in terms of things like which galleries they choose to view. I have also developed the administration interface in such a way that I can easily update the website with new work, maintaining its style, design and layout but adding new content regularly as my work develops. The site map is clear and user-friendly allowing minimal clicking for users to move between elements of the site. The contact interface is neat and creates a professional impression for those wishing to contact me.
There are also elements that could be improved. Although the website performs well functionally as a showcase, its design style could have been made more distinctive in order to mark it out from other photographer websites, which would provide competing services in a commercial context. More focus in the selection of images, and in the choice of information presented in the texts could help to create a more distinct identity, as well as visual elements. Text and images could have been used more creatively to make the website more engaging to users, rather than a neutral backdrop. Sites such as www.grindstate.com for example, use full-scale navigatable photo screens, which provide a more immersive experience than a conventional gallery slideshow view.
These are elements which will develop as my practice progresses and which I will incorporate in future modifications to the site. A more polished feel could also be created with the use of Flash animations, which I would like to use in future work.
In terms of target audience, the website is effective in communicating to my peer group and an interested network of contacts. Those who know my photographic work already for example, would be able to now see my work in context in an interactive an user-friendly way. However, in order for the website to be effective it really has to appeal to a more specialist audience of companies who are looking to work with freelance photographers. In order to appeal to, or even to reach, this target audience who have no awareness of my work already, I feel that it needs to be developed into a more immediately visually striking and distinct style, which will mark me out from other photographers, and communicate more powerfully the visual impact of my work, which is not immediately apparent when entering the site.
Software Used:
Adobe Creative Suite 3
Adobe Photoshop CS3
Adobe Dreamweaver CS3
Fetch
Mac OS X 10.6.2
Safari Version 4.0.4
Firefox Version 2.0.11
Also tested on PC in Internet Explorer 7
Colours correspond with original design
Links all checked (internal and external)
Images all load
Resolution testing using 800 x 600 and 1024 x 768
Conclusion
Shelly et al. point out some of the difficulties in developing a personal website, “you may have limited software, hardware and other resources. Working independently means you must assume all the roles necessary to build the website” (Shelly et al. 2008: 19). It has been difficult, but also highly useful, for me to take on these multiple roles, for example managing content, designing visual style and organizing site navigation. The whole process has made me more aware of the complexities of web design. Working within these parameters, I feel that I have, to a certain extent, effectively achieved my aims, and given myself a solid foundation to develop in the future. I would like to take on further research into ways that other sites have incorporated text and images in creative and compelling ways, and work at developing new technical skills to enable me to use some of these styles in future versions of the site, which would reach and impress a more specialist target audience.
Bibliography
http://kavehphotography.co.uk/ [online version of the website referenced throughout]
http://www.grindstate.com/#/464 [accessed 22/1/10]
Grannell, C. (2007) The Essential Guide to CSS and HTML Web Design. New York: Springer Verlag.
Lopuck, L. (2006) Web Design for Dummies. Indianopolis: Wiley Publishing.
Niederst, J. (2003) Learning Web Design: A Beginner’s Guide to HTML, Graphics and Beyond. 2nd Edition. Sepastopol CA: O’Reilly & Associates.
Shelly, G, Napier, A & Rivers, O. (2008) Web Design: Introductory Concepts and Techniques. 3rd Edition. Boston, Mass: Cengage Learning.
Vord (2010) ‘How to Write a Website Specification’, VORD Web Design, http://www.vordweb.co.uk/specification.htm [accessed 15/1/10].