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:
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.
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 TheOnion.com or NYTimes.com. 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.
The same grid carries over to the article page, though slightly adapted to allow more room for content:
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.
52 Comments
Veer: Visual Elements for Creatives.Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.
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.
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.
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!
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.
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!
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)…
I love it Cameron. Very retro and established.
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.
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.
I really like it. It’s clean and doesn’t come across as too busy which is so often a flaw in online newpapers.
Gorgeous. Can you guys also redesign every other newspaper website out there?
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.
Outstanding.
As always, yours and Jason’s work is stunning.
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!
Great layout. Really pleasing to the eye.
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.
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.
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.
[wringing hands for tomorrow’s post!]
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!
ML.
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?
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.
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.
Looks great, amazingly suiting for a traditional newspaper.
I especially like the details in the image captions.
The perfect translation from a vintage newspaper to the modern equivalent & unbelievably goygeous.
“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 ESPN.com? Thanks.
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
Love it. Top to bottom. Wouldn’t change a thing.
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.)
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!
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.
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.
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.
Simply brilliant. I’m not a blog fan boy, but in this case you deserve the props. Perfect.
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.
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.
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.
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.
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.
Brian - See Jason’s response.
Very sexy. I envy any CSS designer who can pull off 4 columns across browsers. Very nice.
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.
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.
@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.
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.
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.
That is one hell of a design! The typography choices are beautiful…
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…
This is going to win some kind of online journalism award. I can see it already.
That is very nice looking. I love the feel that the choice of fonts give it. More of a newspaper feel. Very nice.
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…
Full-time and freelance job opportunities. Post a job...
A selection of fine reading, available for a limited time only:
- Jobs home page reorg
- Coming soon: Mobile Web Design, the book
- Dyson ad: Text as more than just words
- Setting sail for Europe
- Review: Sumo Omni bean bag chair
- Dashboard widget for Authentic Jobs
- Limited-time offer: $99 listings
- Nine skills that separate good and great designers
- Fire sale
- Introducing AuthenticJobs.com
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 A guide to publishing web content beyond the desktop. Tips, methodology, and resources. Now available.
Letterpress Posters The unassuming beauty of a freshly letterpressed print.
That Wicked Worn Look. Techniques for that worn, aged, distressed look.
Mister Retro Machine Wash Filters Turn the dial to “Instaworn” with these filters.
Blinksale Dive in and enjoy shamelessly easy invoicing from Firewheel Design.
Basecamp My preferred web app for internal and client project collaboration.
HOW Conference Austin, June 24–27. Pentagram, Adobe, P&G, et al.
Web Design World Seattle, July 20–22. Practical sessions on web design.
Stimulate Salt Lake City, September 2009. Entrepreneurship and design conference.
Linkage:
Follow me: 
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.