Extreme Makeover, typography edition

The Carsonified roadies have loaded their white Transit and braved the ferry across the sea to Northern Ireland. This week I’m joining the Future Of Web Design Tour in Belfast, presenting “How to Design in the Browser”. More on that later. But first, a one-hour workshop, “Extreme Makeover, Typography Edition”

Most sites would benefit from a typography makeover — a nip and tuck, a glyph graft or a pair of silicon smart quotes. In this non-invasive session, author, designer and self-confessed typography perfectionist Andy Clarke will take his scalpel to a site of your choice to demonstrate the fundamentals of type and practical ways that you can improve the look and readability of your content with better typography.

The audience suggested NI Direct — The official government website for Northern Ireland citizens. NI Direct is a relatively new site, launched in April, and by most standards it’s a nice piece of work. Of course that didn’t stop me from tightening its typography wrinkles. First the site’s home page.

NI Direct home page (before surgery)

Post surgery NI Direct home page

As one hour is not nearly enough time to cover every aspect of typography across the site, I also chose to makeover an article template as communicating written information is the main purpose of the site. Here I concentrated on:

NI Direct article page (before surgery)

Post surgery NI Direct article page

You can download both the before and after Extreme Makeover NI Direct (ZIP 645Kb).

I hope the audience enjoyed the session and think that NI Direct looks younger, thinner and more radiant after it’s makeover.

Andy Clarke 02/09/09 | Tweet this | Short URL: http://stuffandnonsense.co.uk/s/1143

There have been 11 replies

  1. 1

    John Faulds

    Is there anywhere I can read about the best practices for positioning of lists? Because my personal preference is for indented lists like in the original, rather than hanging as in your revision but would like to know if there’s any theory behind which is better.

    (This comment was left on For A Beautiful Web)

    2nd Sep 2009
  2. 2

    Andy Clarke

    …my personal preference is for indented lists like in the original, rather than hanging as in your revision but would like to know if there’s any theory behind which is better.

    — Interesting question, but I’m not sure that looking for evidence is ever the best way to justify design decisions.

    The best way to set lists is often subjective, I think that hanging lists just feels better and makes a design feel more considered. If you want to intent your lists (as the first example), make sure that you add plenty more margin before and after the list to create a natural reading break.

    2nd Sep 2009
  3. 3

    andrew

    Did you forget to sew the site search back on during surgery or was that deliberate?

    2nd Sep 2009
  4. 4

    Five Minute Argument

    I’m sure Robert Bringhurst talks about hanging bullets (and a justification thereof) in his excellent book, The Elements of Typographic Style (http://www.amazon.co.uk/Elements-Typographic-Style-Robert-Bringhurst/dp/0881792063). I’m personally a big fan, because I think it’s a distraction to have the left-hand edge of the text jumping in and out all over the place.

    I love this post, Andy; great to see a small part of your design process outlined in a visual, concrete way. I really like that I can view two screenshots, immediately see an improvement, then dig in detail and work out why I prefer one to the other. Are you considering doing the same exercise for other aspects of design - colour, layout, etc?

    (This comment was left on For A Beautiful Web)

    2nd Sep 2009
  5. 5

    Kevin

    It’s definitely subjective. The rule of thumb I go by is to make the list stand out so the reader knows there is a change.  For instance I will indent a list if it starts right after a paragraph without a return separating the two.

    2nd Sep 2009
  6. 6

    Darren Taylor

    Andy, I had the same question as Andrew above, was the exclusion of the site search deliberate due to time constraints? I really appreciated your feedback this morning as unfortunately NIDirect is just one project in a never ending conveyor belt that I have in work. You’ve motivated me to go back and address the issues that have been nagging me and have given me some firepower (not to mention a handy zip file!). By the way, how did you envisage the subnav working when it needs to display children and grandchildren?

    2nd Sep 2009
  7. 7

    Andy Clarke

    @Andrew: Did you forget to sew the site search back on during surgery or was that deliberate?

    — Deliberate. Considering I only had a few hours to prepare, I had to lose elements that weren’t critical to telling the typography story.

    @Five Minute Argument: Are you considering doing the same exercise for other aspects of design - colour, layout, etc?

    — This was a one-off talk, but of course if NI Direct would like me to work for them, I’d be happy to help.

    @Darren Taylor: Was the exclusion of the site search deliberate due to time constraints? By the way, how did you envisage the subnav working when it needs to display children and grandchildren?

    — Thanks Darren, and thanks so much for being such a good sport. Yeah, I only had a few hours preparation, so needed to simplify the layout to focus peoples’ attention on the type. Regarding the subnav… I’m available for birthday parties, weddings and being hired as a web designer. You know? For money? ;)

    3rd Sep 2009
  8. 8

    Darren Taylor

    LOL God loves a trier Andy!

    3rd Sep 2009
  9. 9

    Dave Smith

    Hi Andy,

    Great job with this. I’m really disappointed that you’re not doing a similar sessions at FOWD Tour Bristol because it’s exactly what I’m looking to see.

    Any chance that you/Carsonfied might stick up some .mp3 audio + slides?

    Oh and on your Blog “comments” form can you add the “www.twitter.com” to the “Twitter URL” field so we don’t have to fill it out ourselves? Thanks

    7th Sep 2009
  10. 10

    gummisig

    A clear improvement by miles. I like how you cut out the background imagea in the header to, minimal noise over all.

    I dont like the people headline and the links under that. I think the links are to far from the headline vertically. I tend to like tight leading.

    7th Sep 2009
  11. 11

    Andy Clarke

    @Dave Smith: I’m really disappointed that you’re not doing a similar sessions at FOWD Tour Bristol because it’s exactly what I’m looking to see.

    — Sorry I can’t be in Bristol (a guy has to work to pay the bills, you know? ;)) I’m also disappointed that I can’t take up Carsonified’s offer to speak at FOWD in Glasgow, but my schedule is just too busy.

    Any chance that you/Carsonfied might stick up some .mp3 audio + slides?

    — There was video taken at the event and that might see the light soon I hope. There were no slides to speak of, just the before and after HTML and CSS files that you can download above.

    7th Sep 2009
Commenting is not available in this weblog entry.

From the archives

An archive of blog entries since 2004 on subjects including CSS, web standards, accessibility, website design and development.