A few months ago Jacob Cass has announced a $5000 Graphic Design Articles Writing Project and Inspiration Bit was one of the project’s sponsors. Meryl from Meryl.net has won my prize—logo design, blog consultation and critique. As it turned out later, I too won one of the prizes offered by Meryl: a gold subscription to GetAbstract.com.

Since Meryl already has a logo designed for her site, she asked me to help with her other blog: Bionic Ear. Without providing much direction she asked me to see what can be done with the look of that site.

Bionic Ear: Before

bionic ear before
click to see the larger image

The blog’s original design was based on a very generic template with a striped (one of the web design clichés of 2006) light grey background image at the top. The colour scheme was very washed out, the green colour for links and blue for the dates and sidebar headings didn’t quite go together well. And there was just too much of Verdana, giving very little distinction between the main content and the sidebar links.

Bionic Ear is built with Movable Type. I’ve never worked with Movable Type before, and after getting the login details, I discovered that I cannot edit CSS files on fly. Thus I was left to play with the design using my favourite Firebug.

Bionic Ear: Version One

bionic ear version 1
click to see the larger image

At first I decided to experiment with Typography. I changed the tagline from Century Gothic to italic Georgia; switched the default from Verdana to Georgia, and transformed the titles with small-caps Georgia. However, Meryl preferred to stay with Verdana for the body text, and felt that small-caps won’t work with her often long titles.

Bionic Ear: Version Two

bionic ear version 1
click to see the larger image

Taking Meryl’s comments into consideration, I sticked to Verdana as the main text on the site, displaying the post titles in Georgia, used all-caps Verdana for the dates and sidebar titles. I also customized the colours and background images. At first I decided to go with patterned backgrounds. I downloaded the original images and used them as guides for the shape and size of the new ones. Then I grabbed a couple of background tiles from Squidfingers and changed the colour scheme to greens and lights browns.

In order to test how my new background images look on the actual site, I’ve uploaded them to my server and used an absolute URI when linking to them in the CSS via Firebug.

bionic ear version 1
click to see the larger image

This time Meryl liked the direction I was heading to, but preferred a less traditional look, confessing that she’s “more of a modern / contemporary design lover”.

Bionic Ear: Version Three — Final

bionic ear version 1
click to see the larger image

In the third version I’ve kept the typography, but changed the colour scheme to blues and greens and got rid of the patterned backgrounds, sticking to solid colours. Meryl liked this version. So I updated the original CSS file with my changes, archived it with all the image files into one folder and sent the ZIP file to Meryl, who then uploaded the files to her server.

So here you go, a case study of what can be done with a few changes in CSS, by experimenting with font selections, type treatment and colours. What do you think? Do you like Bionic Ear’s makeover? What would you change in its design?

Recent Bits
Related Bits
No related posts
Comment Bits

13 Insightful Bits in response to “Bionic Ear: Before and After”

  1. It’s certainly a lot easier on the eye now than it was before. I’m unsure about the dark green header background though, it looks just a little too stark IMO. Glad Meryl likes it though, that’s the main thing :)

  2. Hi Vivien,

    Thanks for showing us your progress. My favourite of the three versions is V2, with the patterned background. I prefer the lightness over that of V3, and also like how you introduced brown instead of the original blue. The brown and green work well together. Very natural (although that might not be the right route where ‘bionics’ are concerned).

    A couple of things I’d change would be the logo (it reads ‘Bionic ar Blog’ to me) and the alignment of the tagline (the apologies part) which seems to float a little. If it was left aligned with the content, I think it’d be an improvement.

    Thanks again, Vivien. Enjoy the weekend!

  3. David, thanks for your feedback. The pattern wasn’t my style — it feels traditional and I’m into contemporary design (in my home, too).

    I will have to think about how to fix the logo. You’re the first to make the comment. Thanks again.

  4. I think that overall the best version is number 3, though I do really like the use of the background pattern in the green bands of colour from version 2, and I wonder if this could be integrated in version 3 as a subtle addition without diminishing the contemporary style that Meryl likes. Also, I agree with David about the logo.

    Vivien, thanks so much for the mention about Squidfingers’ patterns – I wasn’t aware of this site before. Fantastic!

  5. Thanks for your feedback, everyone.

    John, I thought to make the background in the header darker, so that the white content area stand out better.

    David, I do like the logo, but it did take me a couple seconds to decode it, seeing the text in the page title helped. As for alignment of the tagline: I think as it is now, it’s offsetting the alignment of the logo above, so right now the at the opposite ends. If aligned with the content, it risks to blend with the content rather than stand out as a tagline. Don’t you think so?

    Meryl, thanks for gathering the feedback from your readers as well. Of course, the site is for them, so whatever works for you and for your readers is the way to go.

    Tracey, glad you’ve discovered Squidfingers here. I specifically included it here, thinking that there might be readers who haven’t seen that site yet ;)

  6. You make a good point about the tagline being associated with the content. Perhaps if it was left aligned, with the ‘search’ or ‘B’ of Bionic, it’d look more in place, but I’m nit-picking.

  7. I think it still misses some interesting visual effect.
    On your site you have the green with the plant that gives the site interesting freshness. Some effect like this is still missing on the bionic blog.
    And i agree with David that the logo makes it very hard (or impossible) to get the real name of the blog.

  8. David, you’re “nit-picking” with that tagline :)

    Warenwirtschaft, of course some interesting visuals could be added to this site. But that all requires time and back-and-forth client communication to come up with the right effect and image. Certainly, in future Meryl could hire a designer to re-design/update the site if she wishes so.

  9. I know. Sorry Vivien. ;)

  10. You like your green colours don’t you? Nice and simple improvement on the ear blog.

  11. Thanks, seo blog.
    I do like green, but in this case the blog already had the logo in green, hence my decision to stick to it in the colour scheme of the site as well.

  12. Hi Vivien,
    Thanks once again for the prize sponsor… better late than never… just saw this post in Twitter archives of all places… someone promoted it on there. Anyway, hope all is well!

  13. Hi Jacob. No worries. I’ve got the same motto: better late than never ;)

Selected Bits

PopularBits

RecommendedBits

FavouriteBits

PersonalBits

Hi, I'm Vivien. Thanks for visiting my Inspiration Bit. I often find myself scouring the internet looking for either answers to many questions I have or websites that inspire me, sites that I can learn from. On what topics you might ask — any topics that interest me, anything from web design to typography and art, from blogging to entrepreneurship, from programming to open source.
read more…
When I'm not blogging, I design web sites, teach, play with my daughter and try to balance family, work, friends and a somewhat active social life on