Welcome to the beta version of newint.org — we have just redesigned it — more features coming soon!
We care about your opinion. Let us know what you think, or report any problems. Feedback »

A top-down look at the redesign

Over at For A Beautiful Web are thumbnails grouped by section. Each is linked to a higher-resolution version in our New Internationalist group on Flickr. 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.

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, both here, on Flickr or on the For A Beautiful Web.

Comments are open at For A Beautiful Web/

Designing blog post 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.

(If you have been following the design of the home page, you might be interested in taking a look at my most recent iteration (5) that takes into account the comments that readers raised. If you commented on my designs for the magazine pages, there is a new iteration (5) of those too.)

Designing New Internationalist main site pages

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


The New Internationalist current blog page

Hello again.

While I realize that these blog templates are less noteworthy than the other sections that I have shared, parts of my job are:

  1. To take existing blog content and features and make them easier to find and browse
  2. Design the content for better readability

My redesigned blog index (seen if you follow the blog link from the main navigation) takes the most recent blog entries across all of the New Internationalist main sites and organizes them by blog name, Editor's blog, Majority World blog etc.).

To improve clarity, I have intentionally reduced the number of blog entries shown per blog, but have added new navigation in the sidebar in the form of most read and most commented entries across all blogs. I have also introduced a new tabbed panel for multimedia items including photos (formerly the Photo Blog), Podcasts (formerly Radio) and Videos (new).


Blog index page layout (View in your browser)

Entries

Each blog now has its own index page. This design is almost identical to the main blog index.

Blog entry pages now feature a redesigned breadcrumb trail that can be repurposed in selective places across the site. They also include links to related entries as well as to a new, reusable, category template that I intend to be used to show all entries by the featured author.


Blog entry page layout (View in your browser)

Modular design

As I explained in my first entry about The New Internationalist redesign process.

For me, the best way to approach designing a project like New Internationalist is not to design a web site, but instead to design a system. This means focussing on creating a series of reusable, modular elements that New Internationalist will be able to roll out across the site. This will give them more long-term flexibility and better value for money from the time that I'm spending with them.

Nowhere is this better demonstrated than in the way that the modules and templates can be reused and restyled across multiple sections of the site. All that will be needed of the New Internationalist developers is to change the class attribute value on a template's body element.

For example, the most recent or standout blog entries can, if required, be presented in my article template that I have optimized for readability.


Article template used across different sections

The same principles and process apply to the category template and many others across the site.


Category template used across different sections

Working in this way, by making both markup and CSS modular, I hope to have developed a framework that will allow the editors and developers at New Internationalist to relocate any page elements onto various templates with minimal (if any) effort.

Comments are open at For A Beautiful Web.

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:

  • Emphasize current articles
  • Provide a more relaxed reading experience
  • Create a clear hierarchy between the old and the new

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

Comments are open at For A Beautiful Web.

The New Internationalist home page challenge

First 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. 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.

  3. 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.

  4. 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 Firefox 3 or Safari.

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

The home page challenge

If you're reading this on my sites, you might not have visited the current New Internationalist home page.


The current New Internationalist home page

Problems with the current design that have been discussed include:

  • Confused navigation zones
  • Busy, crowded and cramped layout
  • Confusion between magazine and blog content
  • Visual dominance of sidebar detracting from readable content
  • Internal site navigation disguised as ads
  • Lack of focus on call-to-actions including subscription sales

Some of the factors I have considered in my re-design have been:

  1. Reorganizing navigation into logical zones to make it simpler and more intuitive
  2. Widening the layout (physically and visually) and adding whitespace to emphasize content
  3. Creating clearly defined zones between magazine and blog content
  4. Reducing the colour palette
  5. Simplifying navigation to eliminate the need for internal site ads. This creates space for legitimate, external ads; increasing the opportunity for revenue generation
  6. Adding emphasis on revenue generating calls to action, including shop items, books, past issues and subscription

The magazine/blog content dichotomy

