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.

Blueprint-based grid system design

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

Designing in the browser iterations (High resolution)

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 (High resolution)

What's next?

Over the next few weeks I plan to devote several blog posts, both here and on New Internationalist, 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 New Internationalist 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.