If Content is King, Design is its Queen
In the first part of this series, I introduced to you:
- the importance of the blogging formula:
CONTENT + DESIGN = BLOG STRUCTURE
- the relation of content to the overall structure of a blog: what content is, how I find and create it, how I organize myself to produce quality and consistent blog posts
Now if content is king, design is its queen. As queen, design has a complementary yet equally important role.
Without the two working together harmoniously, the blog structure will fall apart. The result: BLOG FAIL.
In this post, we’ll discuss the second part of a blog’s structure: design.
Like the first part of the series, while this is a case study of a Christian-themed blog, the concepts I share will be very applicable to blogs of any theme and non-WordPress blogs.
How Do I Define “Design”?
To me, design provides:
- Form. The visual experience for the user.
- Function. The tactical (sometimes also visual and audio) experience for the user.
As bloggers, the first real thing we think about is the theme of the blog.
I’m not going to lie to you: WordPress should open up its theme library a bit more.
But for the price I pay running my blog on WordPress.com’s servers–I don’t have to worry about getting a domain, finding a server that will tend to my needs 24/7, designing my ultimate theme or finding a free one online to use and working with CSS, HTML and all the other relevant letter combinations–I’ll manage nicely. 
Form of … Water! Shape of … a Deadly Unstoppable Phalrexian Tranglomite!
I described form as the visual experience for the user. By looking at the design of a blog, you are given visual clues that tell you:
- The personality of the creator: Is he/she wild and crazy? Is he/she sophisticated? Is he/she shy or bold?
- Who the blog is geared towards: Is it 20-somethings, 50-somethings? Men? Women?
Ultimately I chose Connections by Patricia Müller for my theme. It is described as “a super classy two-column theme with widgets and a customizable header”. Her design looks very clean and orderly, as I wanted to convey a sense of sophistication and professionalism. (Gee, I think I’ve been watching too many of those home design TV shows at my parents’ house!)
Her design also seems similar to magazine layout designs of O, The Oprah Magazine or Martha Stewart Living. I like the clean web 2.0-like style they both share. It’s a style I’ve used in both the blog and newsletter I currently do for my home church. (If you ask nicely, I might give you the link 
)
In choosing a blog design, ask yourself first: what is my style?
The best way I can describe my own style is to say “Banana Republic Men’s Style“. I’m not a clothes horse, by any means–I hate shopping. But if my wife was to buy me a new shirt for a birthday gift, she already has “Banana Republic Men’s Style” implanted in her brain.
The point here is that your blog’s design–its usage of colors and shapes–is representative of who you are and how you want to convey yourself to others.
I am not a hot pink-on-black type of guy. And so my blog is, obviously, never going to have that color combination ever.
When designing your blog, think about when you were going out on your first date with someone. You are only given a few seconds upon meeting someone to make a good impression. So it is with blog design: it could make-or-break your any future relationship with that user.
While I really don’t want to admit it, if we look at design alone, people will appreciate your site’s design only if your style is aligned with their own tastes. If your style appeals to them, they’ll stick around. It’s a reality.
Taking that into consideration, I tried to choose themes that would appeal to the most number of people possible without alienate others.
However if you are a rocker at heart (read: air guitarist) and you are only interested in meeting fellow rockers, then stick with your style and don’t worry about appealing to everyone. That’s not who you are, and that’s not what your style is about. And remember to go out there, put on a killer rock show and melt some faces!
What is Your Major Malfunction?!
Another important factor of design is in the experience you are creating for your readers.
My design intention was to create a compelling multimedia experience for my readers (see the previous post for sites I’m using). But I decided to use it judiciously: if the information I’m sharing can be made more compelling through multimedia, I would go that route. Multimedia is never used for the sake of using the technology.
For my purposes, I would always choose writing a post before I go the multimedia route. While using multimedia is quicker to post, written content is the primary way search engines like Google are able to catalog your posts and display them when people do searches for words like “Father Mychal“.
My Advice on the Proper Usage of WordPress Widgets
The other thing WordPress.com bloggers have access to are widgets. On my homepage, notice that I am using three types of widgets: the text widget, the top posts widget and the recent posts widget.
(At this point, go through the site and play around with how the widgets, tags and categories work. Play with the third-party embedded multimedia pieces.)
The key to designing with widgets is to have an uncluttered presentation. Cluttered sidebars would be too overwhelming to the eye and create too many distractions for the user.
For example, while I like the idea of tags, the tag cloud just didn’t fit my blog’s visual style. It just didn’t have the orderliness of the top and recent posts widgets.
On the other hand, I love the text widget. It allows me to put my own HTML on the site. In my case, I’m using a link from FeedBurner which allows users to subscribe themselves to get future e-mail updates on the site. Click “home” on the top right corner of the page you are on now and test it out! (This is just my non-subtle way of asking you to subscribe to this site: I’d love to have you as a subcriber.)
The order placement of the widgets is also purposeful. People usually view things in a column from left to right, top to bottom. So logically the order I have my widgets suggest which ones I want the user to look at first.
Notice also that the widgets appear “above the fold” or the top part of a website one sees before needing to scroll. Having items appear “below the fold” give most users the suggestion that you consider them less important.
This logic is also why new content on the site will give your blog stats the most views. The only contradiction to this rule is when the site gives subtle clues to the user that you want them to look at older or popular posts you’ve done. Hence, another good reason to use the posts widgets above the fold.
An example of this second rule is my post on the “Just War” doctrine. I posted that several days ago but I’m still getting a ton of views on it. It is currently (as of this writing) below the fold. However the older link is appearing to the right of the newest post on my blog. And using my “Jedi mind trick”, I cause some readers to check out the link. Clever, eh?
My Advice on the Usage of Flickr Photos for Your Blog
Flickr is my favorite place to find photos for my site. I use them for graphics for my individual posts and the current header for my blog. (Originally I used the default header for the theme but after awhile I got a bit sick of looking at a green tunnel all the time I work on my blog.)
One thing you may have noticed is that I like to have a cat photo for in the majority of all my posts. Why you ask?
One, I obviously love cats. Two, I just think its a funny in-joke to see how far I can get away with sticking pictures of cats in all of my posts. But there is an even more important reason.
Posting pictures of cats–or any cute animal or baby–draws one’s attention in a snap! Think of sites like LOL Cats or I Can Has Cheezburger.
My usage of the cat photos are that they are not there arbitrarily. They are meant to create subtext to the posts. They are meant to challenge the reader to find the connection between the photo and the text in a fun way… But mostly to draw attention!
Speaking of Flickr photo usage, there is one thing that I’ve tried to always be cognizant of giving proper attribution to the photos I use. The photos on Flickr are works of art. And as a way to respect the artist, I make it a point to try to have the photo on my blog link back to the original webpage or to the creator’s home page on Flickr.
The other thing I always do when I’m searching cat pics on Flikr is to always check the section Creative Commons found on the bottom of the page and then do a search under the Attribution License heading. According to Flickr, photos found under the Attribution heading gives people like me these rights:
“(Creators) let others copy, distribute, display, and perform your copyrighted work – and derivative works based upon it – but only if (I give the creator credit).”
This agreement allows me to do anything I want to the picture creatively, so long as I always give credit to its creator. Attribution, I think, gives me the most amounts of options with the artist’s work. Plus if I follow the simple rule, there’s no possibility of lawsuit.
Further Resources
Check out these links that have directly and indirectly helped me in designing this blog:
- WebDesignFromScratch.com-Web 2.0 design style guide. A primer on designing clean professional-looking blogs
- Dafont.com. A growing collection of fonts that you can use for your designs
- PhotoshopRoadmap.com. If Scott Kelby and Willy Wonka’s Chocolate Factory had a child, this is what it would be like! This the motherlode of Photoshop tutorials in the world. I love me some Photoshop tuts!
- BlogHerald.com. Remember newsletters made of paper? If your church is still using them to communicate to members and the community, this is the 21st century! Within the series, you learn step-by-step as to how to translate a newsletter into a blog or website.
Future Building a Better Christian Blog Postings
This basically covers my thought process in the areas of this blog’s content and design.
As this is a case study, I do plan future posts on topics such as how I go about gaining readership. But for something like that, it’s best for me to do my experimentation and tweaking for at least a half year or longer.
Until then I hope you’ve learned something. And if you have further advice to share with my readers, please feel free to send me a comment. I’ll be sure to give you the credit and a link back to your site. Or if you have a question or idea that you want exploring in this column, please don’t hesitate to write!
