The Design and Build of the New SLPS Website

BY JANE EVANS MA

My first thoughts on designing the new SLPS website was, at first, a sense of reluctance, mainly due to the fact that I had never done a project using Dreamweaver MX. I had attended a computer training course at Connect, Liverpool University where I had learnt about twelve different software programmes. However, where normally, if I was doing something using Flash, or something purely for print, I would have at first dived into project research, in this case, the research was something that had to lie firmly in the back on my mind whilst covering loads of Dreamweaver tutorials.

Online Research: I checked out different types of photographic sites from personal portfolios to trade magazine affiliated sites, and then hit on the Magnum Photos website. On the surface, it looked simple yet effective. It was well thought-out using a very nice neutral grey background that set the images off extremely well. The site helped me form a more intuitive colour scheme for the SLPS site and also for the key areas that I felt we could make into interesting webpages. It was a matter of being analytical and decisive, using the Magnum site purely as a case study.

Key Page Areas: Then I started looking at other photographic websites that really helped to form a rough guide for the SLPS site, plus the on going working collaboration with the SLPS Committee and other SLPS members such as Martin Reece, Eric Garnett, and Lynn Hilditch, and with Chris Langton, the Webmaster at Liverpool Hope University, was crucial. Advice and guidance came in various forms from emails, Committee meetings, and informal discussions in the pub after club meetings. Having many enjoyable discussions on page ideas, and such, at key stages bringing in the stuff on laptop proved indispensable.

The Site Concept: My influences and inspiration for the website came from the urban environment, not portrait shots but 'objects' that may have been touched by someone at some time. I am personally intrigued by the emotional response of personification and metaphor and I find exploring composite ideas highly evocative. As an author I feel that I just need to have a certain empathy with the subject matter. For this project I needed to create some kind of theme in order to hold the pages together, but simultaneously set them individually apart to give the site depth and structure. It could therefore be deconstructed and reorganized to meet the SLPS objectives. By using Photoshop I found inspiration from using some of my own personal traffic trail photos. These to me kind of summed up the photographic creative/technical endeavor: being about the duality of 'light and time'. Putting a cherry on the top, online I know of a totally amazing science photo site which holds zillions of pictures taken on themes of 'space'. I downloaded a few of these images selecting fragments of them to make tiny pattern motifs within Photoshop and thus incorporated them aesthetically into the design.

Website Design: The colours for the website were decided pretty early on. The warm yellow and orange were obvious choices from the traffic trails with the contrasting blue, being an SLPS colour, complimenting the grey background colour. The aim was to compliment the images in the Members Galleries in the most effective, appropriate, and aesthetically pleasing way.

After doing the Dreamweaver tutorials, it brought it home to me that the website was all about bringing design elements into the programme and using Dreamweaver to lay things out using a grid structure, kind of like doing a jigsaw. Using pencil sketches I mapped out a few thumbnails using the colours and key elements that I wanted to be placed on the page. That enabled me the freedom to change things on the fly and to manipulate key elements to make good design sense. It was also really useful when considering the programming of how the navigation was going to work - using pencil and paper there were no limitations.

Doing Photoshop then suddenly became more fun. I didn't have to even think about that white space of a new webpage. Altogether I made 12 pages using image placeholders (using my own text and images) so that I could comprehend the look and feel of the final product. Once I felt happy with the designed pages I consulted the other Committee members for their feedback.

Transferring a Photoshop 35 layer file into Dreamweaver involves turning some layer elements off that could be re-created anyway in Dreamweaver or imported and saved for web, for example, all image placeholders and such like. So it was down to the background elements that could be produced as a single layer - deciding how best to deconstruct the page. The best method, again I found, was simply do a few pencil sketches. On the computer screen drawing too many guidelines can cause a sense of visual confusion.

Dreamweaver MX offers you the choice of working in the traditional tables and a table layout mode where you can control the table by pulling table cells about with the mouse. I found using both methods helped. The table layout mode can cause problems with things when re-converted in regular mode by creating new table layout cells in places you don't want them to be and thus forcing the page out of the original boundaries. As I became more familiar with the programme, that my original Photoshop designs became more flexible in the design and build stages. I'd find myself re-doing elements in different widths to build up the page in a more considered way using Dreameaver as a tool to modify the design and the spaces around the elements.

So, to conclude, I would like to thank the SLPS Committee, particularly Martin and Lynn, Eric and Chris Langton, all of whom have been really great with supportive emails, and in the supplying anything from text files, to researched information or simply bouncing ideas of each other whilst continually website testing. This enabled me to design something simultaneously creative and pragmatic.

Enjoy the new website!

Please send any comments, collaborations, criticisms and feedback to Jane