Stuff & Nonsense Home

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

Blogging And All That Malarkey

Designing New Internationalist magazine pages

Today I want to share and invite your feedback on my work on the New Internationalist magazine pages.

Again, a few rules of the road

  1. What you are looking at is (developed) work-in-progress, not a finished piece. I am very open to constructive criticism about ways to improve what I'm doing, in-fact I really want to hear it, whether you're a reader of New Internationalist or not.

  2. Are you a reader of New Internationalist? Do you work there or are you a member of the co-op? Are you a web geek interested in the redesign process? It would really help me a lot if I knew a little about you when you comment.

  3. So far my process has focussed on content architecture, layout and problem solving. What you're looking at is not my completed visual design proposal for New Internationalist, although it does contain some elements that are part of my thinking, particularly in relation to typography, content readability and minimalism.

  4. The prototype layouts that you will see contain active hyperlinks to other layouts that I'm working on. Some of these are more developed, others less so. I'll give you an opportunity to comment on everything as this process continues, but for now I'd like to keep the conversation focussed and hear your thoughts on the home page.

  5. These layouts have not been tested (yet) in Internet Explorer 7/8. If you use that browser, things could be a little stinky. To view these layouts, you'll need a browser like Firefox 3 or Safari.

  6. Nothing that I give you access to as part of this open design process can be reused, repurposed or otherwise recycled.

(Before we start, if you have been following the design of the home page, you might be interested in taking a look at my most recent iteration that takes into account the comments that readers raised.)

Designing New Internationalist magazine pages

If you haven't visited New Internationalist before, take a look at its current issue page.


The New Internationalist current issue page

Back?

Parts of my job are:

  1. Make magazine content easier to find and browse
  2. Design the content for better readability
  3. Encourage the sale of books relevant to the content

I am also introducing one other important factor of my own into the brief, that of time and context. More about that later.

One thing you may have noticed is that I have removed Current Issue, Back Issues, Features and Columns from the main navigation. By eliminating these redundant links, the main navigation can now focus on New Internationalist's most important properties. One single, simple Magazine link takes a reader to the newly designed magazine issue page for the current issue.

The new magazine issue page design aims to convey the same, or more content, inside a layout that is easier to understand. With its selection of entry titles and summaries, sections and lists, it should allow ample flexibility for the editors to present an issue's content in several different ways. This layout also provides easy access to all of the sections and pages that I removed from the main navigation.


Magazine issue page layout (top) (View in your browser)

I have also introduced issue pagination, so that a reader can page through issues in order on all but the current issue. Where the layout contains the current issue, the top-right area of the page highlights what is coming in the next (as yet unpublished) issue and invites the reader to subscribe. I have also made the columns more visual and introduced a scrolling panel.


Magazine issue page layout (bottom) (View in your browser)

Archives

Two pages make up the current live site's magazine archives; the last twelve issues and the full list of back issues, organized by year. I don't feel that either are as effective as they could be.

My redesign combines both these pages into a single layout that contains a tabbed interface that can hold an entire decade of issues.


Magazine archives (View in your browser)

Magazine articles, context and time

Look around the web, at sites like BBC News, The Nation or Huffington Post (all sites I read everyday) and you'll find they all share something in common. No matter how new or old, important or trivial an article might be, it is always squeezed into the same article template. I think that New Internationalist can improve on that.

This division of magazine articles into two different layouts aims to:

I believe that understanding the context in which an article is written is vital to fully understanding its content. For example, an article about MP's expense abuses might have mattered less in a boom than it would now, in a downturn. Both these new layouts aim to put an article into the context of the magazine in which it was published, alongside links to other articles from the same column, published at different points in time.

In my redesign, articles from the current issue of the magazine will be presented in a layout that is a dramatic departure from the norm. My new layout presents content in a narrow column that has been optimized for readability. I have also removed the sidebar and along with it any distractions away from reading the content.


Current magazine articles (View in your browser)

Older articles, from past issues, will be presented in a more conventional two-column layout complete with a sidebar for advertising, navigation and other content.


Older magazine articles (View in your browser)

And there's more

While this selection of related layouts are less discussion worthy, I'd also like you to see:

Feel free to comment on how you think I can improve. I will really value your contributions. (gulp)

Links

Leave your comment

Rircky Onsman

May 25 2009 @ 10:04am #

I particularly like your approach to the article templates, Andy.

I’m curious about the conservative appearance of the site. Is this a design-based mainstreaming of NI politics? It evokes Time or Newsweek, which makes sense for the news/magazine focus, but I’m not sure it captures the (relatively) radical nature of the views expressed. Or is that just me stereotyping left-of-centre politics?