Perhaps the major challenge in re-designing the New Internationalist home page is creating defined zones for magazine and blog content and creating a balance between the two.

The magazine content is vital to encouraging subscribers, but is updated less often. The blog content is free and updated more regularly. Giving prominence to blogs might mean that new readers miss the important fact that New Internationalist is a magazine, not simply a blog or news outlet. Alternatively, giving prominence to magazine content and the site might appear too static.

Iteration one

My first thought was to mix both blogs and magazine articles into one stream. After-all, I thought, both are New Internationalist output. The problem with this approach is that as magazine content changes less often, it would soon be pushed down (or off) the home page by an influx of blog entries.

Iteration two

This introduced the concept of tabs, placing ample content from blogs and magazine into their respective tabs. But in talking to people about this approach, several problems came to light. Which tab should be open by default? Magazine or blogs? Which-ever I chose, there was a danger than a reader might miss the other?


Abandoned home page layout (View this layout completed in your browser)

Although a third iteration (below) quickly took its place, I have developed this second iteration for you to see and comment on. Who knows, it may well find itself reused on another part of the new site?

Iteration three

This is the home page layout that I want to present to you as my recommended option. In this iteration, I have replaced the tabs with two very distinct content areas for blogs and magazine.


An early wireframe of iteration three

I have chosen blog content to be nearer the top as this is updated more regularly. Magazine content comes lower down the page and is visually and geographically linked with related content (such as past issues) and call-to-actions (subscription).


The recommended home page layout (View this layout in your browser)

To help guide a reader to blogs and magazine zones, I have made a leader/teaser panel that reflects the most important story from each. When a reader clicks, they are smoothly scrolled to their chosen zone.

I hope that this gives ample and equal focus to the two important content types as well as a smooth experience for a reader.

More to see

Although I am still working on the specific detail and design of other elements on the home page, I thought that it might be useful for you to see their works-in-progress. In particular, look out for the new products area that brings items from deeper in the site onto the home page. This includes the tabbed area for books, past issues and shop items.

Next, the current site's subscription process needs improvement and my challenge is to make the first steps of that process simpler, by combining them into one, simple, overlay panel that offers both print and digital editions of the magazine.

I hope that you'll enjoy digging into the home page and maybe the other layouts that I'm working on. Feel free to comment on how you think I can improve. I will really value your contributions. (gulp)

Links

Comments are open at For A Beautiful Web

New Internationalist online branding

The branding of New Internationalist magazine has changed, at times radically, since the first issue in March 1973. That month the Provisional IRA bombed Whitehall and the Old Bailey in London, Pink Floyd released Dark Side of the Moon and the last US soldier left Vietnam. Back then, New Internationalist sported an uppercase, slab serif header with a sash emphasizing its newness. As would become a common device over the years, its wordmark's colour changed to blend with its cover art.

With a gap of six years in New Internationalist's online archives, we pick up the story with issue 80 in October 1979, to find that the workmark has mutated — losing the all uppercase letters and placing the word new above the x-height. Again the wordmark colour changed to blend or contrast with each issue's cover art. This branding continued for six plus years, until it said its goodbyes in issue 157.

March 1986 (a month notable if only for the launch of the Today newspaper — the first in the UK to use computer photosetting and full-colour printing) saw a radical departure as New Internationalist became NI. First utilizing uppercase slab serif characters, a device that lasted until April 2000;

and from then on, just as the  United States government began its anti-trust tussles with Microsoft, as ni.

I must admit that this 2000 incarnation of ni's branding is my least favorite. Maybe that's because its swoosh quickly became a cliche, but mainly I think because the sans-serif letters and italicized i seem to have little to do with the organization's visual history.

In September 2005, 382 issues under its belt, ni and its swoosh were gone and New Internationalist was back, the full wordmark, this time in contemporary (and current) sans-serif.

One of the magazine's longest running design devices, that of blending or contrasting with each issue's cover art, remained, at least for a time, before establishing a new standard of white against a red background, that continues today.

This trip through the archives might be fascinating, but what does it have to do with my job today?

