Stuff & Nonsense Home

Where you’ll find designer, author and speaker Andy Clarke. The bastard.

Blogging And All That Malarkey

Help me to redesign New Internationalist

A few weeks ago I received an email from New Internationalist magazine asking me if I’d like to work on the redesign of their online magazine, blogs and shop. I was away from my studio when the email arrived so I pecked out a quick reply on my iPhone. I think it went something like New Internationalist? Oh fuck yes!


PDF referred to in this screencast

Transcript

New Internationalist has been around for 35 years, campaigning on a host of social justice issues. It's not as overtly political as I am, but for me, as a designer who is interested in social issues, this is a dream job.

The current New Internationalist site has been around for a few years and I imagine like many sites, its grown organically over the years, to include new sections, new areas such as a shop and new functionality. It's not, by any stretch of the imagination, a bad site, but not being one to look a riot policeman's horse in the mouth, I'm relishing the opportunity to improve it and to make a new platform to carry New Int forward online for the next few years.

I have to confess that when it comes to design, I'm often a bit of a dictator. Not the kind of wearing a uniform, awarding myself military medals kind of dictator, but often pretty close. Let's just say that I have strong opinions on the ways that things should be done.

So I'm going to attempt to take myself out of my presidential compound a little bit for this project by attempting to design more in the open. Maybe not to the extent that my friend Mark Boulton has done for his designs for Drupal, or Jeffrey Zeldman has for Mozilla, but close.

I think that this is important for a project like New Internationalist, because I truly believe that what it at stake here is more than just a web site. If my design can help New Int succeed in getting their messages across more effectively to more people, then I'll likely have done the most important job of my whole design career. That's how passionate I am about this project.

We, that's me and the New Internationalist team, Adam and Philip, have agreed that we are going to design predominantly using markup and CSS. This means that we will be able to react to your feedback and suggestions much more quickly and make new iterations of the designs faster so you'll be able to interact with them in a browser, rather than as flat graphic visuals. That doesn't mean that I won't be showing Photoshop or Fireworks comps, I will, but these comps will be kept to an absolute minimum and they will demonstrate overall look-and-feel directions, rather than being pixel-perfect representations of the templates that we'll be building.

The guys at New Internationalist have already given me a set of requirements and I've been mulling these over for the last few weeks. In the spirit of openness, here is a PDF of what I received. Like most sets of requirements, I'm treating these as starting points for the new design, rather than as a checkbox of issues that I need to address.

The essence of my job, as I see it, is to tackle several important design, UI and business related issues:

My first job is to improve the presentation of New Internationalist's content to make it more readable, accessible (in the widest sense) to people who may not be hardcore New Int readers. This is hugely important for me as I want people who have not read the magazine before to become more easily engaged with the subject matter. I'll be working on this through a more open layout, with better typography and with fewer visual distractions.

While we're on the subject of topics, I want to make it far easier for readers to follow topics that interest them, everything from global warming to globalization. This is going to involve designing ways to people to more easily find those topic areas on the site, but also ways for people to be kept up to date with new articles, whether that be through RSS, Twitter or emails.

The New Internationalist home page is particularly challenging as it needs to convey constantly updated content from New Int blogs as well as articles that have been republished from the printed magazine. Feature blog content too heavily and a reader might not notice that there are articles from the magazine. Go the other way and focus on magazine articles that change less frequently and a reader might be given the impression that the site is updated less often. This is going to be a fine balance.

Finally, fundraising/monetization is a vital part of keeping New Int active and this is achieved through donations, subscriptions to the magazine and the sale of books and other items. I want to make the buying of these items an integral part of the New Int experience, essentially placing books that are related to article topics in key positions inline as well as making sure that the subscription process (to the print and electronic versions) of the magazine is featured prominently and is far simpler than on the current site.

As an example of one of the areas that I'm aiming to improve, as it stands at the moment, the magazine subscription process is fairly lengthy, confusing and takes the reader across multiple pages and then onto external sites. These external sites have their own, separate navigation and as there is nothing, bar the URL change in the address bar, to warn a person that they are leaving New Int, this could be confusing and counter-productive. In case you missed it, and I imagine many people do, the link to subscribing to the electronic PDF version of the magazine is almost invisible too.

Of course, these are only a few examples of the design challenges that I'm going to work on. There will be a raft of smaller design decisions to make along the way.

As I'm designing more in the open, your feedback and suggestions are going to be vitally important, both on the design work that I make but also on the existing New Internationalist site and what it does right and wrong. I'm interested in your opinions if you're a regular New Int reader of if you've never been to the site before.

I'll be posting about the redesign here. I'll post links to markup and CSS templates along the way so that you can see my UI and layout decisions in your browser. Plus I'll be using Flickr to demonstrate design visuals and to collect ideas and inspiration.

I need your help to make the next iteration of New Internationalist the best that it can be. New Int matters as an organization and because the important work it does and the subjects it covers.

Please, go take a look at New Internationalist online now, read some articles and help me by participating in this design process.

