Making Web Pages – The Design Museum Exhibitions Page

Copying the information on The Design Museum Exhibitions page, I created a webpage from this.  Firstly, I drew out my wireframe for the page.

WIREFRAME

IMG_9460

TYPEFACE

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.

DESIGN COLOURS

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.

IMG_9461

 

IMAGES

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.

<!doctype html>

<html>

<head>

<meta charset=”UTF-8″>

<title>The Design Museum – Exhibitions</title>

<link href=”dragon.css” type=”text/css” rel=”stylesheet” />

</head>

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.

<body>

dmlogo.png

NAVIGATION BAR

Following the logo but still in the header I created a div class inside the id page for Navigation.  Originally I designed my buttons in Ai, then I decided to make use of a CSS button generator link instead to save time as this created the rollover/hover css coding.

For the navigation buttons, I used my standard font family in the css, in the colour claret, code using hex code.  I used a strong tag to highlight the text in Bold.  When the cursor is rolled over the button the text changes to navy colour to highlight its selection.  Again, this is design in a minimalistic style to represent the Design Museum.

I created an unordered list tag and li tag to list the navigation within the bar.  The height of the bar was set in css.  This was to ensure the buttons ran side by side in the navigation bar by applying a small height.  The link these buttons to the other webpages, if they were designed.  I would have used the link tag a href and type in the appropriate webpage name i.e. contacts.html.  All webpages would be save in one folder and along with the image assets and css files.

 

</header>

EXHIBITIONS 

I wanted to created a design of blocks of information, so applying a css code of columns style and float, the column classes would then run side by side.  I resized all my images for this section so I linked them in the code from the images folder.

Below is what my webpage is starting to look like when tested in the browser.  Ensuring I ‘saved all’ and tested in the browsers as I completed each div ensured I could pick up any errors as I went along and not try to hunt down the problem afterwards.  I tested in both Safari and Google Chrome browsers to ensure the page was developing the same style in both.  This is important as it considers the viewers browser of choice, so I want it to look the same in both.

EXHIBITIONS

Design is a continually evolving subject: visit the museum to be inspired and informed by the exhibitions.

CURRENT EXHIBITIONS

15 March 2017 – 4 June 2017

Imagine Moscow : Architecture, Propaganda, Revolution

Marking the centenary of the Russian Revolution, this exhibition explores Moscow as it was imagined by a bold new generation of architects and designers in the 1920s and early 1930s.

Screen Shot 2017-04-14 at 10.03.55.pngDESIGN VIDEO

Starting to use the tags h1, h2, h3, h4 and p to display a hierarchy of information for the design layout.  Font family set up in CSS.

VIDEO 

Following the Exhibitions, I embedded a video.  I chose the video from one of the Design Museums footage.  I converted it in clip converter and saved it as two file formats .mp4 and .ogg.  I could have created a link to this footage, which would have been just as effective, but I decided to embed the video and save as these file formats to demonstrate its use.  I saved in two file formats to ensure the video would run in multiple browsers as some viewers may not be able to run mp4 files or ogg files.

I chose appropriate dimension for my video 500x500px and added control button so the user can choose to play the footage or not.  Sometimes an autoplay button can be coded.  This is useful if you want a video to run in the page as part of the overall web design, for example in the background of a page or a header.  Video usage is becoming extremely popular in contemporary website design, particularly in the header, which enhances the user experience, so the autoplay button is very useful.

<center>

<h1>WHAT SHOULD BE IN THE DESIGN MUSEUM’S COLLECTION?</h1>

<video width=”500″ height=”500″ controls>

<source src=”videos/What should be in the Design Museum’s Collection-.mp4″ type=”video/mp4″>

<source src=”videos/What should be in the Design Museum’s Collection-.ogg” type=”video/ogg”>

</center>

</video>

MORE EXHIBITIONS

For the more exhibitions design, I wanted to vary it to the above exhibitions design, so I used a figure class with a float for the image coded in css.  This allowed the text to get pushed over to the right of the section div.  I chose my images and resized them prior to the coding.

Screen Shot 2017-04-14 at 10.04.58.png

<div class=”section”>

<h1>EXPLORE MORE EXHIBITIONS</h1>

<section>

<figure>

<img src=”images/futureexhibitions.jpg”/>

</figure>

<h2>Future Exhibitions</h2>

<p>Explore upcoming exhibitions at the Design Museum.</p>

</section>

FOOTER

Applying the same method as that in the navigation bar to create the footer layout.  Further design to both the navigation bar and the footer would be to link the pages associated with each button by inserting link coding for each button.  I have demonstrated how links work in the social media icons buttons below.

Screen Shot 2017-04-14 at 10.05.08.png

SOCIAL MEDIA BUTTONS/ICONS

To create social media buttons I first chose my buttons from icon finder and resized them in Photoshop.  Wrote the code for each button and link.  Image source to the image i.e. Facebook, the inserted the a href tag as a link to the chosen URL.  The Facebook icon is linked to the Design Museum Facebook page.  This method was applied to all buttons to link to each of the social media websites representing the Design Museum.

<fa>

<center>

<img src=”images/facebook.png” height=”50″ width=”50″><a href=”https://www.facebook.com/designmuseum/&#8221; class=”fa”></a>

</fa>

To close the body and html page.

</body>

</html>