Addam Wassel's Blogging Adventure

bbc vegas sports travel tigers womma michigan wedding design typography football internet encoding myspace chicago weather stupid thing i did tea fire el dc moving newsvine editing podcast music books amazon round cube food my web odeo icon buffet trash bags ann arbor ruby on rails laptop geek lifehack chores iron internet explorer canoe movie animation disney css web standards disaster hurricane computer baseball england olympics holiday basketball softball superstition meme graduation ipod art exhibit open mic tagging mashup review html working group w3c npr this american life html5 rant

Entries tagged with "design"

Reading my book this morning, I came across a paragraph, written by David Jury, that stuck with me.

Challenging the status quo is, undoubtedly, part of the service provided by graphic design. But here, we need to distinguish between creativity and originality. It is possible for originality to be no more than the rearrangement or a recombination of existing elements into a different pattern. Originality alone is vacuous, since a "solution" need only be unconventional or different to be original. A creative solution will have varying degrees of originality, but it will always have purpose and be useful. With creativity, I see no reason to differentiate between fine art and applied art. In fine art, just as in typography, surely, originality alone is banal, no more than novelty. To be creative, originality must serve an intellectual and/or practical purpose

I read it twice more, then sat and thought about it. That last sentence pretty much sums up my attitude toward design.

To be creative, originality must serve an intellectual and/or practical purpose.

Most designers who work today strive to make "pretty" websites, thinking they are creating the high design that clients hired them for. I hate to say this but I'm going to anyways. Most of these "pretty" sites are Flash-oriented ones. There. I said it. Flash is an amazing technology that, when used properly, is groundbreaking. But more and more I'm seeing sites that just don't understand how their visitors will interact them. I've found myself on these sites having no idea where to click, what is supposed to happen, sometimes not even knowing what I'm looking at!

Roger Johansson posted a rant the other day on his site along similar lines.

This excuse is normally used by visually oriented Flash designers or ad agency art directors that create design profiles which simply do not work on the Web. Instead of adjusting their design when they are made aware of the problems, they stubbornly push ahead and make users think and work harder than they should have to in order to use the site. If your design - or you as a designer - cannot handle the fact that the Web is the Web, please do everybody a favour and stick to the safety of your printed brochures.

At this stage of the internet, user patterns have been well-defined. Being creative within those patterns is what makes good design great. There is a certain amount of "creative throttling" that we, as designers, need to understand and use.

My sophomore year in college I took my Graphic Design II class, which was all about typography. There was one exercise where we were given a printout of a typeface and a sample paragraph. We would grab our roll of tracing paper and trace the letters, while kearing the paragraph. We'd then critique each other's work (3 hour studios are LONG) and go back to get another paragraph. This went on for a couple weeks. You either loved the routine or dreaded it. I hated themonotony of this exercise. I loved the working with type. I think it was at this point that I started to fall in love with letter forms.

I've created a few typefaces in the past, one was even shown at the ATypI conference in 2003, but ever since getting my feet totally immersed in web design, my "typophilia" has been put on hold. It's not something I'm proud of, it's just I never had to time actually start caring about type on the web. I would define my "font" attribute in the CSS and that was that.

It's mainly out of this frustration that I've decided to redesign this site with a greater focus on the typographic elements. This is a blog after all, a place to read content. It's not going to be big type (aka Shaun's new redesign) it's going to be more focused type (it'll also include a few new features). Maybe this time I'll get around to that About page as well.

And that's where I've been for the past month.

When I first read about the redesign challenge the BBC was offering I thought, "Ha! Good luck suckers." Trying to organize such a massive amount of content just took too much time for me.

A little time went by...

And a little more...

And I started reconsidering. "How would I do this? ...Naw... It's just too time consuming." A little less time...

"Well, it would be fun to try and solve." Even less time...

"Well, Photoshop's open. I'll just take a screenshot and think about it."

Five minutes later I was trying my hand at the problem.

Approaching the Task

As always, I thought about the current "competitors" this page has for eyeballs across the internet. There's My Yahoo!, personalized Google, netvibes and Protopage. I'm very familiar with each of these site and use them regularly - mainly as RSS readers and content "bulletin boards." It was only natural I take this idea and apply it to the BBC homepage.

I sat down and thought about the current appearance of the BBC homepage. It's compartmentalized. There's the "Explore" box, the "Showcase" box, the "News" box, the "Weather" box and so on. There's something to be said about keeping related content within the bounds of each other. It's a simple solution to fit as much information on a page as possible. I decided then and there that using boxes was the way to go about designing.

Implementing the Design

