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.
Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.
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.