In Progress: Site Design

~ 26 April 2006 ~

On the heels of logo work for National Gazette (see “In Progress: Logo Design”), Jason Santa Maria and I teamed up again, this time to provide layouts for the revival of this 200-year-old newspaper in website format.

First, it’s important to note that neither of our designs will be chosen outright. While a “mix and match” strategy is one I’m rarely fond of, Jason and I both knew we’d be combining our efforts into one final, polished layout. Thus, we offered a few different options for key elements. Most notable is layout width; Jason’s is optimized for 800 x 600 while mine is optimized for 1024 x 768. Both could be adapted to either width. And even though the bulk of our individual work was largely done before sharing with one another, we made strikingly similar choices with much of the type, rule, and ornament aesthetics.

For my layout, I spent a good deal of time analyzing vintage newspaper mastheads, current printed newspapers (local and national), and online news sites. On more than one occasion I organized the front pages of about 7 newspapers adjacent to one another for analysis and inspiration.

The end result? Here’s my home page mock-up:

National Gazette home page mock-up

Overall, I’m rather pleased with the grid, whitespace, and type choices. Especially the type choices, in fact, as much of my time was spent testing faces, sizes, letter-spacing, capitalization, and so on. There’s a few things I’d nit-pick, but hey, that’s what revision rounds are for, right?

Additionally, I felt it necessary to challenge myself to use as few images as possible. A disdain for heavy page weight is often warranted with most any site, but with news sites — heavy on text, photography, ads, and other miscellany — the concern is only greater.

National Gazette detailing

In the snippet above, for example, only two images would be required for coding: 1) the article photo and 2) the drop shadow lining the global nav. All other styling would be accomplished using the power of CSS. And without sIFR, no less.

Moving on to structure, the layout utilizes a grid composed of two columns 160 pixels in width and three columns 200 pixels in width. I toyed with content columns of equal width, much like that of or However, in the end, having sidebars set at 160px allowed for easier integration with skyscraper ad sizes, while the primary and secondary content columns set a bit wider — one at 200px and the other double-wide at 400px — seemed to provide more room for styling the text.

National Gazette grid structure

The same grid carries over to the article page, though slightly adapted to allow more room for content:

National Gazette article page mock-up

I could elaborate further, but I think you’ll make your own acute observations merely by studying the mock-ups.

Time to jump over to view Jason’s designs.



Veer Veer: Visual Elements for Creatives.
Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.

1   Norman Orstad ~ 26 April 2006 at 08:06 AM

Looks like another great start! And I’ll bet it looks just as great printed. Now maybe a CSS designer can win some editorial-design awards.

2   Grda ~ 26 April 2006 at 08:35 AM

Excellent work—-I think the time you spent sweating the small stuff really paid off.

One question about your mockups, though: why use such a dark color for the Google Ads block? Seems to me that since Google Ads tend to be very light colored, having a dark stand-in distorts the visual balance of the mock-up with respect to how the final implementation would work.

3   Cameron Moll ~ 26 April 2006 at 08:38 AM

Grda - That’s merely a placeholder, of course. This is the first time I’ve used such a dark color for a temp block. Not sure I’ll do it again, for the very reason you mention.

4   Natalie Jost ~ 26 April 2006 at 08:40 AM

Beautiful, and so clean. It’s a place that would make me want to read. The article page in particular is perfect, having the content first on the left keeps me focused on the article and not wandering off to the other junk until I’m good and ready (which I would be given a chance to finish reading). The flickr photos are a nice touch too!

5   David Hemphill ~ 26 April 2006 at 08:52 AM

I really enjoy looking at the designs Jason and you came up with. Your comp has a modern feel to it that’s very respectful to traditional newspaper design. I also like the wider layout on my monitor.

Jason’s seems like it might be easier for older folks to read and gets my eye to look at the featured article quicker so I imagine it was a hard choice for the client. Good work guys, and thanks for sharing the process thus far.

6   Humberto Oliveira ~ 26 April 2006 at 09:10 AM

