Friday, March 8, 2013

P.S. Blog

As mentioned before, I've been meaning to do some design process posts and finally I've gotten around to do it! (Lol awkward introduction)

Anyway, my dear friend Polele asked me to redesign her blog at Tumblr. Now, I'm really not that well-versed in Tumblr (case in point: my very own Tumblr blog) design-wise and I was actually trying to convince her to switch to Blogger instead but since all of her posts are already in there PLUS she's already comfortable blogging in Tumblr, I just took it as a challenge of sorts (yes okay, I'm kinda pathetic that I had to use that as a motivational tool lol).

She only asked for four things on her blog:

1. The color scheme would be black and white
2. The header would say P.S. (her initials)
3. The font on the header would be cartoon-y/comic-y (ok I really don't know how to categorize that)
4. She'd like a nav bar with the following links: Random, Doodles, Travels, Contact

HEADER
When I first typed "P.S" it seemed too simple for me. I mean I'm all for white space and all that minimalistic vibe but it was waaay to simple. It's just 4 characters...in black.


So while I was damn sure this is the sort of thing she wanted, I kind of wanted to push my boundaries (LOL) and see if there's something else I could work with... and I came up with this.


Polele is a big fan of pandas and a part of me hoped she will pick this one because, well I don't want to sound like a d-bag but... IT'S GENIUS RIGHT? It's a panda (reiterating the fact that SHE IS A BIG FAN OF PANDAS), it displayed the clean minimalistic look I was going for and it's in black and white AAAAND it has the P and S she requested.

Before I had her make a choice between these two headers, I decided to look for more fonts and switch up the first banner I've created. The big bold black letters were kinda off-putting because I had to create a nav bar underneath it, also in (slightly smaller) bold black letters. So hours and hours of browsing through the font catalogue and I finally decided on this one.


And sure enough, she picked the latter one. It was still a really good choice though. Maybe the panda could be her logo then? No? Okay.

NAV BAR
There was no contest in the font I was to choose for her nav bar. The only thing I would say about this is it was so hard to code the damn nav bar, especially in the hover part. It took me 3 days to finally do what I wanted to and I've never been this happy since my birthday last year. Thank the Web Gods for this, I will forever be in debt. *kneels, bows down and murmurs "I am not worthy"*



TEMPLATE
Her existing template was Quixotic and it looked something like this

 
In turn, I chose The Atlantic because of its simplicity and how the layout was focused on the center which would give way for her photography (the photos are coded in hi-res!). When I've finished coding her nav bar (see above for reference) and I finally presented the finished product to her, she told me that she wanted to have a sidebar for her "about me" and to make the photos smaller. Even though it took me a week or so to fit in another column in a one-column layout and to research the tumblr tag to make the hi-res photos smaller, I must say it really looked better this way.


Recently, she has been blogging about her London trip last year. (side note: I should've been there with her by the way! Darn project deployment!!) She went to the olympics and all that jazz! Do drop by her blog here.

Like what you see? Need a blog/website to be designed/redesigned? Hey guess what? I'm for hire!

1 comment: