The process of building my blog - part 1: Design
Posted by Min Tran on 21 Apr 2008. 176 comments
“Do you have a blog?”
Yes, here you are!
But I was obsessed with this question for a while. I got it started in early 2007, around 5-6 different concepts were made, with over 20 variations, and this project seemed never-ending. “Working on our own project” - it sounds pleasant and self-decisive for a designer, right? But it’s a nightmare, when it ends up in a situation wherein it’s me to be my own client, my most finicky client, my worse client. Until last week, I eventually found myself some free time and felt that there’s no excuse to delay this project. “The show must go on!”. I made my mind to bring my blog to life, this time!
Hold on for a second! I know it’d be too lengthy to show you how my blog is done, or call a design process. I’m, however, being extremely excited with its launch, and it makes me feel eager to take you in there behind the curtain, to see what I’ve done.
Inspiration
I opened a blank Photoshop canvas and asked myself “How’s the design gonna be?”, and I got stuck there, couldn’t find the answer. In fact, I didn’t have any demands or ideas about what form my blog would take. All I wanted was to make it look nice, in any style that would work and reflect my personality. And for my creative thinking, I just let it flee and flow. The design would be taken shape in such a way that the site should be designed.
Keeping creativity flowing is what any designer gets hitched. People often say: “Being creative!”. That sounds simple, but it’s rather hard to do, huh? Your creativity conceals somewhere around here but how to get it aroused? I created an “inspirational board” and added whatever I was happening to think of : websites, photos, old books, and sundries. I even set it as my desktop wallpaper. Everytime I looked at it, it could brainwave a little bit on how my work would be going on .
First try-out
First concept began taken shape at random while I was browsing a Flickr site, which might be a good source of inspiration for me. I saw there several interesting photos of a small room with a windowpane and a wall which some stuffs were hung upon. These photos reminded me of the place I lived when I was 7 or 8.
Draft 1
I showed this off and asked these same questions: “Do you like this?” or “How does this compare to that?”, and I received many positive feedbacks. Most everyone seemed to feel pleased with it, except me! While the color tone worked quite good, the design wasn’t well laid-out. The more content I added, the more clustered the layout was. It’s hard for me to reject what’s close to my heart. But you gotta go, babe!
In a regretful state of mind, I started on making another fresh - a totally new concept.
Design is problem solving
The best way to envision this new concept is putting everything in a wireframe. By doing that, I could control every element and develop my ideas based on design features and content. In Illustrator, I drew some quick grid-based wireframes with a few gray boxes and place-holding elements.
Wireframes
The first wireframe seemed OK but since I had yet to have much content, the second would work fine at that time. This wireframe was a good launch for me to create my second mockup.
Draft 2
“Well done!”, my friends uttered. And I pretty liked it, too. Anyway, the grunge/collage style happened to be over-used. I wanted mine to be more unique and friendly. Looking back at it, those grunge elements stressed out the layout so much that my readers could be sidetracked from the content, meanwhile my goal was to create a design whose any element could embrace the content. After a couple of days, I felt this kind of design wasn’t what I was looking for. And baby, you got rejected!
Yet, why not try some new color combinations for the next comps? I came up with this idea, and here’s another design with more elegant and warm feelings.
Draft 3
That looked better overall. It’s about 50% for me to like it. Looking again and again at it for a few times, I realized the navigation wasn’t eye-catching enough to take a heed. The style and color scheme were dissolving in what I needed. Again, one more design had to be rejected.
Anyhow this time with this design, I could make an orientated improvement for the next comps. I knew that the final result was just around here.
Draft 4
This blueprint obviously was one step forward from the previous one. The navigation was enhanced to give a noticeable look. But still, the top bar caused the layout look clustered, and the elements on the mashead weren’t well matched. I came back to the mocking board and created an extra mockup. The layout this time was polished with some elegant 17th-century elements, the refined typography and the improved color - all bringing about a warm mood to the website.
Done, at last!
Final design
At the moment I was nearly stressed out to my very last nerve, whilst some other projects been waiting in line to deal with, this revision came up like a miracle. And this is, as you see, the final blueprint. It looks like all tosses and turns have been solved after all. What a great pleasure after it took a long way to go, in middle of the road, to the one that is truly mine!
Navigation treatments
The most interesting part of working on personal projects is putting new styles into test and trying to apply new ideas that we usually don’t take a challenge to deal with clients’ projects. The navigation of my blog looks very simple with just 3 or 4 items, but it plays a very important part in the entire design. It took a lot of time to turn around with it. The more attention I paid, the better the navigation looked.
The first one is fairly unappealing because it seems not to beg viewers to click on. The solution to this is adding some design elements and improving its typography to make it more prominent. The second and the third look much better in term of design, but I want them more distinctive and outstanding, and stay in a consistent way.
I personally, instead of creating extra alternatives, then choosing one that suits me, I still try with an old one by asking for opinions, doing some researches, and improving its weakness until a desired result is gained. The final treatment (the fourth) is a huge improvement from the third. The general style stays the same, but the way it acts is very different.
Design a sexy comment form
I love getting comments. For this wishful thinking, my comment form should make my readers feel like leaving a word. So I did it with a very general form.
It looks nice and it works. There’s nothing wrong with this form, but it’s not what I was thinking it had to be. I tried with a part of the scroll taken from the navigation, putting it into the form to see how it’d be, and I didn’t have to go further. Design sometimes is very simple, right?
The form now looks stronger. Everything aligns well. Inputs display very clearly. All are consistent.
Conclusion
“We enjoy the process far more than the proceeds”
Warren Buffett once said. As working on your own projects, everything naturally becomes more interesting. It may be a headache for me because I myself have to treat and judge my work on grounds of a client. Nevertheless, it’s always a great chance for me to let loose my creativity, try new techniques, apply new ideas and make beautiful mistakes.