I’m amused with your design choices and your attention to typography settings. It’s impressive how far a design can go when the typography is well chosen, it really set the mood for you entire work.

You were very wise to choose a wider layout, it gave the elements an extra breath and allowed you to add more content to the page without compromising the readability. Fantastic!

7   william doyle ~ 26 April 2006 at 09:20 AM

how are you achieving the typography without sIFR? Is it a replacement technique? I am particularly curious about the century gothic-ish typeface (politics and society)…

8   Kim Siever ~ 26 April 2006 at 09:23 AM

I love it Cameron. Very retro and established.

9   Cameron Moll ~ 26 April 2006 at 09:28 AM

William - Georgia and Lucida round out the type choices for my layout. Granted, my treatment of the text assumes 1) anti-aliasing (by default in Mac OS, ClearType in Win) and 2) swapping Arial for Lucida on Win machines.

So it isn’t entirely exact, per se, but close enough for the purpose of mocking.

10   Cliftonite ~ 26 April 2006 at 09:38 AM

Looks fantastic, Cameron.

Out of curiosity, I wish you could tell us what a guy like you makes on a project like this. It’d help the freelancers in the world keep their chins up.

11   Stuart Colville ~ 26 April 2006 at 09:47 AM

I really like it. It’s clean and doesn’t come across as too busy which is so often a flaw in online newpapers.

12   Drew ~ 26 April 2006 at 10:08 AM

Gorgeous. Can you guys also redesign every other newspaper website out there?

13   Joshua Brewer ~ 26 April 2006 at 10:13 AM

I am seriously impressed. While it may not be the final, I think the design stands on its own with an elegance and strong visual appeal. I really like the way it conveys a very “authentic” (sorry for the pun) feel, while still maintaining a very current flavor.


14   Adam Schilling ~ 26 April 2006 at 10:51 AM

As always, yours and Jason’s work is stunning.

15   Wible ~ 26 April 2006 at 10:51 AM

As web developer for a news company I have to say - friggin’ beautiful, man. I’m jealous - this is exactly why I’ve been trying to get them to let me redesign the templates we have to use. Bravo. Excellent treatment!

16   Miko W. ~ 26 April 2006 at 10:52 AM

Great layout. Really pleasing to the eye.

17   P.J. Onori ~ 26 April 2006 at 10:53 AM

My colleagues think I’m nuts but I’m a firm believer that once your grid is well established, you’re halfway there.

Very nice layout, I’m looking forward to see how this ends up.

18   Amit Lamba ~ 26 April 2006 at 10:59 AM

After looking at both mockups by you and JSM, I have to definitely give my nod to your mockup. It’s pleasantly spacious and easily inviting. The problem with most Newspapers, (NYTimes) is that there’s absolutely no breathing room between articles or sidebars. And for that reason, you feel overwhelmed, don’t know where to start and where to end, and get a case of claustrophobia just by looking at the paper. LOL. Anyways, I think your choice for column widths is spot on. It’s a perfect balance.

The only thing I would recommend is increasing the size of the body font on the “also in this issue” area in the main 400px wide column. I dig the idea of visually showing that this section is not the main article via the difference in font size, but I’d adjust the ratio a little. Amazing work !! You can tell you really took time for the little things.

19   Matt ~ 26 April 2006 at 11:01 AM

Wow. Just wow. Really excited to see what it ends up looking like when yours and JSM’s get rolled up into one. Love the crisp, clean look you’ve presented though.

20   luxuryluke ~ 26 April 2006 at 11:16 AM

[wringing hands for tomorrow’s post!]

21   ML ~ 26 April 2006 at 11:31 AM

Very nice. I get the feeling the news co. will take your initial, add brighter buttons, more color and end up nothing like it started. Don’t you just hate that!


22   jody ~ 26 April 2006 at 11:48 AM

Beautiful work, Cameron. Using the Lucida-Mac / Arial-PC combo for body text has recently become a debate in our studio. ..Especially since a large percentage of users are on PC with no ClearType.