Although the magazine's branding changes has followed patterns, during any period it has remained largely consistent. The current web site seems at times positively schizophrenic. If you dig deep enough you might be (un)lucky enough to find three different New Internationalist/NI/ni logos on the same page.

Part of my task is to create a consistent look for all of New Internationalist's online magazine content, blogs and its shop, while at the same time keeping it clear to a visitor what section they are reading. My current thinking is to adapt and resurrect a long-standing New Internationalist tradition and use subtle colour changes to denote each section.

I'm also concerned that the website branding must be consistent to no small degree with the printed magazine. This will help to keep a unified feel for people moving from web to print and from print to web. At the same time, I don't feel that the website will benefit by being constrained by the magazine branding; colour or typography.

What's needed, I think, is a fine balancing act — a design that nods respectfully at the past, but has its own air of self-assured confidence.

Public comments are open at For A Beautiful Web: New Internationalist online branding.

About Andy Clarke

Andy Clarke has been called a lot of things since he started working on the web ten years ago. His ego likes words like ambassador for CSS, industry prophet and inspiring, but actually he is most proud that Jeffrey Zeldman once called him a bastard.

Andy took ten months out of his life to write the best-selling book Transcending CSS: The Fine Art Of Web Design, but Andy’s passion is amazing web design. He loves making desigs for the web, writing about design and teaching it at workshops and conferences all of the world.

Now he is pulling all of those passions together to create For A Beautiful Web, a unique series of web design master-classes that cover topics including visual design, best-practice use of technologies such as CSS, as well as geeky stuff like Microformats.

The New Internationalist redesign process

For me, the best way to approach designing a project like New Internationalist is not to design a web site, but instead to design a system. This means focussing on creating a series of reusable, modular elements that New Internationalist will be able to roll out across the site. This will give them more long-term flexibility and better value for money from the time that I'm spending with them. Creating a system in this way also means that I spend more time on the important job of designing. There are several important factors that go into designing a system such as the one that I am creating for New Internationalist.

Defining a grid

This is a topic that Mark Boulton touched on all too briefly in his excellent Five Simple Steps. Creating an underlying grid structure takes the guesswork out of designing. It also ensures that the design remains consistent and balanced across all pages of the site. For New Internationalist, I designed the grid structure based on two factors.

The first is the fact that the web team at New Internationalist is familiar with the Blueprint CSS framework, having used it to create some sections of the current site. I have been very vocal in the past in my opposition to certain aspects of CSS frameworks, namely their largely non-semantic, out-of-the-box markup, so we agreed to eliminate all layout components leaving only reset, basic typography styles and of course Blueprint's grid proportions and 950px wide content area.

The second factor was the common need to allow for standardized advertisement sizes, as advertising is one important source or revenue for New Internationalist. In particular, sidebar columns must be wide enough to accommodate either one or two advertisements to a total width of 300px plus padding and margins.

From these factors I designed a simple column structure with one sidebar and a main content area that can be sub-divided to contain a variety of different content types.

Designing from the content out

Designing from the content out means creating a series of modules; several different ways to display blocks of content such as article summaries, that can be reused to best work with the context in which they are placed. For example, some article summaries will be full-width to denote that they are recent or important stories. Other, less recent or less important summaries will appear in narrow columns or as a grid. The is a technique borrowed directly from newspaper design.

This also echoes what I have learned from comic-book design and spoken about over the last few years — the idea that the larger the panel size, the more time a reader should devote to looking at that panel, regardless of the quantity of content that it contains.

Considering time and context

Take a look deeper into most news sites and you will find that they often utilize the same page structure or template for every article, regardless of importance or how new the story is. This makes very little sense as I feel that the most up-to-date or important articles should be given greater prominence through the layout of the template that contains them.

For New Internationalist, I am designing a series of article templates that will showcase newer articles by removing unnecessary visual distractions such a sidebars and will allow the reader to focus solely on the written content. As an article ages, it will move through a series of templates that become progressively more complex; for example by adding contextual information such as details of the magazine where the article was first published, other articles from the same magazine (to add further context) as well as related articles on the same topic.

