Blogging And All That Malarkey

New Internationalist redesign - entering the final stages

Now is the time, particularly during this open design process, where I get nervous about presenting the design I hope to launch. While I know that there are still aspects left to resolve, I wanted to share my process and thinking behind what I’m showing today.

I know that a lot of designers spend hours crafting their designs in Photoshop or Fireworks before asking a client to sign-off on a design. When ink is on paper, only then will they start to write code. As you'll know from this process, I do things differently. I wireframe and prototype in a browser and I design using one too.

On this project, working with markup and CSS, I have been able to see the effects of design decisions across all thirty templates in a seconds after changing often just a few lines of CSS. I know that I've written about this before, but I honestly believe that (for me at least) designing in a browser makes the process of design more spontaneous, fun and accurate than making iterations in Photoshop or Fireworks.

Rather than spend hours or days at the start creating an overall look-and-feel direction, I've worked from the inside out.

Building structure and layout
Working on typography
Layering on hues
Adding, removing, then sometimes adding again, graphic elements

Instead of designing for intensive periods, I prefer to work in short bursts, sometimes for only a few minutes a day. I often leave a design open on my second monitor so that I can live with it for a while, then I move on to the next step. Recently I've found that one result of this is adding far fewer graphic elements and only where I really feel that a design benefits from them.

The New Internationalist look-and-feel

I had several objectives when I started out designing the New Internationalist look-and-feel. I wanted:

Continuity with aspects of the existing brand where they worked. That is why I retained similar base colours and used red as an accent/action colour.
To evolve the character of New Internationalist to make it appear more open and confident.
To reflect the heritage of the printed magazine by using subtle halftone shading to hint at printed dots

So here it is.

New Internationalist home page redesign

You can view the design as:

An image on Flickr
A demonstration with links to many other templates for the new site.
A side-by-side comparison with the current home page

I'm always conscious when I work on an existing brand that I need people to recognize the character of a familiar site in certain aspects of a new design. I hope that readers of New Internationalist will see this design as an evolution and that my use of some familiar elements will help them to quickly feel at home.

Leave your comment

Sam Wieck

May 31 2009 @ 11:22am #

Really inspiring Andy. As a young designer I’m really interested in the process and thinking behind the…uh—more experienced hands. I’ve been reading along diligently through the process. Thanks for sharing :)

Michael Kozakewich

May 31 2009 @ 04:00pm #

I’ve never been one to mock-up. The idea of pulling pixel-perfect creations out of the air like that just boggles my mind (except if you’re developing for a grid system, I guess).

Colin Williams

May 31 2009 @ 07:43pm #

CHEERS! Andy! Cheers.

Luc

May 31 2009 @ 08:11pm #

Very nice - love spacing and cleanliness, and the half-tone stuff in the backgrounds (don’t be surprised if it becomes a new trend). The only think that irks me is the facebook/twitter/RSS links at the very bottom - they look out of place somehow…

prisca

May 31 2009 @ 08:23pm #

Beautiful, Andy :)
And what a difference to the current design - wow… It’s great to see the 2 in comparison right next to each other - the new design is really uplifting and light, beautiful typesetting, spacing and column use - wonderful :)
Very glad to see you kept Bodega in the end - looks like a perfect evolution from their current heading, very different in its more elegant presentation yet still remaining faithful to the original.
There’s only one little aspect which does not seem to quite fit for me here, might just be me, of course. The section colours work really well, beautiful tones - apart from the homepage and magazine colour. This red seems less saturated and a little dull in comparison with the rest of the shades.

& thanks again for sharing your design process, Andy :)

Max.W

May 31 2009 @ 08:24pm #

I’ve never seen a process been done like this, this great and gives us plenty to go on. It’s looking really nice BTW

Max.W

May 31 2009 @ 08:27pm #

@Luc good point, I’d just throw them all under the right side paragraph and reduce the size and remove the text.

Shira

May 31 2009 @ 08:35pm #

Andy,
I’ve been following your design process of the NI website closely and have found it interesting and inspiring.
I’d like to thank you for sharing it with the rest of us.
I absolutely love the result, but I wanted to turn your attention to a possible readability issue. You’ve added a background pattern to the top horizontal bar which works fine with the light background but really compromises readability in the red ‘subscribe’ block. I’ve made a real effort to read the content but have found it a real challenge (I’m still not sure what it says…).
Again, other than that I absolutely love it.