Small 10 and 11px tall Lucida looks great on Mac, but when you look at 10 & 11px tall Arial letters on a non-ClearType PC the letters begin to get somewhat jumbled (when mixed case). They stick to one another, become jagged and tough to read.

Our solution has been a tough one. Have you given any thought to this during your design phase?

23   Eric Lim ~ 26 April 2006 at 11:48 AM

Damn Cameron, nice work. The layout feels really clean and easy for the eyes to follow. I’d imagine that with all the info everything would feel cramped, but there’s lots of breathing room in your designs. Great typography as well.

24   Tae ~ 26 April 2006 at 12:29 PM

the design is simply beautiful.

i noticed that both of you used issue numbers and publish dates. i feel that the issue numbering is not really appropriate for news websites and the publish dates for the individual stories is all that’s really needed.

25   Olav ~ 26 April 2006 at 01:07 PM

Looks great, amazingly suiting for a traditional newspaper.

I especially like the details in the image captions.

26   Dan ~ 26 April 2006 at 02:27 PM

The perfect translation from a vintage newspaper to the modern equivalent & unbelievably goygeous.

27   Dan McKinley ~ 26 April 2006 at 02:54 PM

“A disdain for heavy page weight is often warranted with most any site, but with news sites — heavy on text, photography, ads, and other miscellany — the concern is only greater.”

Could you please inform Thanks.

28   bearskinrug ~ 26 April 2006 at 03:18 PM

Lovely! For such a copy-heavy page, it’s extremely light; and each section has such a unique personality, while playing nice with the other columns.

Reminds me of a slick magazine layout :D

29   Colin ~ 26 April 2006 at 04:03 PM

Love it. Top to bottom. Wouldn’t change a thing.

30   Hugh G. ~ 26 April 2006 at 04:04 PM

Outstanding design Cameron! I love how clean it is.

One question though. I notice you both design your comps with anti-aliased text where HTML text would be. Is there a reason for doing that? (I’ve always felt that doing that might give the client unrealistic expectations when the site is actually coded.)

31   alain ~ 26 April 2006 at 04:17 PM

Outstanding work! I love love love the home page design. All of the elements are clearly organized, and the proximity seems spot on to me. On the secondary page I noticed that the left nav had vanished. On this point I agree with Jason’s design. Having the left nav on pages throughout the site would eliminate a few extra clicks here and there for users. And I think the resulting narrower column width for the actual article would make that content easier to read.
Thanks for the insight!

32   Cameron Moll ~ 26 April 2006 at 05:53 PM

Jody - I’ve been returning to using Arial more and more of late. It’s as if Arial were the new Lucida in some respects. I was pleasantly surprised to see Blinksale shift from Lucida to Arial in their latest release. In 7+ years of dealing with the constraints of HTML text, I have yet to come across the perfect solution. However, I don’t hesitate to use substitutes where necessary. For example, I rarely ever use Arial at 10px (or em equivalent) because there’s really no bolding at that size. So sometimes I substitute Verdana in its place, or avoid that size altogether. Same goes for 9px, when dealing with tight spaces in UIs, and Verdana may be the better choice.

Hugh - For years I coded every last comp using aliased text to show exactly how it would display for the majority of users (Win). Only in the last 12 months or so have I shifted to doing comps with anti-aliased text. I don’t have any concrete reasons for doing so, other than perhaps the fact that a fair share of my clients in the past year have also been Mac users or had teams with Macs. Therefore, they understand the aliased/anti issue, and I don’t have concern myself with it as much when comping.

33   Michael Switzer ~ 26 April 2006 at 05:54 PM

As one of the designers initially contacted for this project, but in the end losing out to the two of you, I have to say your work looks great. I thought it mighty fine to even be considered for this in your company, and felt no ill will when Daniel informed me he was going to take up the opportunity to have you guys work on this. Great job.

34   Paolo Sordi ~ 27 April 2006 at 06:55 AM

What a nice work and waht a really “web” idea to share the ‘in progress’ with us. One thing I appreciate is use of color for the article title link: too often I find news site use black for article titles when in fact they are links.

