Copying the information on The Design Museum Exhibitions page, I created a webpage from this. Firstly, I drew out my wireframe for the page.
Then I decided on typeface of Helvetica Neue, which created a font-family of Helvetiva Neue, Helvetica, Arial “Sans-serif” in CSS. I applied a font-family to ensure the similar font style would appear in all browsers, should the viewer not have Helvetica Neue it would defect to another one of the sans-serif listed above. The same font-family applied to headings tags h1, h2, h3 etc and to paragraph tags p.
4 colours I chose:- Claret, Navy, Dark Purple, Dark Grey (boxes only), Black and White. The design is contemporary, minimalistic to reflect that of the Design Museum style.
SOCIAL MEDIA WIREFRAME
A this is a simple webpage, I wanted to include some links to the Design Museums social media pages. This will be displayed following the footer on the webpage.
Following the above I chose my images, I resized the images in photoshop to the appropriate dimensions to that I chose in my wire framing as above. By organising the images prior to inserting them into the code prevents any adjustments later on, as the image will be the correct dimensions.
Icons design, like the above with the images I chose my social media from Icon finder website. I chose an illustrative design of the icons as I felt it reflected the Design Museum style. I resized these icons in Photoshop to 128 x 128px to ensure they fitted appropriately in the footer and relevant to that of what icon sizes look like.
Now that I chosen, re-designed the Logo colours and resized all my images, I saved them in an images folder in my webpage folder so this are ready to connect to my coding/webpage. It’s important that we save everything in the same folder to ensure no links are broken from missing files.
CREATING THE WEBPAGE
To set up my webpage, I used Dreamweaver. I created and saved a webpage index.html and dragon.css. For each webpage, the html file should have an appropriate name relating to the webpage (and navigation bar button). For example, home should be index.html, the rest can be named as per the webpage i.e. contacts.html. The CSS is the style sheet which will be linked to the html page to give it it’s design style. This is all placed in the head of the html file when writing the code. It’s important to write the title of the page as this appears in the browser. A favicon can be inserted here as well, which will also be displayed in the page bar at the top of the browser. I’ve designed favicons for a few websites and I usually make that 16px-16px, I believe this is the standard size for them.
<title>The Design Museum – Exhibitions</title>
<link href=”dragon.css” type=”text/css” rel=”stylesheet” />
Following the head, I created the body, this is where most of the coding will appear for the body of the webpage. To create a frame for the body I used the a div ID of page. This is standard css div which gives the overall structure of the page. In the header I placed the first image, which is the Design Museum logo. The img src, is a link to that chosen file in the folder ‘images’ where I saved all my images. I saved the file format of the image as png. to ensure the background was transparent and a recognised file format for most browsers. The page size was set to 1920 x 1080 to allow the page to fit up to a monitor size screen.