Inspiration Bit Redesign

I bet many of you are tired of hearing my promises of the upcoming new design for Inspiration Bit and rather see some action. So here it comes. Following the steps of Lauren from Creative Curio, I too will be sharing with you my design process every week for several good reasons:

  1. it will add more urgency to the project – I’m not the first designer to admit that we tend to neglect our personal projects
  2. your feedback will help me to finalize the design – I too suffer from the “Perfectionism” syndrome when it comes to the re-design of my site
  3. hopefully others will too find this design series helpful when going for their sites redesign.
  4. I love following the creative process of other designers, so now it’s my turn to satisfy their curiosity.

Designer’s toolbox

notebook Every designer has a special way of drawing the initial sketches. Recently I discovered these great small notebooks from myndology. I found them to be the right size to carry in my purse, to fit a web page layout and logo experiments. It’s also very convenient for quick sketches or post ideas on the road, they come with a user-friendly design – you can snap out the pages, re-arrange them or add more blank pages.

Ideas Pool

Of course, the important goal of the site’s makeover is to make it more user friendly, and if it will also make the blog visually more attractive then that’s definitely a big bonus. That’s why in the last few months I’ve been design-hunting for creative ideas from other blogs, magazines, books. You know how it is: sometimes you see certain things in a new light when you start paying attention to them. With our recent move to a new house I dug out my collection of house&home design magazines to get some ideas on how to decorate a kid’s room, add some flare with the right curtains, or hang photos and paintings with a style.

So with the ongoing process of my own site’s re-design I was scrupulously noting down the important usability issues to keep in mind, brushing up on my knowledge of colour combinations. I browsed hundreds of blogs and decided to go with the unconventional layout for my new blog and feature only the latest article while promoting the previous posts with quick links. Several outstanding blog footer designs also convinced me that my site’s new design will feature a good looking and handy footer.

Site Mockups

From the very beginning I decided to come up with a certain theme for the new design, and the very first thought that came to my mind was the hand drawn image of my baby daughter sitting on the beach, building sand castles, with the sunset and the sun’s reflection in the ocean behind her.
mockup ideas 1 -  2
This theme encapsulated several sources of inspiration: my daughter, ocean, sunset. I also wanted to have a design that not only inspires but also relaxes and motivates people to appreciate and see the beauty around us.

I intentionally decided to make the footer of the site visually richer than the header to attract readers and lure them to scroll down to the bottom of the site and check additional information about the blog’s content.

mockup ideas 3 - 4

One factor of the layout that I didn’t have any doubts about was keeping the two column structure instead of going with the three column design that became an overwhelming choice of many designers and bloggers. I’m also quite fond of my current theme’s unique element of an attractive image going all the way down from the header and separating the two columns. That’s when I thought of placing the sun image in the header above the border between the two columns and having its reflection flow down to the footer and separate the main content area from the sidebar.

My another idea for the site’s theme was to have black&white illustration of a giant tree, with its trunk going in-between the content and the sidebar, the beautiful branches spreading all over the header, and the graceful roots decorating the footer.

Which theme do you like better – a hand-drawn watercolour image of the sunset and a playing child on the beach, or a black&white ink drawing of a tree?

page ideas

I will still be playing with the structure of the content area of the blog. I’d like the date and the post title to stand out, and I’ll be using a drop cap to start the first word of the post.

Date ideas Here are several experiments with the date styling, which one do you like more? I got most of these ideas from my last year’s article on date styling. I’ve also re-designed the logo for Inspiration Bit and will be showcasing my logo design process for you later this week. I haven’t quite decided on the typeface choice for the blog’s name, so I’ll prepare several versions and will be seeking your advise and suggestions on that.

To see the bigger versions of my mockups, click on mockups v.1 to v.3 and mockup v. 4 with the featured content section.

So, what do you think? I’d love to hear your thoughts, critique, comments. After all, you’ll be the one looking at the newly designed site for at least another year, so hopefully together we will be able to get it right.

To stay in touch with my blog’s design process, be sure you’re subscribed to the feed or get updates by email.