35   Andres ~ 27 April 2006 at 08:10 AM

Simply brilliant. I’m not a blog fan boy, but in this case you deserve the props. Perfect.

36   Tony ~ 27 April 2006 at 09:05 AM

Really great stuff, thanks for sharing the in-progress work, I’m pleasantly surprised your client allowed you to show off this much.

I was also wondering about using the anti-aliased text, thanks for clearing that up.

37   Rich ~ 27 April 2006 at 09:23 AM

This looks really nice, very much like a newspaper, online. The vernacular is spot on.

One thing I’d like to ask, how long did it take you (in terms of days) to produce the front page and sub page comp where you were happy enough to show the client.

I’m trying to educate oour business managment that 3 days isn’t long enough to design three rationalised concepts and would like to get your thoughts on it.

38   Andrew Sipe ~ 27 April 2006 at 10:41 AM

Clever solutions abound… for instance: The Popular Topics (text size = popularity) is a very interesting solution to show what other readers find important. The Scenario - as an active poll keeps reader participation up. I’m impressed with how you actively are keeping Image usage to a minimum and having it all CSS based, it’s a testament to what you can accomplish without using lots of “fluffy design.” If I offer up criticism it would be about color hierachy… the Red you chose is very dominant over the grey tones , it would be wise to use this to your advantage (scanning headlines and important details), which I noticed you have done, but it seems to lose that importance as I scan to the left versus top to bottom. Another user feature would be (back to top) a simple arrow or text feature solution perhaps. I’m very interested to see how your hover/active links will be…

Again, a very impressive design, and the “behind the scene” updates are exciting to see, your ability to articulate what you’re thinking within your decisions is always refreshing. Bravo.

39   Sharaf ~ 27 April 2006 at 10:57 AM

Nice mockup Cameron!

The only feedback I have for the design is the header section. As we all know, news and newspaper sites are filled with zillion pieces of information and sections.

To that end, in your design the header with just the logo takes a lot of real estate up top.

After visiting the site more than twice I don’t event notice the logo uptop…so my humble suggestion is to make it smaller and/or leave it on the left side. This will pull everything up and there will be more content above the page fold.

But I do like everything else, including the logo design.

40   Brian Sweeting ~ 27 April 2006 at 11:10 AM

I’ve enjoyed seeing your process revealed in this project, but I had to question why the National Gazette chose both you and JSM. At first I thought, “Why would they double their cost of designing their site by using two designers in this way?”. I mean it doesn’t seem like there is a high volume of collaboration other than knowing the requirements. It seems that you both are kind of working in a vacuum and playing a friendly game of War with your designs.

There seem to be only two possible answers to my question. 1) The stakeholders felt like two brains are better than one, and that taking the best of both of your ideas would result in the best possible design. Or 2) Because it builds buzz for their upcoming venture to have two designers, with well-read blogs, working together on their project and sharing their individual processes with their audiences along the way.

If it’s the latter, that’s a pretty smart idea. If it’s both, that’s probably even smarter.

41   Cameron Moll ~ 27 April 2006 at 11:38 AM

Brian - See Jason’s response.

42   Aaron Brazell ~ 27 April 2006 at 12:50 PM

Very sexy. I envy any CSS designer who can pull off 4 columns across browsers. Very nice.

43   Brian Sweeting ~ 27 April 2006 at 01:24 PM

So it was neither. Oh well, it really is a nice side-benefit for them anyway. I probably wouldn’t have heard about the National Gazette if it weren’t for your blogs. Now I’m looking forward to it’s debut.

44   Anthony Baker ~ 27 April 2006 at 02:42 PM

How safe is the 1024 x 768 bet these days?

I know most sites have moved away from 640 x 480 altogether (thankfully), but am wondering what the common logic is these days on the usage of higher-resolution monitors these days.

I’ve personally been sticking to no more than 800px wide, but am itching to go wider. That said, I tend to stick more towards a fixed-width design, rather than a flexible-width design.

45   Brian Sweeting ~ 27 April 2006 at 04:16 PM

