As I mature as a designer I’m seeing more and more the great importance of doing some research before jumping into a design. A classic example of this is our very own blog (yes, the one you’re reading right now!).
The planning that went into creating this blog was probably a lot more than one would expect. Xander and I sat down one fateful sunny afternoon (we won’t discuss how cold it was outside) and discussed what we wanted to accomplish with the blog, who our target was, how we would reach them and still push the envelope for inspirational creativity.
We boiled it down to two options: we could focus on just utilizing our blog to gather links and boost internet presence, or we could create a design that would mix the blogging world with traditional newspapers. The latter built a better argument. A large number of our clients (consequently also our target market) aren’t you’re typical “Blog Readers”, so our angle would be to try and bridge the gap between something they were comfortable with: reading a morning paper over some hot java, and something we were comfortable with: pining over blog posts looking for the latest tips and tricks.
With this decision we had a few obstacles to tackle. How could we achieve this ‘morning newspaper’ feel on a platform entirely based off of digital technology? Our first step was to take a realistic approach in style. Although this would kill a little bit of load time because of how image heavy it would need to be, we felt it would be more than worth it to achieve a “real-life” look and feel. This part was easy: I just gathered a few photos that I could manipulate into a flexible vertical layout; complete with wooden kitchen tabletop and steaming hot coffee. Nothing a little Photoshop couldn’t fix.
Now it came to the content, and this is where I froze. I’m not a huge newspaper reader, but in terms of design I couldn’t wait to tackle it. Newspapers are famous for incredible grid-structures and nicely formatted text. This I could handle, but a grid and justified text hardly makes something look like a “fresh-off-the-press” paper. Here’s where my research came in.
First step I took was to head right to the break room, where our wonderful office keeps its stock of USA Today, the Carlisle Sentinel, along with countless magazines such as Wired. I began to study trends in typography, colors used when and where, as well as probably the most important piece: the header. I feel like the top 4 inches of a newspaper really sets the mood for the entire issue. We were going to be a technology paper; it needed to be modern and techy looking, yet not so flashy that a traditional press wouldn’t be able to handle it.
Now came the fine details. I dove into the internet searching for common typefaces used in papers, what fonts popular papers used for their headlines, realistic colors used in headers, and of course, what all the big papers were doing on their site. I found some great articles stating that Franklin Gothic is widely used in technological print pieces and bam, I had my answer. I picked this thick sans-serif font to bring out the boldness and modern feel of our company, but I didn’t want all of our article headlines screaming at people so it was time to find a nice slab-serif to compliment our bold heading. I settled with Memphis.
All of us here at WebpageFX feel like this blog fully captured our goals, and with some added tweaks we created something that went above and beyond its traditional functionality. Little details like color-coated categories make articles easy to identify, kind of like the sectioning of a newspaper. ‘Strong’ tags (makes web text typically look bolded) we styled to now look highlighted, like something someone found particularly profound in an article. Last but not least, who could forget the coffee rings on each of our articles, giving the appearance that someone was so engrossed by the article that they had to put their fine cup of bean down.
What do you think, did we do a good job? Is the research evident? If we get enough responses, we might just have to rename our comments section ‘Letters to the Editor’.
Tags: blog design, blogging, design, Web Design