This blog started in September 2009 as a base station for my technical communication-oriented thoughts and experiments. I have made some changes in visual design - admittedly within the range of Google template. I would like to look back on its evolution and see how I can move on, considering the lessons learned.
Initial Design
Theme:
The skin, shown below, was taken almost directly from a Blogger template called Snapshot, created by Dave Shea. The overall tone of the skin looked futuristic (the top banner was filled with a pseudo-landscape of buildings) without being too intrusive (the main content area was almost blank). I wanted to have a serious tone but not too barren, so that template worked well. I also secretly hoped I had avoided the "Standard Blogger" look by picking minor theme.
Visual Design:
The bright green color at the top right provided a visual "hook". The horizontal lines between the title and content for each text block guided the eyes naturally to each visual element, separated them, and created consistency. One unexpected effect was the profile image in the About Me corner. The image was larger than I had expected, therefore could have worked as the visual hook instead of the green patch at the top.
Text:
I chose the two-column layout, main text on the left (so that readers first catch the main text, not the side bar). The text width was chosen to include 60-80 characters per line, the optimum horizontal length considering the eyeball movement. If I wrote this blog in Japanese, I would have chosen to place the sidebar to the left because in Japanese context the action starts from the right and then to the left. This difference in the direction of action (West: left to right, East: right to left to roughly summarize) is a topic that can be studied more deeply.
1st Revision
I decided to have an experiment: what if I do the opposite of what I had always preferred in terms of visual design and stick with it for a while? In the end I stuck with it for too long but I did reconfirm what I disliked about document/blog design.
Theme:
I chose the most commonly used Blogger template, the default design called Minima, created by Douglas Bowman. Although I liked its minimalistic approach with no background color and no "ornament", I always considered it too traditionally looking for my taste.
Visual Design:
No visual design at all - this is largely due to my laziness I must admit. If I wanted to go against my taste, I should have filled the background with colors and added extra symbols and icons all over the place, to make it visually crowded.
Text:
To go against my taste, I stretched the main column to screen width and tucked the original sidebar content to the bottom of the page. Therefore, unless the visitor has no intention other than reading the text content, he might have a hard time figuring out what to do. I also chose a serif font instead of sans serif. The horizontally stretched paragraph would be harder to read and more formal than the initial design.
Conclusion:
After a while, I still disliked the design and had a hard time reading the blog entries myself as well. The design did, however, made the blog look like a formal report. I never thought of making the blog look like a printed report but it worked nicely. Maybe in the future if I need to make a blog printer-friendly (without falling back on providing a PDF version), the one-column design might work fine.
Bonus: I changed the background color to see how hideous it might have looked.
2nd Revision
Taking lessons from the 1st revision, I decided to go back to the previous style - simple, two-column layout. Still I wanted to make an experiment: what if I stripped off all visual design? After all, wasn't simplistic design my preference? I still liked the barrenness in the 1st revision.
Theme:
I chose a theme called Tekka created by Evhead Glish, which offered the least amount of visual elements in all templates. I found it cold and hostile; here I realized I wanted more warmth in the overall tone.
Visual Design:
Almost nothing existed here, only the texts remained. Result: I still liked not having complex image or photo, but it was too stripped. No taste at all does not lead to better design. I clearly needed a visual variety. If that came from the content I would have stuck with this template; unfortunately the entries mainly consist of text paragraphs.
Text:
I changed the layout back to the original two-column structure to provide easy navigation and also to limit the width of the paragraphs in the main area. Going back to the original style worked.
3rd Revision (current)
After going to the extremes, I sorted out what worked and what did not, and picked up a template that works: Rounders by Douglas Bowman.
What works (vs. what does not work):
- Two-column layout (vs. single layout with sidebar items tucked to the bottom)
- No complicated images (vs. photos or images)
- Plain background colors (vs. colored background)
- Clear separation among each visual element (vs. unified content)
- Warm tone (vs. cold and formal tone)
Posts
No comments:
Post a Comment