@Anthony - I’m thinking 2006 will be the year for targeting 1024x768. But it ultimately depends on your audience. Apparently the audiences of CNN, New York Times, Apple, and Fox News can handle it.

You might also consider Dan Cedarholm’s approach with his liquid layout that is constrained with max-width and min-width.

46   Varick Rosete ~ 28 April 2006 at 09:30 AM

Kudos! What a refreshing layout for a newspaper site. Thank you for taking us through the process of how you and Jason are working on this project. Newspaper sites tend to scream out with everything playing in the field of prominence, but your redesign quiets that screaming and makes everthing palatable. The attention to little details gives the design that little OOPMH! as well. Downplayed, but very effective. And I think the type styling you’ve chosen works very well to help the hierarchy of the page. Great design, man! Great design.

47   Michael Erb ~ 01 May 2006 at 08:59 AM

As a very recent student of multimedia I appreciate any designers that are willing to share process. Thank you, thank you, thank you.

I posted here because I lean more towards liking Cameron’s layout. The biggest plus for me was the extra space and the clean whitespace that resulted. I just couldn’t reconcile the fade to pattern background of Jason’s design with the purpose of this site. Maybe I’m a traditionalist but I think clean hard lines help impart that institutional look that was mentioned on the other blog. As a photographer I also appreciate how Cameron handled his image. Granted images aren’t the thrust of this site but by making the image larger and allowing it to fill a whole column you are again pusing the idea of newspaper or periodical. I believe that the importance of images on news sites should not be underestimated. Even people that “just want the news” are probably affected by images more than they care to admit. I always cry when I go the the BBC and they have a dinky thumbnail of a beautiful image. It just ruins the whole experience.

Again thanks for the wisdom. I am sending both of your sites to the faculty at my school.

48   garrett ~ 01 May 2006 at 10:42 AM

That is one hell of a design! The typography choices are beautiful…

49   Misha ~ 03 May 2006 at 04:48 PM

Maybe I am a bit out of this, but where is a link HTML/CSS version of that page? I doesnt say to me much seeing just a mockup, coding would change that image a bit. No one is interested in Photoshop images when speaking of webdesign…

50   John Cade ~ 04 May 2006 at 04:23 PM

This is going to win some kind of online journalism award. I can see it already.

51   Lee ~ 09 May 2006 at 04:08 PM

That is very nice looking. I love the feel that the choice of fonts give it. More of a newspaper feel. Very nice.

52   Volkher Hofmann ~ 13 May 2006 at 12:59 PM

I’ve just now gotten around to studying the design in more detail and just wanted to say how fabulous it is. Great attention to detail, very clean grid … very legible (which is the whole point in the end). Excellent!


Authentic Boredom is the platitudinous web home of Cameron Moll, freelance new media designer, author, and speaker. More…

Come in, we're hiring

Full-time and freelance job opportunities. Post a job...

...view all jobs »


A selection of fine reading, available for a limited time only:

In Print

CSS Mastery CSS Mastery: Advanced Web Standard Solutions A solid round-up of indispensable CSS design techniques by Andy Budd, Simon Collison, and Cameron Moll.

Mobile Web Design Mobile Web Design A guide to publishing web content beyond the desktop. Tips, methodology, and resources. Now available.


Letterpress Posters Letterpress Posters The unassuming beauty of a freshly letterpressed print.

Wicked Worn That Wicked Worn Look. Techniques for that worn, aged, distressed look.

Mister Retro Mister Retro Machine Wash Filters Turn the dial to “Instaworn” with these filters.

Blinksale Blinksale Dive in and enjoy shamelessly easy invoicing from Firewheel Design.

Basecamp Basecamp My preferred web app for internal and client project collaboration.


HOW Conference HOW Conference Austin, June 24–27. Pentagram, Adobe, P&G, et al.

Web Design World Web Design World Seattle, July 20–22. Practical sessions on web design.

An Event Apart Stimulate Salt Lake City, September 2009. Entrepreneurship and design conference.

Feed Me
Articles: RSS
Linkage: RSS

Follow me: Twitter