Big Brother in your schoolDay 6: Build |
Bringing together all the pieces and fitting them into the puzzle
Guy used Photoshop to put together a selection of designs for the general 'look and feel' of the site. The team decided which colour scheme they liked best, and which design elements such as layouts, pictures and buttons, worked best.
He used Dreamweaver to start building the left-hand side navigation that would appear on all the pages. Next, he laid out the text and images of the individual web pages in Photoshop to try out different colours and image treatments.
The initial design idea for 'The History of CCTV' page was to use an image of a camera lens and replace all the little technical numbers that appear on the lens with dates (using Photoshop) which would link to news stories. Once we started trying this out, we realised it wasn't going to work because the layout would be all over the place. Instead we tried a more simple newspaper cutting approach and this was the idea we went with in the end.
Guy working on the design
He cut up the images in Photoshop and saved them in GIF format (web
friendly pictures) ready to take them into Dreamweaver where the web
pages would be built.
Useful links
Generally its easiest to mock-up your designs in a graphics program (or on paper) before getting your hands dirty with HTML. Its easier to make changes, and you can try out lots of ideas quickly. The key is to mock-up as many different options as you can think of, rather than developing one too much.
Screen layout (external link)
Images (external link)
Learning HTML (external link)
Building (external link)
HTML (external link)




Top