Recent Bits
Related Bits
Blog Redesign: New Logo
8 Strenuous Steps To Get The Ideal Name
Graphic Designer’s Snapshots of Inspiration
Learning from a smart fox
4th Contest Winners
Two More Contest Winners
Second Contest with Inspiration Bit
5 Bits About Design And Me
Comment Bits

10 Insightful Bits in response to “Blog Redesign: First Steps – Inspiration And Ideas”

  1. Hi Vivian,
    Thanks for writing about the myndology notebook. I have the same one in pink and use it to remember passwords.
    -Duc

  2. placing the sun image in the header above the border between the two columns and having its reflection flow down to the footer and separate the main content area from the sidebar

    That sounds nifty! I really like that detail about your site; the image dividing the content from the sidebar. I hope you keep it.

    hand-drawn watercolour image of the sunset and a playing child on the beach, or a black&white ink drawing of a tree?

    Hmm… I don’t know! They both sound really interesting. The sunset sounds very pretty, but the b&w would be sophisticated and artsy I think.

    For the dates, the one that appeals to me the most is the fourth column from the left, three rows down–the one with the year on its side. Would it be possible to do that with CSS, though? I like it because I’ve not seen it before, but maybe that’s because it’s not easy to do! This is a really cool calendar by Ellen Lupton’s typography class last year :D It’s a hefty sized download (50 MB!!), but so interesting!

    I’m looking forward to seeing your logo design and process! This is fun :) I’m glad you’re documenting this for us!

  3. I’m looking forward to seeing this project unfold, Vivien. I’d probably choose the tree over the sunset myself as trees seem a little more personally meaningful to me, but both choices sound like they could be pretty neat.

    Only thing is that I wish those little sketches you posted were a little larger as I love seeing the progression of other peoples’ designs.

  4. My current vote is for the watercolour image because the tree design looks like it would take over the top of the page. I like to get to the content as fast as possible.

  5. I love the tree idea! Thanks for sharing your process with us – can’t wait to see the final design!

  6. thanks everyone for your feedback. Though everybody’s preference is different so looks like I’ll have to prepare the design mockups for both versions and then you can cast your votes. I’ll draw the designs on paper using ink pens before scanning it to Illustrator and tracing them there, and show you you those hand drawings first.

    Duc Ly, thanks for dropping by. You’ve really got some neat notebooks there.

    Lauren, thanks so much for the Calendar link – it’s amazing. Hmm… we do often think the same, you know. I too liked that particular Date formatting. CSS3 comes with new attributes that allow vertical text, but unfortunately they’re not supported by FF, though looks like they work in IE – http://fantasai.inkedblade.net.....ical-text/
    A workaround would be to use an image instead of the text, but then if a user increases the font size in the browser, the year size will stay the same, while the month and date would increase. I guess, I’ll see how it would look like when I get to the coding part.

    Chris, thanks for the suggestion – I just uploaded the bigger versions of my mockups and added links to them in the post, so you could take a better look at them.

    Peter, if I go with the Tree design I’ll try to keep the header as small as possible, I don’t want it to overwhelm the user and take up the entire over the fold viewable area of the browser window.

    Randa, you’re welcome. Thanks for taking part in my re-design process :-)

  7. I have the feeling your new layout is going to look great! I like the idea of the watercolour drawing. I suppose that also the tree image would be very catchy, so I’m sure whatever you choose, it will be beautiful.
    Regarding the dates, I’ve been looking through my current theme’s files and I noticed that the designer actually draw an image for every date (and he left out the year). I think he couldn’t solve this problem :)

  8. Thanks for your confidence in my design skills, Simonne :-) I too hope I’ll be able to design a blog I’ll be happy with.
    Once I get into coding part, I’ll be documenting it here as well, including all the CSS and PHP coding in WordPress.

Pingbacks and Trackbacks

  1. Blog Redesign: New Logo » Inspiration Bit

    [...] two weeks ago I’ve shared with you my sketches and ideas for Inspiration Bit’s new design. Simultaneously I was playing with the new logo variations for my [...]

  2. Meticulous Design: Dramatic Headlines » Inspiration Bit

    [...] been awhile since I shared with you my ideas for the re-design of Inspiration Bit. Unfortunately the makeover had to be pushed on a back burner due to many other obligations and [...]

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