Gooseneck Gazette

Landing with Purpose

I just com­pleted a refresh of Teri Wilkin’s land­ing page. OK, let’s be hon­est, that’s a total redesign.

I had put Teri’s orig­i­nal site together based on a Word­Press theme that I cre­ated; but, in ret­ro­spect, I real­ized this wasn’t really the best use of the home­page. I set out to redesign her land­ing page (not the inte­rior pages) to present a cleaner and more hum­ble jumping-off-point.

The pre­vi­ous design

It’s not ter­ri­ble, but your eye doesn’t quite know where to go. The visual hier­ar­chy is left to chance, and to me that’s just not a good design. First thing to address in my mind was the struc­ture and hier­ar­chy. Next, I felt that the links to inte­rior pages weren’t pre­sented with enough empha­sis. The inte­rior pages are where the bulk of the con­tent lies, so why not focus on them. The blog was given a sort-of second-place spot in the hier­ar­chy, despite the fact that it holds the most cur­rent con­tent on the site.

I also felt that the visual iden­tity was a lit­tle too “all-over-the-place” for me. Stan­dard­iz­ing a lay­out that worked off the 960 grid sys­tem seemed like the best fit for the task-at-hand. I wasn’t upset with the color scheme, so I sought to keep that in place. I also felt the typog­ra­phy could use a lit­tle work.

Con­cept

I decided to start off with a sim­ple wire­frame that I worked up to prop­erly address the empha­sis on hier­ar­chy and adher­ing to a grid-based lay­out. Mov­ing the descrip­tion of Teri’s ser­vices front-and-center helps to put empha­sis on this con­tent, whereas it was get­ting lost in the pre­vi­ous design. Another major change was mov­ing the inte­rior page links into a more dom­i­nant posi­tion so that vis­i­tors could find what they want quickly.

Flesh­ing out a Design

The markup (HTML) took me about 2 to 3 hours to put together given the sim­plic­ity of the con­tent. I decided to keep the ran­dom gen­er­a­tion of rec­om­men­da­tions sim­i­lar to the chalk­board in the pre­vi­ous design, while tying it into the new lay­out. CSS didn’t take too long either, but I sup­pose that’s the beauty of design­ing with a grid. Nat­u­rally, some Pho­to­shop­ping took place to pro­duce the back­ground, sep­a­ra­tor and text images, but I was able to sal­vage the use of the icons from the pre­vi­ous design. If you’re won­der­ing about type­faces, I used Droid Serif, Lucida Grande, and Palatino. All in all, I think it turned out pretty well. You be the judge.

Editor’s Note: On Teri’s site, I’m serv­ing IE6 users the Uni­ver­sal Inter­net Explorer 6 CSS by Andy Clarke.

Pushed pixels to screen at 11:03 am. The text above is duly sorted: Web Design. Comment below, if you must.