I had created some mockups of the website previous to deciding on the final colour scheme, logo, fonts and imagery, these are shown above, once we had decided on the these attributes i began to design the actual files which will construct the website.
I created the images for the website on a transparent background so that when I moved into Dreamweaver I set a page background and the image graphic can sit on top of this background with a transparent background to let the background be visible around the images. Using my paper design I combined many of the elements of the layout I felt worked best into this final design. I used on constant document so create all of the elements which would eventually create on long webpage.
To then enable me to use the images within Dreamweaver I had to cut each of the elements up into there one individual images, then using the Save for web and devices tool this saved each section of the image as a separate image that I could then position myself within dreamweaver, this process is known as slicing. I wanted to keep the website minimal and simple and easy to use, therefore I kept to the one background colour and black for all of the content and images as this also create a coherent design across all our media forms across the internet.
Then within Dreamweaver I began to map out the basic layout using simple div tags and placing each element in a separate container so that each element was separate and could be positioned in the correct place, using the dimensions from the photoshop I could calculate where on the page each element needed to sit. I first created the navigation bar, with basic links and anchors and out links to our social media pages.
Once the basic page layout had been constructed using the div tags, I could then easily add the rest of the content to the page and position it correctly. As the webpage is going to exist as one page, the layout was formed from one long column with separate sections for each of the parts to the pages, the navigation bar then anchored to the different areas of the webpage.
I used customised code from the twitter website that allowed me to add a button to our webpage that when clicked links our visitors to a post new tweet page which opens in a new window, this news pages allows our users to easily tweet about our campaign. For the launch the tweets posted by users were to promote the campaign whereas once launched this button changed to allow our users to post there actual truth tweets. Throughout the webpage dropping bombs separate each area of the webpage, I was to encourage the user to scroll down to find more information and also to create anticipation about the event launching sooner, furthermore the bomb dropping link directly to our logo and theme. Additionally to create anticipation around the event launch I added a live count down timer which in real time counted down to the launch of the campaign.
Leave your comment