For this project we worked in groups.
I was working with Katie Waldock, Clare Haldon and Mark Smith.
As with any team, we each had individual strengths and we tried to utilise this diversity.
My skills lie mainly in design, project conception and testing and so my input fell mainly in the inception stages. as we designed the layout and content of the page, and at the end, when the site required rigorous testing in multiple browsers. I worked in the meantime creating some of the animated Gifs.
Mark is a great organiser and pulled together the folder required for the brief, locating all the information required and setting it out coherently. He also produced some of the graphics, the logo and the About page.
Clare’s expertise lies in Illustrator and so we turned to her for the page’s main graphical layout. She produced the larger vector graphics which formed the basis of our page.
Katie is the coder of the group, having worked in programming previously. She coded the website using Dreamweaver, pulling together everything created by the group.
Our initial research led us to look at various sites. One which stood out was Ben the Bodyguard.
We were impressed by the way the figure appears to walk down the street as the page is scrolled. In face it remains in the middle of the screen, but the impression was one we wanted to use in our website.
After some discussion, we decided to us a tall building, with a glass elevator on the front. We would place a figure in the elevator and as the page scrolled down, the lift would appear to descend the building.
Clare got to work making the building and lift in Illustrator.
Our project required us to produce some animation, so we decided to decorate the building with neon signs, which Mark and I made in Photoshop, animating them into gifs. I produced the clickable signs (the ones which let to other pages)
and Mark made the static signs.
In the meantime, Katie produced a couple of animations for two of the windows:
and Clare built a taxi and helicopter for a “spy-getaway” animation we wanted to make to start and finish the page experience.
Mark put a folder together of all the administrative work we needed and made an illuminated sign for the page.
Gradually, the pieces were coming together and it was mainly down to Katie to write the code and bring it all together.
Owing to illness and work commitments, my input througouht the project was minimal, so I tried to redeem myself a little by testing the site in several browser and offering constructive feedback.
With browsers differing so much in the way they display pages, we found it very difficult to present a website that worked in every one.
The best we found was Safari, which seemed to have fewer glitches than the others. firefox and chrome both had display problems, rendering the whole image too large and off to the right of the page.
The secondary pages, which Mark put together, mostly displayed well, so it was the large images and animations which were causing problems in the web browsers.
The final piece can be seen here.
Related articles
- Turn Any Image Into an Animated Gif (techonator.wordpress.com)
Polana Fowdrey 