Mark Boulton Design Blog

.Net Magazine build-off

Posted on by Dan


The Museum of Aviation is a concept created for .net magazine‘s build-off feature, which was featured in issue 213. .net is the world’s best-selling magazine for web designers and developers. Every issue boasts more than 30 pages of tutorials, covering topics such as CSS, PHP, Flash, JavaScript and web graphics. All written by contributors from some of the world’s biggest and most creative design agencies.

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.

Musuem build off

  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.
View the conversation on Twitter → Twitter: Reply on Twitter