(I’m an Australian web designer and long-time NI reader)

Adam Bramwell

May 25 2009 @ 02:10pm #

My favourite part of the proposal is your single column layout optimised for readability applied to current articles, with a more conventional advertising and navigation supported layout for archived ones.

Phillip Smith

May 26 2009 @ 12:35am #

I’m glad to see the article pages given so much thought, as they’re a huge part of any site the size of NI’s.

Particularly, for NI, visits to the article pages represents the bulk (>50%) of the traffic that the site receives. Therefor, we’ve always discussed the opportunity to use those “long tail” pages as a way to draw readers “sideways” into other parts of the NI information space, e.g., to a related book, or product, or blog post.

So, following on that… Given that the “older articles page” template is going to receive more traffic (over time) than the “Current magazine articles” template, I wonder if there might be an opportunity to bring in more of those sideways paths in the template for the older pages?

Quick thoughts: Did you know (about NI)? More on this theme (linking to the category page), and maybe the subscription options panel that you’ve used on other pages.

Three cents for today.  :-)

Phillip.

Andy Clarke

May 26 2009 @ 01:11am #

@Ricky Onsman: I’m curious about the conservative appearance of the site. Is this a design-based mainstreaming of NI politics? It evokes Time or Newsweek, which makes sense for the news/magazine focus, but I’m not sure it captures the (relatively) radical nature of the views expressed. Or is that just me stereotyping left-of-centre politics?

— A few answers. What you’re seeing is turning into one of the two visual look-and-feel designs that I will propose next week. It is not yet ‘design complete’ but it does convey my current thinking about layout, functionality, typography and colour.

I am experimenting with design themes because I specifically want the new design to be un-stereotypically lefty. It’s not that I am trying to sanitize New Internationalist or make it appear conservative.

I have discussed the current New Internationalist site, their magazine covers and branding with a lot of people unconnected with New Internationalist (friends, family and co-workers) and one of the points that they have raised repeatedly is that the magazine appears angry and reactionary through its current design.

I am aware and convinced that to make New Internationalist appeal to more/new readers online, it needs to broaden that appeal through a new direction in the visual design of the site. A direction that focusses on minimal design and letting the content of articles and opinions speak to the reader, not the overt design of the site.

@Phillip Smith: Given that the “older articles page” template is going to receive more traffic (over time) than the “Current magazine articles” template, I wonder if there might be an opportunity to bring in more of those sideways paths in the template for the older pages?

— I wondered where you’d got to in these discussions? ;) I agree about the sideways routing. As you’ll be aware by now, I’m designing a system of modular and embeddable components that you can move around the layouts as you need to when you build the site and develop it over time.

I’m sure that we won’t arrive at final decisions about the placement of every element in the few short weeks that we have together. But I know, with the toolkit of designs, HTML and CSS code that has also been written to allow you to drag and drop modules into the layouts, you’ll have huge flexibility.

Quick thoughts: Did you know (about NI)? More on this theme (linking to the category page), and maybe the subscription options panel that you’ve used on other pages.

— Ditto the subscription panel. This can be used on any layout in several positions, even why I don’t indicate it in my layouts. (Sometimes I leave components out when I think they may distract or derail the conversation).

In the next iteration I will include an about New Internationalist panel in the older article template.

Phillip Smith

May 26 2009 @ 01:17am #

@Andy “I’m designing a system of modular and embeddable components that you can move around the layouts as you need to when you build the site and develop it over time.”—Awesome. I <3 Lego.  :-)

Nicolas Gallagher

May 26 2009 @ 01:51am #

Liking the little updates to the main nav and homepage leader. I think the different article templates are a great idea, look good, and are a smart way to convey context.

I had written something about the lack of direct links to other related / popular articles from within the article templates but I see you’ve already discussed this. I’d be interested to see how this would be incorporated into the main article template…if there are ideas to do so at all.

I’m not sure about having the books module in the middle of the article. Might be a tendency for people skimming an article to skip over this interruption and not scroll back up to it once they are done. However, once at the end of the (exceptionally interesting) article I wonder if it would be more effective placed there as a “catch” or prompt to purchase items related to the article. I could be wrong. Maybe something that can split-tested once live?

Stephanie

May 26 2009 @ 08:25am #

A few quick thoughts from a web developer who gets to code more than design, not that I like it that way.  This is my first time looking at your designs since I’m behind on my RSS feeds and working backwards so I appologize if I bring up issues you’ve already discussed somewhere else.

