the nitty-gritty of web design

First impressions matter. Especially when people are glancing at your blog and deciding in two seconds whether they’re interested or not.

After setting up my blog, the first thing I did was test the design themes. Because I’m using wordpress.com and not wordpress.org. Because I know nothing about html, I knew creating my own blog from scratch would mean spending hours (days? weeks?) trying to tweak the tiniest things. No thank you!

Browsing WordPress’ ready-made themes, I realised I had a pretty clear idea of what I wanted: something clean, simple, and elegant. I was hoping to appeal to food blog fans interested in something a little bit different. But because I was aiming more for food blog than gross-out blog (which many weird food blogs are), my target visitor was sort of different to that of most other weird food blogs. Looking at blogs like Weird Meat and Deep End Dining, I like that they have simple, clear designs, but they’re not really the look I have in mind.

I know that “clean” and “simple” are ridiculously vague descriptions of the aesthetic I like. I mean, Weird Eats has a relatively “simple” design but it’s so not what I aiming for. This blog’s subject matter is actually really similar to mine, but the site is just instantly unappealing. The red wave design of the header feels unsuited to a food blog. All the text is way too tiny. And the page is completely dominated by the white background.

The clean sort of design I had in mind was based on some of my favourite food blogs, like Smitten Kitchen. These blogs generally have plain white backgrounds, clear black font, a main column for posts, and a smaller sidebar. I admit, part of the reason I wanted “clean” was to appeal to my OCD tendencies, but also because it helps new visitors to easily navigate the site. And it makes it easier for them to focus on and read the actual content of the blog posts. Also, I think the neutral background and uncluttered design typical of good food blogs really suits the subject matter. Like a simple dining table, it falls back and allows focus to be on the food (photos in this case).

Most well-designed blogs also have clearly divided sections, usually columns. You can see it’s the design of magazines translated onto the web, especially the bare simplicity of gourmet food magazines and photography. In his book The Laws of Cool, Professor Alan Liu describes the influence of modernist graphic design on the aesthetic of Web (Liu, p. 207). By trying to bring the familiar formats of pre-existing media to the Web, the Web’s creators were also transferred the characteristics of modernist design conventional to print media (Liu, p. 211).

However, Liu states that modernist design and the Web are fundamentally incompatible because modernist design is based on a grid structure. And the Web’s “lack of fixed spatial dimensions defaces the concept of design” (Liu, p. 225). Apparently, the concept of “antidesign” is more true to the medium (Liu, p. 222). Antidesign is against the “asymmetry, unity, and clarity” of modernism (Liu, p. 219). See, Liu discusses these difference approaches in his quest to understand what makes “cool” design. The overall message seems to be that “cool” is modernist design but also “fundamentally antidesign” (Liu, p. 216). Very helpful.

When I think of antidesign, I think of the wacky amateur aesthetics of the 90’s described by Olia Lialina. The amateur design of that period is now considered the pinnacle of bad taste. But MySpace is still filled with examples of garish amateur design, like this MySpace page. This isn’t an extreme example, but the busy background, glitter graphics and glitter butterflies mean it definitely qualifies. According to Danah Boyd, MySpace and Facebook represent a class division- a fascinating observation that seems to be pretty true (in Lialina). Boyd highlights that aesthetics are more than visual appeal, they’re “culturally narrated and replicated” (in Lialina).

The social significance of design aside, I feel like amateur design is fine is what you want is a crazy visual buffet, but it just wouldn’t serve my purpose. Like the modernists, I want “clean, efficient visual communication for an age drowning in media” (Liu, p. 199). I want visitor’s focusing on my written content and photos. The last thing I want is decorative clutter, especially when the Web is so cluttered with information. I want my blog to be easy to read and scan, unlike the crazy site for Ling’s Cars.

So, the WordPress themes I considered for my blog had white backgrounds, nice black font, and customisable headers. I wanted to customise the photo in the header so it would immediately point to my blog’s subject and style. The first couple themes I tried had headers and subheadings that were too small and not bold enough. The theme I finally chose was PressRow. The header is large and bold, and the font is reminiscent of print media but not too formal. I also like that the post headers are quite large, and clearly demarcate different sections of the blog.

I might not have the perfect theme for my blog niche, but it works pretty well. Except I only realised recently that the text of my posts are in a (mild?) serif font, which some view as unsuitable for reading on screens. But I did a bit of research and found out that san-serif fonts aren’t necessarily more readable (Poole). Even better, I noticed that one of the top food blogs, La Tartine Gourmande, uses the same font as me. So it can’t be that bad!

P.S. Check out this little cartoon about the stereotypical professional/amateur divide: ‘How a Web Design Goes Straight to Hell’

Sources:

Lialina, Olia (2007) ‘Vernacular Web 2’, http://www.contemporary-home-computing.org/vernacular-web-2/.

Liu, Alan. (2004) ‘Information is Style’ in Laws of Cool: Knowledge Work and the Culture of Information. Chicago: University of Chicago Press.

Poole, Alex (2005) ‘Literature Review- Which Are More Legible: Serif or San Serif Typefaces?’, Alex Pool- Interaction design and research, http://www.alexpoole.info/academic/literaturereview.html.

Advertisements

Leave a comment

Filed under creating the blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s