DTN site design and review

Well the new site design is now up, and I’m get­ting well into the swing of things. I have my research all filed on my com­puter ready to post, and I’ve started sketch­ing 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 fill­ing it with con­tent, and that is going to start in the next cou­ple of days. Until then, I’m going to run through how I designed this site, and why I did what I did.

Plan­ning & wireframing

Thumb­nail image shows mockup heatmap I wanted to cre­ate. This was the most impor­tant stage for this project. Usu­ally when mak­ing a web­site I con­cen­trate on the header and the footer, and the body seems to fall into place. With this site I gave the body much more atten­tion than usual as I wanted the con­tent to in some way mimic a news­pa­per lay­out. What I mean by that is I wanted to dis­play the infor­ma­tion in columns like a news­pa­per would, only the columns on site would flow in order of impor­tance. The main con­tent would sit on the left as the most impor­tant, fol­lowed by the semi impor­tant story high­lights in the mid­dle, with the least impor­tant side­bar com­ing up on the right.

The logo and brand

Thumb­nail image shows rough logo posi­tion­ing con­cepts all of which I thought unac­cept­able. 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 revi­sions and fin­ished con­cepts. In the end I chose Times New Roman for the font. There were a cou­ple of rea­sons for this, one of them being that I can have the post head­ers in the same font as my logo with­out hav­ing to add in sIFR titles for any cus­tom font. This meant I could keep the look and the feel I was going for flow­ing 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 news­pa­per research I did, most of the logo colours for a wide for­mat news­pa­per were black and white (The Times, The Mail), and alot of the colours for a tabloid news­pa­per (The Sun, The Star, The News Of The World) included red.

The cir­cle and it’s posi­tion rep­re­sent con­ti­nu­ity, infin­ity, and the sym­bol for degrees, as I think that the news is sub­jec­tive, and means dif­fer­ent things to dif­fer­ent people.

The con­tent

All the way through the site on every page, I’ve tried to cre­ate the most impor­tant con­tent on the left, and stag­ger the less impor­tant on the right. The titles for the posts try to mimic the news­pa­per head­lines, being as big and as con­cise as I can make them. Each sec­tion of con­tent in a main post is split up with sec­tion head­ers, shown in a smaller font of the same family.

The footer

At the moment the footer is only show­ing about a 1/3 of its good­ies. The rest will come appar­ent in the next few days, but what it will even­tu­ally show is the lat­est piece of work from the DTN Design­Labs, and when I get around to it per­phaps a weekly net­cast on the state of the news? (Think ZeFrank only prob­a­bly not as Ze!)

Well I guess that’s it for now. I’d appre­ci­ate any com­ments if you have them. There’s prob­a­bly one or two bugs that have escaped my atten­tion so if you find any I’d be grate­ful if you could let me know. Oth­er­wise, it’s built to web­stan­dards and val­i­dates both in XHTML and CSS.

UPDATE:
After some great input from Nice Web Type’s Tim (tbrown­type) at the Flickr Nice Web Type pool, I’ve rejigged the type in the logo a lit­tle. For most peo­ple it’s going to look exactly the same, but for the detail dev­ils (like me) it’s going to look (hope­fully) better!

For bet­ter ‘after’ detail­ing, just look at the big­ger logo in the header.

ANOTHER UPDATE:
The logo has gone through a few tagline revi­sions, but I think it’s set­tled now.