Design Says to Shovelware: ‘I Need More Whitespace’ — a Design Critique of TIME
I took two lessons from Time’s Q&A with Bill Keller. The first, outlined in Dear Bill Keller, was intended be a short reaction to the piece, that turned into a 1600 word article.
This post outlines the second takeaway, and will be 1000 words. Pictures are worth 1000 words right? :)
Take a look at the comparison between the print and online layouts of that article below.
click for a larger version
The print layout is clearly, superior. It’s far easier to read, offers a summary of what the article is at an eye’s glance.
- Multiple Pages The online version requires the user to click to a second page to read the whole article. Yet, the print version fits handily on one page. WHY!?
There is no newshole online! Stop making it difficult for us to get to the end of the article! - Ads Admittedly, the print version shares a spread with a full page ad, but the content remains ad free. The online version feels cramped. There are two, small, intrusive ads, that serve to distract from the content.
- Styling is Gone This is a great example of why shovelware is bad for design. The print version nicely separates out questions, credits, and answers with font styles. The online version? Nothing. Someone just copy-pasted the content out of a text document. It’s much harder to read than the article, let alone tell that it’s a Q&A.
- The Sidebar is Distracting Even if Google is my homepage, there is far too much content presented to draw me in. The sidebar is full of irrelevant stuff that distracts me from the article. The clean, minimalistic design in print is far more eye-catching.
The Takeaway
- Use subheads Give the reader entry points. Especially online where people are used to reeading short blurbs of text are are prone to skimming as they scroll.
- Don’t forget the rule about one piece of dominant artwork It's amazing how truly good design never changes. Presenting one place for the eye to center on that sums up the content is a design trait that goes to the way we think – regardless of the medium.
- Leave some whitespace Clutter on the page makes your content hard to read. Just because your CMS allows you to dump in your content and move on, it doesn't mean you should. Giving this article the same amount of design time in both print and online would have helped a lot. I'd bet that the amount of design time for the web could be much less.
A Web Design Critique of Google News
I recently critiqued the redesign of Newsweek, and was pleased to see the positive response. I sorta promised that this would become a regular feature for me, so I'll try to hold to that.
I'm only looking at homepages. Critiquing a whole site is a lot of work. I'll do it someone wants to pay me though :]
After leading a webinar for CoPress on homepage design, I've done a lot of research into mainstream homepages – what works and what doesn't. For the second go at this, let's look at Google News.
Google Wave: The End of the Wild Web
There will be many – many – blog posts written on Google Wave, and there already have been so many created, that I’m sure this one will be lost in the void, but for whomever keeps ‘The Record,’ add me to it saying: “Google Wave will revolutionize communication.”
I’m throughly shocked by the number of naysayers out there. The reaction on Twitter after the announcement, and the excellent review of the event on TechCruch, was mixed. Some were just as enthusiastic as me, but many have the wait-and-see attitude that, to me, doesn’t recognize the pure awesomeness that is Google Wave. There are only two obstacles Google Wave has to overcome to become as widely used as Google Search that I can see: market penetration and standards adoption.
HTML5
The switch to Wave is going to rely on HTML5, a standard that has been 5 years in the making. That’s a really long time coming. The same year the standard got it’s start gave birth to Facebook, Gmail was still new, and IE was still 91% of the browser market. In Internet terms, HTML5 has been in progress since the middle ages.
Changing the basic language of the web is a drastic change, and we need to be sure that the standard is right. Yet, surely we can adapt to adding new standards at a quicker rate? Because all “modern” browsers are open-source, and have a track record for continuous innovation, it’s inconceivable to me that was couldn’t innovate on a faster scale.
Five years is an awful long time, and it’s incredible how much – of the draft spec – the browsers are already supporting. HTML5 will bring about a friendlier internet – one that feels like a desktop experience. We have the technology to deliver that – why wouldn’t we?
A Web Design Critique of the Newsweek Redesign
Newsweek’s redesign/relaunch today revealed a much cleaner, more web friendly site. Many improvements have been made, and you can tell that they’re thinking hard.
However, there’s still room to improve. The essential problem with the site is that it still feel liks a newspaper site, not a online newsorg. Check out the embedded PDF for a look at the annotated homepage of the site and a few quick, overall notes below.
- The design is nice and clean with a solid red motif, but the widgets are sorta hard to tell apart, they don’t really have a bottom.
- I know that Newsweek is a partner of MSNBC, but promoting that connection so heavily may not be so smart. MSNBC should get equal billing (see: Slate and WaPo), or be totally integrated.
- The choice to push the blogs so heavily is interesting (They have a widget and a nav bar). Not bad, just interesting. I’m curious to know if that works out.
- Serious Fun is all kinds of UI hell. The side arrows to mean neutral is just down right confusing , and it’s got very prominent placement on the F pattern of user reading. I’m all down for turning polls into something more of a game, but rethink the UI here.
- Props for having links to other newsorgs. That’s a valuable service that Newsweek is developing. The fact that you get to the other site through a frame is, again, interesting. Cheers to experimentation.
TV Is Dead
This is a great clip about what web 2.0 is – from an academic (but still very exciting) point of view.
Surfin’ Safari – Blog Archive » Introducing CSS Gradients
WebKit now supports gradients specified in CSS. There are two types of gradients: linear gradients and radial gradients.
Surfin’ Safari - Blog Archive » Introducing CSS Gradients
For us geeky web designers out there this is just plain Cool!
For those not so geeky, it means this: what could have taken over 20 lines of code can now be done in 1. Oh and when you're browsing, you won't have to download all kinds of drop shadow images – which means faster loading times.
BBC NEWS | Technology | Hackers Exploit Poor Website Code
XSS attacks were becoming more popular because more and more websites were writing their own snippets of code so visitors could get more out of a site, he said.
BBC NEWS | Technology | Hackers exploit poor website code
Here's the downside the Web 2.0 – a lot of what web designers are trying to accomplish has never been done in quite the same way before. That means that they're writing a lot of custom code… and making a lot of the security mistakes that 'standard' code had eliminated years ago.
So… 'bout time we found a serious downside to Web 2.0.
Freelancers: How Do You Get Work? | Creativebits
- Craigslist
- Word of mouth.
- Referrals from a past job.
- My college buddies. (Especially Chris)
- My colleges job board for alumni
- Comedy Central/MTV job hunt board
- Monster.com
- Krop
- Freelancers Union
- Unsolicited resumes
Freelancers: How do you get work? | creativebits
Great idea for freelance work that I never considered: craigslist. Totally free and really well trafficked.
Cloud Computing Is Well and Good, but It Can’t Beat the Desktop Computer. – By Paul Boutin – Slate Magazine
One of the nice things about Word and Photoshop is that once I fire them up and start working, I can forget all about the Internet for a few hours. Sometimes, my PC and I just want to be alone.
I couldn't agree more. The idea of putting all sorts of applications online is interesting, but not really practical. Photoshop Express is interesting, but it's no more than a proof of concept to me. Perhaps worth having as a tool on an online picture ordering site (like MPIX) as a means of last minute adjustments.
Similarly, gDocs, is convenient if I need to share text with someone as I type it (and see theirs), but it's really not a replacement to Apple Pages, which I do use instead of Microsoft Word.
This guy's basic point is good. Computing through the browser is an interesting idea, but yet to be practical.
The real money will be made when someone figures out how to use these simple apps as they are – not as desktop replacements, but as quick little apps that plugin into simple web apps. The web is about collaboration, make the web apps about that too.
Wow, That Took a While.
So I finally decided to finish (mostly) my blog theme – let me just say that it took a really long time to get that nav bar up there. A really long time. I had to partially redo the way I do tabs on my main site, had to change a bunch of CSS both on my main site and here. All of which was made even harder because I don't have PHP installed on my laptop, so I had to update the live site to see if the darn thing worked. That, let me tell you, is a pain in the but when you're doing a lot of trial and error.
The good news is that I've actually made things more efficient in the process. I cut out some unnecessary code, made my tab system better, and slimed down the size of the main logo that I use. I suppose I learned a thing or two about CSS in the process too.
Thank god that's done.
Oh yea, I know my 'buy' page is now really messed up as a result of my fiddling. I'll fix that shortly.
Coda Confidential
C4[1] Sasser: Coda Confidential - Uploaded by rentzsch
The designer of Panic gives a really long talk about designing Coda. This mostly satisfies my geeky side to watch, but it does have a bunch of funny lines (if you're a geek), and stays entertaining (mostly if you're a designer, programmer, or a geek).
The most interesting part for me (as a geeky designer) was that he jumps straight to photoshop to do mockups. I've always been told (and I find it much easier to) sketch stuff out before hand – then go to photoshop. I suppose if it works for him, then cheers; just not my approach. Although his process of creating a huge multi-layered PSD file is exactly what I do too. I wish my developer (*cough*phill*cough*) would look at the darn thing though.
Mezzoblue § Mediatyping
The link below will get you to a pretty good article on recoding a site css for mobile content. It's got some links to a lot of basic info that designers should know.
IEBlog : Microsofts Interoperability Principles and IE8
Score! IE8 will end the incredible hassle of having to treat Internet Explorer like a retarded child in web development. It's a shame we're gonna have to wait a few years, but still… this is really good news. IEBlog : Microsofts Interoperability Principles and IE8
We’ve decided that IE8 will, by default, interpret web content in the most standards compliant way it can. This decision is a change from what we’ve posted previously.
A Guide to Web Typography | I Love Typography, the Typography Blog
This is a fantasic little summary of how to do typography on the web. It's a fast read, and a must if you're inexperienced with type (yes, it really does matter which font you use where) and into web design. A Guide to Web Typography | i love typography, the typography blog
Free! Why $0.00 Is the Future of Business
Free! Why $0.00 Is the Future of Business : Fascinating look at the future of the internet as a...