Leave your comment

Daus

May 12 2009 @ 02:23am #

As a newspaper site, the body width is a bit to tight, make the content feels squeezed. Maybe the first thing that you should address is this issue :)

IMHO. Excited to follow the process ;)

Stephanie

May 12 2009 @ 02:28am #

Link to the requirements PDF you received from them is missing :S

I’m looking forward to seeing how the site develops.

Rich Clark

May 12 2009 @ 02:31am #

Sounds an exciting project Andy, where’s the PDF though?

Phillip Smith

May 12 2009 @ 02:38am #

Excited to hear people’s input. Also, FYI, we have an e-newsletter planned to go out to New Internationalist e-mail list on May 26th. Perhaps we could include some links and instructions there, as a way of getting New Internationalist subscribers and supporters more involved in the process. What say you?

Andy Clarke

May 12 2009 @ 02:43am #

Philip Smith: That sounds like a fantastic idea.

Rich Clark and Stephanie: Oops. Thanks for the gotcha. Here is the NI Requirements PDF (33Kb).

Daus: The width will almost certainly been increased where it makes sense to do that.

DarronBarnes

May 12 2009 @ 03:30am #

Just loaded up the site and the first thing that hits me is a homepage that covers my screen by 3/4 of graphics/adds. Maybe reduce them, by not having so many or smaller graphics at the top of this page.

Great project, can’t wait to see the site develop.

Lewis Litanzios

May 12 2009 @ 05:36am #

66% Blog 33% Print - run with it perhaps?

Props for opening this up Andy. Balls of steal. Will catch a couple of articles daily over the next few weeks to stay abreast of the action.

Jay Robinson

May 12 2009 @ 07:32am #

I am excited to see how this project turns out—and how I might be able to help!

Vladimir

May 12 2009 @ 08:45am #

Congratulation!

I didn’t have time to look in details on the site but i noticed few things:

First bigger default width 960 to 980px.
Bigger default font.
Bigger search box.
I thing this is perfect case to use CSS Grid Framework. Or just built one!

Why I am in favour of CSS Framework in this case? (not because I built 3 of them :) )

Because you can have variety of grid combination with one CSS file.
For example in my “The Golden Grid Framework” the the grid system is less then 1kb and you can built hundreds of different layouts with 1kb css.
I Not saying use my framework. I’m saying built one!

I will probably start with the width the main article column and the size will be probably determined by some typographical solution. If you have the size of the main article then is very easy to determine the size of the other columns.

I should probably try to find out more about their user behaviour, first on paper format then on web. And ask a lot of questions….

I think that the dream job of every web designer is re-building newspaper site. This is a ultimate challenge so much data and so little space. Ah,I’m so jealous :)

Good luck!

Andy Clarke

May 12 2009 @ 09:37pm #

Cole Henley has set the ball rolling with some insightful comments on out Flickr Group. Thanks Cole.

Lewis Litanzios

May 12 2009 @ 09:41pm #

http://www.flickr.com/photos/cole007/3524472355/in/pool-newinternationalist

Private group?

Adam Ma'anit

May 12 2009 @ 09:45pm #

“New Internationalist? Oh fuck yes!”

Note to web designers vying for work. This is how you win contracts! :p

Already some very exciting stuff emanating from Malarkey studios. Some of it is even design-related! Thanks to everyone for your interest and support with the New Internationalist redesign! Looking forward to your input.

Andy Clarke

May 12 2009 @ 09:54pm #

Lewis Litanzios: Any Flickr user can join the Flickr Group. If you are still having problems, drop me an email and I’ll try to help you sort it out.

Adam Ma’anit: “Already some very exciting stuff emanating from Malarkey studios. Some of it is even design-related!” — I’m so glad that you liked my idea to design New Internationalist in the style of the ’80s pop sensation Bucks Fizz (joke).

Adam Ma'anit

May 12 2009 @ 10:04pm #

Andy Clarke: “I’m so glad that you liked my idea to design New Internationalist in the style of the ’80s pop sensation Bucks Fizz (joke).”

You realise you have an uncanny resemblance to Bobby G of Bucks Fizz?!

Lewis Litanzios

May 12 2009 @ 10:04pm #

http://www.flickr.com/groups/newinternationalist/ - join the Flickr group.

Cheers Andy.

Michael

May 16 2009 @ 01:43am #

Gives a sense of what the NI is about. Good background listening.
http://www.bbc.co.uk/iplayer/episode/p0031d7f/Jo_Thoenes_14_05_2009/

It’s about 2 hours and 9 minutes into the show.

Commenting is not available in this channel entry.
Hardboiled Web Design

Hardboiled Web Design by Andy Clarke

How the latest technologies and techniques will make your websites more creative, flexible and adaptable. Get hardboiled in all formats from Five Simple Steps. Digital formats also available at Amazon.com, Amazon.co.uk and the iBooks store.

We’ve deconstructed this site to focus on content while we restyle. Expect wonkiness during the transition.