Micheil Smith

May 31 2009 @ 08:48pm #

I’m not sure if you’ve seen this, but you may wish to rethink your font stacks. That screenshot is taken on linux / ubuntu pc, with all windows core fonts and adobe fonts installed.

Nicolas Gallagher

May 31 2009 @ 09:15pm #

It’s been really interesting to see all the iterations and how you went about addressing the feedback from NewInt and the comments. I’m also a big fan of doing design work in the browser and relegating photoshop to a supporting role (maybe because I can’t really use photoshop that well!)...so thanks for sharing your process and justifications.

Jeremy Keith

May 31 2009 @ 09:15pm #

It looks and feels bloody brilliant. And I have the feeling that if you *had* tried to do the visual design primarily in Photoshop or Fireworks, it would look a lot less bloody brilliant.

Rircky Onsman

May 31 2009 @ 10:25pm #

Beautiful work.

I believe your design will actually help the content to be taken more seriously, something that is of the greatest value imaginable to a client like NI.

A truly superior example of design easthetics and user-based functionality improving the users’ experience of the content.

I’m looking forward to it.

Daus

June 1 2009 @ 12:23am #

Really love the new look. The halftone thingy is indeed a significant accent of the header (upper body) part. And the white space and information flow is just right.

Thank you for sharing this.

Blake Watson

June 1 2009 @ 05:26am #

It’s awesome. I wish I was 20% of half as good as you are.

Maybe add a “Close” (or an X) button to the subscription window just in case a user doesn’t know how to close it.

**User info**

Not a newint reader,
I make Web sites

David DeSandro

June 1 2009 @ 06:05am #

Andy, not only am I tremendously impressed with the design, I’m more amazed that you were able to put this together in such a short time span. This process perfectly demonstrates the advantages of approaching web design from the HTML & CSS angle, as opposed to opening Photoshop. Thanks so much for sharing.

It’s awesome to see that you were able to get the CSS Speech Bubbles working. I’m aware they aren’t perfect, as I caught some instances where the points weren’t hitting the bubbles in previous iterations, but it looks like they are all un-severed. Thanks for putting these into practice.

craig zheng

June 1 2009 @ 11:29am #

Brilliant job, Andy. Really gorgeous. It’s been a treat to watch all of this unfold, and to pick your brain throughout the process. Thanks again.

Satoshi Kikuchi

June 1 2009 @ 07:56pm #

It`s awesome.
I love your brilliant job very much. Thank you for sharing your idea with us.

Michael

June 1 2009 @ 08:12pm #

Hello Andy,

Michael here from the NI Oxford office (Sales and Marketing Team). I just had a dig around for some background subscription figures (in the UK, to the paper version, directly from the current website). I’m interested in your quiet, clear approach to sales and thought these figures may help. Although subs are increasing from the internal ad slots, no matter what we do the menu option is still favoured. So I think the figures below back-up the new design and approach:

06/07
subs from main menu - 1062
subs from ad slots - 192

07/08
subs from main menu - 1260
subs from ad slots - 302

08/09
subs from main menu - 896
subs from ad slots - 454

These figures need to be taken with a pinch of salt. They are not total subs from the website as many more come in via traditional marketing. But they do give a basic picture. I’m afraid I can’t give similar figures for the shop.

Stephanie

June 2 2009 @ 07:59am #

Thank you so much for sharing your design process with us! It was a good experience for me (a mostly font end coder) to see how you think about design and also to let me stretch my design muscles.

I really like your recent changes to the blog template. No need to be nervous, it’s a good design even with their quirky word mark ;)

Anna Chen

June 2 2009 @ 07:47pm #

Well, that is a WHOLE lot better. I like all the air around the text, yet there’s still a unity and connection between the elements. Well done.

Amrinder

June 4 2009 @ 07:21pm #

Impressed. Great job Andy! Every aspect of great design has been taken care off. White space, typography, color, usability, grids ... everything perfect. I love it!

Commenting is not available in this channel entry.