1. Computing

NASA Mars Science Laboratory

By

HTML5 Design Gallery
Curiosity is the Newest Mars Rover — This is the Web Page for Curiosity

Curiosity is the Newest Mars Rover — This is the Web Page for Curiosity

Screen shot by J Kyrnin courtesy NASA

http://www.nasa.gov/mission_pages/msl/index.html

This is a web page with a lot of information and from a design perspective it is fairly busy. But I find inspiration from what they are trying to achieve, not just from the design of the site. The goal is to get people curious about Mars and about space in general, and I think the two rotating image galleries, the Twitter updates, the Events, and more all serve to further that purpose.

The design of the site is strong, with a solid 3-column layout where all the images in the main column fit effectively and provide more details. The two side columns are clearly extra information that you can click on once you’ve gotten your fill from the image galleries and text updates. If I were going to do anything to the layout, I would make it more responsive to browser size. On my high-resolution screens, there is a lot of black, star-studded background on either side. In fact, on my browser there’s enough room for a fourth column to pull some of the sidebar information up and bring more of the content above the fold.

If you have photo galleries you want to display, this site shows how you can do them well. Notice that the thumbnail images are all the same size, with a title and short caption below them. You can also see from the page numbers below the images which image you’re viewing and how many are left in the gallery (as well as being able to click through to the image you want). The changing images can be a little distracting, but that type of animation can keep your site interesting. The other thing you should note is that the colors in the gallery are dark and muted This takes the focus away from the design and puts it on the photos where you want it to be. It helps that most of the photos from Curiosity are in black and white, but a dark gallery helps set off color photos as well.

Have you built an HTML5 site? Or do you know of one that does a great job with HTML5? Submit HTML5 site designs to be featured on this site. You can also submit non-HTML5 pages to be considered for the weekly inspiration to Favorite Web Designs.

  1. About.com
  2. Computing
  3. Web Design / HTML
  4. Web Design
  5. Inspiration
  6. HTML5 Design Gallery - NASA Mars Science Laboratory

©2014 About.com. All rights reserved.