Designing in the browser

When you are designing for the web, it makes very little sense to use a graphics editor such as Fireworks or Photoshop for anything more than creating the broad brush strokes of a visual design, plus elements that will go into that design. There is only one effective way to design for the web and that is to design using the web.

I've written and talked about this process before, so it shouldn't come as much of a surprise that I'm redesigning New Internationalist in the browser.

There is no doubt that designing in the browser using markup and CSS saves time. This process means that I can move from rough sketches into production ready markup and CSS in a matter of hours without wasting time on creating multiple, static, design visual iterations of the many templates that the site requires. It also means that time spent explaining proposed functionality and ideas is completely eliminated. The team at New Internationalist can interact with pages immediately in their browser. This is especially important for non-technical people who might have less time or ability to imagine how a feature might work.

Working with markup and CSS also means that I can iterate designs faster than with a static visual, sometimes making several iterations in one day. So far this has meant that I have been able to work on over ten iterations of over twenty templates in little over a month (including my traveling Down Under).

New Internationalist can cut existing site content into these templates themselves to check that my proposed designs will stand up under the weight of the many different types of content that their site contains.

In the past, some people have argued that working this way has disadvantages as well as its obvious advantages. Some have argued that designing in the browser leads to simpler, boxy designs that lack the creative flair of a design made in Photoshop or Fireworks. While I'm sure that this might sometimes be true, it misses the point that Photoshop and Fireworks still play a key part in the overall process, that of creating the broad brush strokes of any visual design.

Simply put, designing in the browser uses the right tools for the right jobs: Fireworks is wonderful as a layout tool for creating look-and-feel designs, Photoshop is excellent for everything that Fireworks isn't made to handle. Markup and CSS are most appropriate for designing web pages as together they allow me to work with real content and functionality in ways that Photoshop and Fireworks never can.

Other people have argued that diving straight into markup and CSS takes more time than designing with a graphics tool. This also isn't true, unless you take the approach that the markup and CSS that you write during the design process or during prototyping is somehow inferior to final production code and must therefore be written twice. Again, simply put, when you approach markup and CSS as a throw-away, that is exactly what it will become. The answer is to write the best markup and CSS at every stage, so that 95% of it or more will make its way into the final product.

Designing a system works

Designing a system, rather than imposing constraints on creativity actually adds to the creative process. It helps everyone involved to more easily understand the process of designing and to provide more targeted feedback during the project. This is particularly important for me working on this project as I believe that opinions from New Internationalist readers matter more than my own or, dare I say it, the New Internationalist team or members of its co-op.


Latest home page design iteration

What's next?

Over the next few weeks I plan to devote several blog posts, both here and on For A Beautiful Web, to particular aspects of the layout, structure and functionality of the new site. I plan to show all the iterations of my designs and try to explain the decisions that I have made so far.

In about a month from now, I plan to show look-and-feel designs, here, on For A Beautiful Web and in our Flickr group. When we have reached a broad consensus that I am barking up the right tree, we will implement the chosen design as a CSS plugin and release the full set of templates for public testing. This will spread the load of browser testing to New Internationalist readers and others, again saving time so that we can better utilize it to make the designs more robust for everyone.

I hope you'll join me for the ride.

Public comments are open at For A Beautiful Web: The New Internationalist redesign process

About Andy Clarke

Andy Clarke has been called a lot of things since he started working on the web ten years ago. His ego likes words like ambassador for CSS, industry prophet and inspiring, but actually he is most proud that Jeffrey Zeldman once called him a bastard.

Andy took ten months out of his life to write the best-selling book Transcending CSS: The Fine Art Of Web Design, but Andy's passion is amazing web design. He loves making desigs for the web, writing about design and teaching it at workshops and conferences all of the world.

Now he is pulling all of those passions together to create For A Beautiful Web, a unique series of web design master-classes that cover topics including visual design, best-practice use of technologies such as CSS, as well as geeky stuff like Microformats.