Magazine home page:
- I would increase the prominence of the link to the archives on the magazine page, or maybe change the treatment.  When I was looking for a link to the archives I mentally passed over it the first time since it looks like a feature and I just expected a link.
- This may be a geek centric problem but I’m never sure if “subscribe” meant to the RSS feed or to have a copy mailed to me. It could be helpful to have a break down of the different ways you can subscribe to the New Internationalist out in the open. I wouldn’t be interested in a paper copy but didn’t know until I clicked that there was a digital copy.
- With the sections so clearly defined with different colurs I wondered if the search box in the nav bar would search the individual area, a label would help make that clearer

General thoughts:
- I like the clean, open feeling of the new design, it encourages me to read it in a way most websites don’t, the proposed article templates sound really nice.
- the new navigation catagories make a lot of sense and I like that they simplify my options. I think the ones you picked make good sense.
- Are they phasing out the radio stuff? It’s on the current site but not in your template.
- in the nav bar the “browse by topics” link looks like a label for the search box

Home page:
- as a new reader I have a little trouble identifying what the organization is about (I haven’t quite been able to figure it out from their current site either…)  If they are primarily a magazine, I don’t get that feeling. From all the “support” links, I get the feeling that they are a charity of some sort.  I know it would take up valuable space for returning readers but have you considered some sort of about blurb on the home page? Later: I found the blurb in the footer, I get it now! I’d give it or something like it prominance on the home page followed by a list of the ways they report on the issues, and a list of ways to support them… I’m on a contextual link kick following the last batch of user testing we did on our site.
- I like the colours denoting the different sections, but didn’t notice it at first because the home page and magazine are the same colour - not sure it matters.

Dinu

May 26 2009 @ 08:46pm #

I like the magazine page quite a lot. It’s well laid out with a clear point of focus and easy access to the headlines (which I find most magazine pages lack).

I love the wide image in the article page. However, the narrow width of the content column seems to mess up the proportions of the site. I also have to agree with Nicolas about having the Books module in-between an article. Advertising in-between content annoys me on websites. Maybe best displayed on a sidebar or below the content.

I’m loving the archived articles page as well. However, would the different sized images pose more work for the content editor? Or would the image resizing be automated?

Also, what I meant on the previous post about having the “Subscribe” link on the main nav was so that it gets more attention. The utility nav section usually gets looked off by most people in my experience. Then again, if someone is really intent on subscribing, it takes them only a quick glance to find the link.

Great to watch this design evolution play out. Keep it coming!

Andy Clarke

May 26 2009 @ 09:09pm #

Stephanie: This may be a geek centric problem but I’m never sure if “subscribe” meant to the RSS feed or to have a copy mailed to me.

— That’s a very good, geek related point and not something I had even thought about.

With the sections so clearly defined with different colurs I wondered if the search box in the nav bar would search the individual area, a label would help make that clearer.

— Although I’m not responsible for building the site, I am recommending that we keep the search interface itself very simple and with no section options. I always feel that it is best to keep the initial interface simple and then offer filtering, sorting etc. on the results page(s).

As a new reader I have a little trouble identifying what the organization is about (I haven’t quite been able to figure it out from their current site either…) If they are primarily a magazine, I don’t get that feeling. From all the “support” links, I get the feeling that they are a charity of some sort.  I know it would take up valuable space for returning readers but have you considered some sort of about blurb on the home page?

— Oh you are so right. One of earliest iterations featured a (dismissible) panel that introduced New Internationalist to new readers. I’ll be putting that back into the next iteration. By the way, I purposefully made the home page and magazine section the same (red) colour.

Dinu: I’m loving the archived articles page as well. However, would the different sized images pose more work for the content editor? Or would the image resizing be automated?

— That will be a challenge for the people who will build the site. My own view is that the same (large) image can be used as a background image on a division or another element, but implementation is a discussion for another day.

Andy Clarke

May 27 2009 @ 03:43am #

Hi everyone and thanks for the terrific feedback, it is helping a great deal.

To help everyone get a handle on all of the page layouts that I’m designing (and to focus the conversations into one thread), I have published the templates that I think to be feature complete and a top-down look at the New Internationalist redesign.

Andy Clarke

May 31 2009 @ 11:06am #

Thanks everyone for all your amazing feedback on this project so far. I’ve posted a design update with the latest look-and-feel design, plus links to revised versions of all the templates at New Internationalist redesign - entering the final stages.

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.