The first decision was to implement a fluid, flexible, full screen, three column design. Instead of forcing the design to a set width, I felt that by using the full browser size, the overwhelming amount of content a person could have would beminimalized and spread across the full browser window.

The header in the current site is extremely important. It shows the user which area of the site they have landed on and some of their other choices to navigate through the site. It is active across the entire BBC site and provides the "compass." I cleaned the look of the header up by anchoring the search box to the right hand corner of the browser and cleaning up some of the choices. By breaking the BBC site into these major categories, the user will have total access to all the content the BBC has to offer.

Tabs were included to give the user control of homepage sections. Using tabs, content can be divided, categorized and renamed in anyway the user sees fit. They could have a "Movie" page that contains only information about upcoming movies that interest them. Maybe they'll want a "Sports" section, or "Business," etc. The possibilities are endless. With the tabs found globally across the homepage, they act as a table of contents, allowing quick access to each section.

The main content area is defined by different "modulals" that can be created from either user-input RSS feeds or from a predetermined design by the BBC. The Calendar section is an example of this. This can be used to schedule, remind or help the user stay organized. By a simple colored box (also customizable), the user can see what they have on tap for the day, week or month. Each box will then relate to a specific "calendar" using a simple color-coded relationship found in the legend.

"Top news stories" will be changed as well with a comment area for each stories. No longer will the BBC news be a one way tunnel. User interaction will be put to the forefront of the new BBC.

The footer has been long overlooked as a place to throw extraneous information about copyrights and disclaimers. By utilizing this space as site map, it gives the user more options as to where to jump to next within the BBC website when they are finished.

Keeping it Uniquely BBC

With all the personalization happening on the BBC 2.0 version, how does it stay true to the BBC brand and entice users to stay around the website? There are a few new features that I added in, not even knowing if it's possible.

Similar to what ABC and CBS have done in the States, the BBC can offer full episodes of their shows online with only minimal commercial interruptions. Who wouldn't want to watch their favorite episode of "Little Britian" whenever they wanted to? This is found in a module that the user can either use a view station or as a gateway to asubstite housing previous BBC shows.

Podcasting is another technological advancement that the BBC has embraced. Allowing users to access their new podcasts or listen to older episodes will allow the BBC a more personal interaction with the end user. A system would be built where find,subscribing and even creating their own podcasts is a possibility.

Anchored to the right side of the tab bar is a BBC Radio callout. This allows the user full access to the wide variety of BBC radio stations. The radio can be shown and hidden, allowing the user to decide it they want the module visible while listening. Within the module itself, with the click of a logo, theshow's title, host, guest and/or band and song name will show on the screen.

Other moduals could include Flickr, Google Maps or Popular web services that have an customizable API.

That's All Folks

This new buzzword laden "Web 2.0" phase of the internet is, at it's core, about the users and how they interact with content. By allowing as much personalization as possible to its homepage, the BBC will keep it's reputation as a leader in the tech world.

View Entry

A List Apart. Redone.

It's all the rage today in blogsphere. It's pretty, no doubt. What it reminds me of is a cleaner, better designed version of any generic newspaper out there. And by that I don't mean anything negative. ALA is THE place for design resources, just as the Post is THE place for news here in DC.

ALA also started the bloggy, centered, navigation-across-the-top rage when it unveiled version 3.0 years ago. Basically, as Jeffery Zeldman points out in his article:

If the value of a design can be measured by how often it gets swiped, then ALA 3.0 was genius, for it has been copied, with and without attribution, hundreds of times. But of course it was copied all those times, not because it was lovely, but because it was generic: an adequate template for nearly any content-oriented site. Most of all, it was copied because it was easy to copy.

This redesign stops that. It gives ALA an identity as the "periodical" website for designers. We want cutting edge design news we look to ALA.

What I think here is the most impressive aspect of the redesign is the back end conversion to Ruby on Rails. Forward thinking by the boys (and lady) at ALA.

My favorite little quark about the redesign? The color coded archives. It's like navigating a parking garage. You look to the color and know exactly what level you're on. You look at the color scheme and know which issue you are in.

(Coming in a close second is the new "readibility" of the website. It no longer makes the articles seem so long and confined. Point proven by the fact that within 12 hours of this new redesign going live, I had read two full articles word-for-word. On the old site I would have to skim them because I felt that I could never finish them quick enough. Bravo!)

Overall, well done. It gets my approval. But what does that matter?


Copyright © 2005-2007 Addam Wassel. All rights reserved.
XHTML, CSS, RSS feed. Powered by Movable Type. Hosted by (mt) MediaTemple.