A key driver behind the redesign of voiceofsandiego.org is Ashley Pingree Lewis, a freelance graphic designer who donated her services through her business Dog Beach Design.You’ve seen Ashley’s work before because she’s a regular contributor of graphics and cartoons to the site.
I wanted to find out a little more about the thinking behind her redesign, and she agreed to answer some questions in email. I’ve lightly edited her answers.
How would you describe your role in the creation of the new site design?
Scott (Lewis) and Andy (Donohue) already had a pretty clear vision for the basic home page layout and had ideas about what particular elements were essential and where certain things needed to be. I digested all their ideas and created a basic sketch of that framework on paper. With that as my guide, they set me loose to design a completely new home page. I was free aesthetically to devise the styling, the look and the feel of the new site. I pushed the pixels around in Photoshop, and came up with a mockup to present to the staff. With every revision that I presented we thought of new things we wanted to do. After seven or eight revisions I had the finished mockup ready to give to TownNews so they could actually build the thing.
I also did mockups for some of the subordinate site pages. Kelly (Bennett) was instrumental in coming up with the design for the Behind the Scene blog, which has been carried over to all the other blogs. She had great ideas for all the features she wanted to see on her page, and a keen eye for styling. Thanks to her input, I think that page is now the best looking one on the site.
What were your goals in designing the new site? Was there a user behavior (or several) that you wanted to enhance, add, or reduce?
From the beginning, the most important goal was to create a stable structure. The three-column layout was essential, with clearly defined blocks for different sections. We wanted to eliminate the floaty feeling that used to permeate the site. It was crucial to come up with an organized layout that presented content in a familiar way to ensure the user can always find the section/feature they’re looking for every time they come back. Also, we wanted to maximize the amount of new content the user is presented with when they land on the home page. Every time you come back you should see something new, and it will take a lot longer for things to cycle off the home page which means you’ll be more likely to read something that you might have missed in the past.
Stylistically, my goal was to implement the badly needed structural changes while still preserving a familiar look and feel — keeping the same text styling, for example, so that people would still recognize it as voiceofsandiego.org and not some completely different site. As with any web design, it was also important to pack as much content as possible above the scroll (or “fold” in newsie terms) and not waste any of that valuable real estate. Scaling down the masthead and navigation helped a lot, and also worked well with the minimalist aesthetic of the VOSD brand.
When you go to an attractive newspaper website, what tends to catch your eye?
I think the best sites have a nice sense of organization and incorporate photos and graphics in the right places so that your eye is deliberately guided around the page. No one has the patience to read every single headline and hyperlink, so those visual cues are necessary to quickly guide users to the most important content.
Is it getting easier to do just about anything a designer wants in HTML and CSS? Are we still having to make drastic compromises between an ideal design and the constrictions and restraints of what is possible in the code?
I think designers will always feel somewhat limited by the code, but so much is already possible; I think a good designer should be able to work within those limitations and still come up with a nice result. The bigger issue for me has always been the multitude of different platforms that your code is expected to render on. Every browser has its quirks, as does every user (like the weirdos who disable JavaScript — seriously, who are these people?). But this design was really pretty straightforward — nothing that would push the limits of HTML/CSS. To be clear, I didn’t write the code for this redesign; that was handled by TownNews. However, I don’t think there was anything terribly tricky in the execution of this design. The site you see today looks pretty darn close to the mockups I created.
What parts of the old site look have you felt it necessary to bring over to the new design?
Definitely the text styling. I’ll be honest, if I were building a news site from scratch I would probably not choose those blue headlines, or even Georgia for the font, but I felt like readers are so used to that text that to change it up would be really disorienting. The voiceofsandiego.org logo couldn’t be the only thing linking the new site to the old one, so the continuity in text styles became very important. The main story in the blue box was a holdover too — one more thing that helps the site to feel familiar to its users.
Anything else you’d like to add?
I’d like to mention that my work on the redesign was on a completely volunteer basis. I didn’t get paid for it. I’m not saying this to get a pat on the back, but more to dismiss any suspicion that I snagged a lucrative web design job by being married to the CEO. (In the world of nonprofit internet journalism there’s no such thing as lucrative.) Having said that, anyone who still wants to give me a pat on the back can go read my cartoons. Drive up those page views, my friends. Help me get that Best of the Week.
Q&A by Grant Barrett, engagement editor for voiceofsandiego.org. Drop me a line at grant@voiceofsandiego.org or call me (619) 550-5666 and follow me on Twitter @grantbarrett. I’m still looking for your recommendations of books covering San Diego’s recent history.