Looking Back on a Design Evolution

By Eric Richardson
Published: Sunday, August 10, 2008, at 02:27PM

DOWNTOWN LOS ANGELES — Every once in a while I like to give a little glimpse behind the scenes of blogdowntown. Today I happened across a folder of design mockups I had created in the process of putting together the new design we launched on April 1st of this year. This sequence of four images gives a fair representation of how the site’s look developed in the months preceding the launch.

What was highly unusual about this launch, at least for me, was how long it took from design to launch. I’m someone who wants to make something and put it live right away, but the first two mastheads you’ll see below were created in October of 2007, five full months before a new look made it to the site. The two home page layouts were created in November and December.

It was work on the code that slowed things down, with the final push toward a final feature list and implementation kicking off around Christmas.

Within the next two weeks we’ll be pushing out a pair of new features that’ll be the first major additions since the April 1st launch, but I’ll talk more about those later.

blogdowntown

The first mockups for a new blogdowntown design features the standard, horizontal mast. This mockup had an orange and brown color scheme.

blogdowntown

This revised mast featured the imagery and color scheme that eventually made its way onto the site.

blogdowntown

This first mockup of a home page layout used a square mast very close to the one you see today. The grey blocks on the page represented content sections.

blogdowntown

Early designs used a left-hand mast on the home page and moved the mast to the right on story pages. This mockup shows a right-hand mast on the home page, as you see today.

This story belongs to the following topics:

Topic:
Inside blogdowntown

5 stories

New Features: Readers' Photos
August 13, 2008
Looking Back on a Design Evolution
August 10, 2008
Thanks for Talking
June 14, 2008

Comments

David Kennedy writes:

What is driving the design changes?

# on Aug.10.2008 AT 10:00 PM

Eric Richardson writes:

The big picture, or the changes you see here?

In my mind, the big picture was about creating something that was clean, open, and flexible, since I knew that the goal was to pack as much useful information as possible into the final views.

As far as driving the evolution, I sent a lot of IMs that read something like “Mind checking a design out for me?” The little I know about graphic design, I’ve learned by making something and showing it to people better at this sort of thing than I am, and then taking their advice back and making things a little better. A lot of that involves stripping extraneous bits away.

# on Aug.10.2008 AT 11:27 PM

Joey Mariano writes:

I really like seeing the comp where the areas are still grey. There are so many possibilities at that stage.

Websites are always a work in progress it seems. I have been constantly updating my website. I am satisfied for while until I see another website that I want to get ideas from.

I noticed that blogdowntown.com is actually a 4 column, 1 big and 3 small. The front page looks really good. I did feel a bit overwhelmed with text at first, but I guess it’s because I’m used to technology blogs like Engadget and Lifehacker. I’ve gotten used to the traditional 3 column.

I think that familiarity is helpful. Although there is no set standard for design, there are some general rules and principles. One book that I really enjoyed reading was “Don’t Make Me Think” by Steve Krug.

Designing anything is tough but I think websites are especially challenging. Not only does it have to be visually appealing, it also has to be functional. As you mentioned, the coding of a website is very time consuming. It’s not as easy as it seems. I originally thought that I would make a composition and send it to the web developer, my girlfriend, and she would just make it into a website. Ha.

When you get a chance, please critique my website and send me an email. I hope it “doesn’t make you think” too much.

E-Geniuses Computer Repair Los Angeles: www.E-Geniuses.com

# on Aug.28.2008 AT 10:40 PM

Eric Richardson writes:

Joey: blogdowntown is actually 11 columns (72px columns with 12px paddings). The main content area is six columns, and the sidebar is five. You can see how that breaks out if you pay attention to where images line up, etc.

# on Aug.28.2008 AT 11:45 PM