The brief:

Mock up the homepage for a museum. It should reflect the museum’s atmosphere and collection and because museums are often only able to display a fraction of the material they own, it is also an opportunity to show objects online, possibly in high def. If there’s a lot of exhibits to see, a usable navigation is crucial. Of course, visitors to the site should also be able to find out easily where the museum is located, how much the tickets are, special deals and events, etc. There’s also a chance to include audio and video as well as social media. Please keep in mind that the museum might have a tight budget as there’s often a non-profit organisation behind it.

As we’re as interested in the thinking behind the site as in the design itself, explain in the copy everything that would be ‘under the hood’ (eg technologies and tools, CMS used). You can use a fictitious museum or an existing one for this challenge.

My solution:

The Museum of Aviation is a fictional aerospace museum I invented. I imagine that, because it’s run by a non-profit organisation, the budget is a little on the restrictive side. I therefore tried to look for a simple yet cost-effective solution for the design.

Museum sites often manage to be uninspiring, boring and cluttered, with users having to drill down a couple of levels before they finally reach the information they need. It’s important that visitiors to this website can find out easily where the museum is located, how much admission tickets cost and if there are any special deals available. They should also be able to see what events and exhibitions are currently being showcased quickly and without any fuss.

With this in mind, the homepage includes panels containing key pieces of information. In many cases, people will be able to find out what they want to know from these. If not, they can simply navigate through the site with a single click.

Content will need to be regularly updated, with details of new exhibitions, events and latest news. for that reason, the museum will have to be allowed to manage the site itself, so a usable CMS is needed.

Because money is scare, the site was developed using the open source system Drupal. This enabled me to take advantage of any modules already created, eradicating the high costs involved with using a proprietary CMS.

1. Exhibition carousel

   This area enables the users to browse and navigate through the objects currently being shown at the museum. They can also click through to the exhibit page.

2. Human first, then machines

   Microformats are small patterns of HTML that represent commonly used elements of a page, such as contact details or dates. They enable the end-user to extract information.

3. Video promotion

   Rather than using static imagery to promote the museum, I decided to try video via a third-party service, Vimeo. This enables the museum to showcase star exhibits in hi-def.

4. CSS3

   Taking advantage of a number of new CSS3 techniques such as the transform property, I was able to rotate elements such as the ticket and tag attached to the balloon.

5. Social media

   Social media plays an essential part in today’s web. This enables the museum to interact through Twitter and Facebook, informing friends and followers of updates and offers.

6. Visual style

   The style of this homepage was influenced by Streamline Moderne, a late form of art deco design that emerged in the 1930s and was influenced by modern, aerodynamic creations.

We wanted something that would reach all our users no matter what medium they were viewing the websites on. After doing some initial research I came across Ethan Marcotte’s Responsive Web Design article on A List Apart, coupled with the examples of Simon Collison and Jon Hicks personal sites, this sent my heart racing into the possibilities for the job in hand.

Media Queries opened the possibility of reaching all our users without having to create different versions of the sites for different devices and also allowed us to practice one of our key principles at MBD ‘progressive enhancement‘.

Media Queries are simple to use and are no more difficult than writing Conditional Comments illustrated below:

<!--[if IE]>
You are using Internet Explorer.
<![endif]-->

For Media Queries we use @media to specify the media type and then a set of conditions which must be met in order for the media query to be executed. Below are list of examples:

@media screen and (max-device-width: 480px), screen and (max-width: 600px) {
   General iPhone styles.
}
@media screen and (max-device-width: 480px) and (orientation:portrait) {
   Portrait iPhone styles.
}
@media screen and (max-device-width: 481px) and (orientation:landscape) {
   Landscape iPhone styles.
}

@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
   Portrait iPad styles.
}
@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
   Landscape iPad styles.
}

You can see a demo of media queries at work by viewing A Practical Guide to Information Architecture or even this site by resizing your browser width or viewing on an iPhone or iPad.

Browser that currently support media queries are:

• Firefox 3.5+
• Chrome
• Safari 3+
• Internet Explorer 9+
• Opera 9.5+

We’re in the Top 25!

Mark Boulton Design have been nominated for design agency of the year by .net magazine. We are over the moon here at MBD about being nominated as it is a great honour.

To vote for us please go to .net magazine awards_2010.

This helps improve usability, as the content creator no longer has to search for the published checkbox as they can just click the ‘Save as Draft’ Button.

Current release is for Drupal 6 and Drupal 7.

Install Instructions

1) Copy the save_draft folder to the modules folder in your installation.

2) Enable the module using Administer -> Site building -> Modules (/admin/build/modules).

3) Now when you create a new node, a ‘Save as Draft’ button will be added to the form.

Download Drupal Save Draft Module.

Save Draft is also an included module in Drupal Gardens.

WordPress´s templating system can be changed without editing PHP or HTML code, as well as themes which can be installed so you can easily customize your site. If you have a basic knowledge or understanding of PHP and HTML you will be able to make your own customizations to these themes. WordPress also features integrated link management; a search engine-friendly, clean permalink structure; the ability to assign nested, multiple categories to articles; and support for tagging of posts and articles. Automatic filters that provide for proper formatting and styling of text in articles (for example, converting regular quotes to smart quotes) are also included. WordPress also supports the Trackback and Pingback standards for displaying links to other sites that have themselves linked to a post or article. Finally, WordPress has a rich plugin architecture which allows users and developers to extend its functionality beyond the features that come as part of the base install.

At time of writing WordPress is at version 2.9.2

With an active and passionate community of nearly half a million users, Drupal is constantly evolving and improving. These Developers write thousands of add-ons for Drupal known as modules. In the Drupal community you will often see the answer “There’s a module for that” when discussing features, bugs or ideas.

Open Source thrives, and in fact survives, on the collective wisdom of thousands of contributors. All talking; all giving; all working towards the same goal.

I have also developed and maintain a Drupal module that I have released on drupal.org which adds a ‘Save as Draft’ Button and functionality to the content creation form in Drupal, to read more visit Save Draft Drupal Module.

At time of writing Drupal is at version 7.