Internet radioDay 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."
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."
Useful links
Because we were using illustrations on our site, we did a lot of work in Illustrator, a drawing program. Then we opened them in Photoshop and saved them in a web-friendly format. They had to fit together precisely, so we built a table-based layout in our HTML editor, then added some JavaScript to make the 'rollovers'.
Images (external link)
Images (external link)
Tables (external link)
JavaScript (external link)



Net
Radio Diary: Day 1
Top