Webit logo
Home
Competition
Lesson plans
Example websites
Case studies
FAQ
Multimedia library
Sign up
IEE logo
Ch4 logo

Internet radio

Day 7: Design and Build


We're finally making some progress with the design - the last piece of the jigsaw. The build itself was a piece of cake - we just need to tidy up the text and build the templates to drop it into.


Whilst everyone in the team agreed that we were getting somewhere, we also agreed that there were still some unresolved issues. Andy had a solution to our problem with drawing the characters though.


Andy: "Ever since we decided to use characters to tell our story, the problem of how to show the characters has bugged us, but today I found a font made up of illustrated heads; all quite funky. I just picked 4 characters that looked suitable, coloured them in using Adobe Illustrator and made little Polaroid-style frames to make the navigation elements for the site."


Diary gallery thumbnail
Making the Polaroid-style navigation


Ange: "I took Andy's graphics, kept the comic book feel of the first part of the text and then threw everything else away! The weird thing was, when we'd got rid of everything that wasn't necessary, somehow the design started to look right. I changed from harsh black to friendly blue colours and kept everything pretty simple. The characters were colourful enough and since they were one way of navigating the site, we didn't want them to get lost on the page."


We had our designs mocked up in Photoshop, so all we had to do was chop out the graphics and then recreate the design in HTML. We decided to use tables to lay out the pages because we needed fine control over the placement of graphics on the pages. But beyond the navigation, we didn't have to use many graphics to make it look interesting.


Ange: "There was a lot of text in the detailed information section, so I brought out any interesting facts or web links into coloured blocks. You can do a lot just with HTML colours, careful type and creative layout. As a final twist, we put some JavaScript rollovers on the navigation images to reveal the text when the user rolls over them."