Well the new site design is now up, and I’m getting well into the swing of things. I have my research all filed on my computer ready to post, and I’ve started sketching out some ideas in detail for what I want to do. Now the site is up and designed, all I have to think about now is filling it with content, and that is going to start in the next couple of days. Until then, I’m going to run through how I designed this site, and why I did what I did.
Planning & wireframing
Thumbnail image shows mockup heatmap I wanted to create. This was the most important stage for this project. Usually when making a website I concentrate on the header and the footer, and the body seems to fall into place. With this site I gave the body much more attention than usual as I wanted the content to in some way mimic a newspaper layout. What I mean by that is I wanted to display the information in columns like a newspaper would, only the columns on site would flow in order of importance. The main content would sit on the left as the most important, followed by the semi important story highlights in the middle, with the least important sidebar coming up on the right.
The logo and brand
Thumbnail image shows rough logo positioning concepts all of which I thought unacceptable. The logo took a fair amount of time for me to be happy with. I went through dozens of sketches and nearly equal amounts of revisions and finished concepts. In the end I chose Times New Roman for the font. There were a couple of reasons for this, one of them being that I can have the post headers in the same font as my logo without having to add in sIFR titles for any custom font. This meant I could keep the look and the feel I was going for flowing across the pages.
UPDATE: Logo has been tweaked. Scroll down for more.
The final colours I kept as black, white, and red. You know the old joke, “What’s black and white and red/read all over? A newspaper/A panda with a rash”. Of all the newspaper research I did, most of the logo colours for a wide format newspaper were black and white (The Times, The Mail), and alot of the colours for a tabloid newspaper (The Sun, The Star, The News Of The World) included red.
The circle and it’s position represent continuity, infinity, and the symbol for degrees, as I think that the news is subjective, and means different things to different people.
The content
All the way through the site on every page, I’ve tried to create the most important content on the left, and stagger the less important on the right. The titles for the posts try to mimic the newspaper headlines, being as big and as concise as I can make them. Each section of content in a main post is split up with section headers, shown in a smaller font of the same family.
The footer
At the moment the footer is only showing about a 1/3 of its goodies. The rest will come apparent in the next few days, but what it will eventually show is the latest piece of work from the DTN DesignLabs, and when I get around to it perphaps a weekly netcast on the state of the news? (Think ZeFrank only probably not as Ze!)
Well I guess that’s it for now. I’d appreciate any comments if you have them. There’s probably one or two bugs that have escaped my attention so if you find any I’d be grateful if you could let me know. Otherwise, it’s built to webstandards and validates both in XHTML and CSS.
UPDATE:
After some great input from Nice Web Type’s Tim (tbrowntype) at the Flickr Nice Web Type pool, I’ve rejigged the type in the logo a little. For most people it’s going to look exactly the same, but for the detail devils (like me) it’s going to look (hopefully) better!
For better ‘after’ detailing, just look at the bigger logo in the header.
ANOTHER UPDATE:
The logo has gone through a few tagline revisions, but I think it’s settled now.
