Review: the Scientific American homepage

During her talk at the EBI, Sue Keogh included a slide with a screen grab of the homepage from the Scientific American website, and told us that the content is well-presented, and is helped by good design.

But there are lots of links on that page… lots of options. Why does it work, when other similar pages fail? Here a few pointers…

Thanks to Mark Bingley for double-checking this review.

Scientific American homepage – the good bits

http://www.scientificamerican.com/

Scientific American homepage screengrab

Branding and Navigation

Branding is prominent but not overwhelming.

Scientific American logotype and navigation menus

Navigation menus are skillfully separated in to primary and secondary.
The menu items themselves are short, interesting and will make sense to a broad audience

Long drop-down menus are wrapped, so that they are not lost below the “fold” of the screen.

Across the site, the information architecture and sensible categorisation, means that, although there is a lot of content, it is easily navigable. Naming is logical and clear for the user, and there is no need to use a secondary navigation area on the right or the left of the content area.
This means that the whole content area can be used for… content!

Typography

Good use of typography  –  text is a good size (and easily resizable), and well spaced out. Headings are clear and easily distinguished from body text, and there is a clear hierarchy.

Typography and hierarchy on the Scientific American homepage

The use of a serif typeface gives it a lighter feel than we might expect for a site like this. They have used Georgia (a “web safe” typeface) throughout, except for in the footer, where it is Arial / Helvetica.

Plenty of contrast between foreground and background (e.g. white text on dark brown; black on white or pale green)

Lines are a sensible length, again thanks to the 960px width.

Content

Lots of bite-size, distinguishable chunks of content, and a variety of ways to get to them.
60-second media bursts are custom made for the web user.

Range of dynamic content types on the Scientific American homepage

Search box is in a “standard”, predictable location on the page

Apart from the advertising, the right-hand sidebar contains only lists of links, an no thumbnail images or text excerpts. This allows the sidebar to be clearly defined as secondary content, so that it doesn’t compete, visually, with the main content on the left.

The main content is (dare I say it?!) very “web 2.0”, in that it is very dynamic and varied. This is a good thing!
Content is being drawn from different places, produced by different authors. There are blog posts, slideshows, news items, images, podcasts, videos, articles… all available on the homepage.

News items display their freshness, adding to the sense of dynamism

News item freshness on the Scientific American homepage

Good use of the footer, to pack in some more links to useful content.

Footer and extra content and links on the Scientific American homepage

It isn’t overpowering, though. Links have clearly been given less weight here than they have in the main content of the page.

Layout

The eye is quickly drawn to the featured content, placed in the top left

Featured content on Scientific American homepage

Content is centered, which will make a big difference on large / high res monitors

Grid layout – based on a 960px wide, roughly 16 column grid; the columns being 50px wide, and the gutters 10px.
This means that the main content takes up approximately 2/3 of the page, and the secondary content on the right takes up the remaining 1/3. This would equate to 10 columns and 6 columns in the grid, although it isn’t precise in this case.

Good separation of content into distinct “panels”.
Each panel is clearly labelled, with a meaningful, interesting title.

Images and Graphics

Good use of small, subtle monotone icons. Wisely, their colour matches that of normal hyperlinks.

Images and icons on Scientific American homepage

Images used sparingly but effectively to help draw they eye to key content, add value to associated text, and convey something about the story.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s