7.10.2012

Sometimes I Design Blogs.

Over the weekend I put the finishing touches on Heather's {from The Life Unexpected} blog design.  And hesitantly, I sent her the test-site and to my surprise she gave me the thumbs up to install it live.  Phew!

But - let's back up a second.  Why am I designing someones blog?  Well do you remember back in April when Lauren from Our Crazy Ever After was giving away a free blog makeover?  A free blog makeover from yours truly?  Well Heather was one of two winners.  {The other blog I made over was The Dashboard Diary}

When Heather and I first started corresponding over e-mail, she stated "I am not afraid of colour!" My first initial thought was probably some sort of profanity.  That looks a like this 'F@&#' You see - I AM afraid of colour.  I do like colour - but I don't know how to design with it.  I like to stick to simple.  To easy.  So I instantly doubted that I would be able to pull something together that she would love.  The colour scheme she requested was yellow, grey and black.  OH NO - the dreaded yellow!!  How do you make yellow look subtle - but pop at the same time?  I definitely had my work cut out for me.  And with three revisions from my original mock up later - I came up with this colour and font scheme.


Why did I use two similar cursive fonts?  Well simple - I couldn't find a free web safe version of the Contribute font I used in the header {if you know where to locate one I will thank you in mini eggs}.  So I searched Google Web Fonts in hopes to find one that was similar.  I think I did a pretty good job with matching it with the Rochester font.  Agree with me please!  Thank you. 

For the colour scheme I borrowed one called 'You Are My Sunshine' that I found on The Perfect Palette. {Side note - I used to live on that site when I was in the early stages of planning our wedding} but I added in some black and lightened the greys a bit.   

And here is how the  final design turned out. {click the image to go visit Heather's blog to see it in full force}.


I am not going to lie - I am kind of proud of this design.  Not only because I think I did an alright job with the design  and the COLOUR- but because of all the hard work that is behind the graphics and layout.  Yes it's true - I coded my little nerd heart out.  I even stayed up to 4:30 a.m. on a Friday - nose deep in CSS.  If this isn't nerd status - I don't know what is.  At least I know Katie would hang out with me.

Here are some of the elements that I am proud about from this design.

1. The squiggly line.  The squiggly line my husband repeatedly told me to take out.  I am glad I didn't.  It adds some flair to the header filling up some of the white space - yet still leaving it open enough to not look too cluttered.  Oh - and I embraced my Illustrator pen tool. So I sort of felt as attached to it as the letter D.

2. The background Flower Burst.  It's fixed. And since Heather wanted colour and I have such a hard time with backgrounds - I coded the background to scroll with the page.  This way the flower comes with you.  Adding that little burst of colour anywhere you are. 

3.  The Navigation Bar.  I really like it's location.  I also like that it's simple - home, about, and contact.  No fuss no muss.  {I said that to my husband the other day and he thinks it isn't a phrase - I Googled it and turns out it's a common phrase from the 60's and 70's - yep I am old too} I also figured out how to unlock the header and how to add more widgets.  It was a big day.

4. The Social Media Sprite.  Eppppp!!! {I just said that} - this is my favourite part of this design.  It seriously took me 5+ hours to figure out how to make this work.  But I did it.  And it works.  Thanks to Katie {again!} - this girl is getting a lifetime shipment of mini eggs. {I must be craving mini eggs}.

5. The Widget Title Bar.  Normally what I do {or should I say did?} is individually design a widget title for each widget {I hate the word widget}.  But, but, but not this time - this time I did some magic with some CSS coding and viola - now any time Heather adds a new widget to her blog - the widget title will magically appear.  This was also a glorious moment.  Cyber fist bump to anyone who is willing.

I now have 5 blog redesigns {including my own} under my belt.  And three more in the works.  I think after those are completed - I will have the skillz to redesign my space and blow all your minds up.  {just kidding - I am not really that confident}.

So what do you think - honestly?  I can take it. 

28 comments:

  1. Not even kidding, seeing this makes me SO much more excited about my blog makeover!! I love that you didn't take out the squiggly line!
    And GENIUS about the widget code! I always wondered how that worked with bloggers that didn't do their own design.
    FIVE blog designs?! Busy lady!! GO you!!
    You truly have a talent, miss!
    Oh and this makes me not want pics in my header. Ha. only the monsters in there somewhere.
    So excited!!

    ReplyDelete
  2. Love it!! This looks great!!

    ReplyDelete
  3. wow this looks great!! I am DESPERATE to know how to makes my social media buttons pretty!! I don't know much about coding except what I have learnt in my travels and reading a HTML book in my younger days but most willing to learn!! looking forward to seeing your next one :)

    ReplyDelete
  4. Hello!! Kristen here from MamaWinkle's Blog! Just popping in to get familiar with your blog, say hello, follow (of course), and politely as that you please return the favor? :) That would totally rock my socks off! Thanks!!

    Have a great week!!

    ~Kristen
    mamawinkle.blogspot.com

    ReplyDelete
  5. Love it! They both look great :)
    You're awesome!

    ReplyDelete
  6. Your layouts are amazing. I wish I had your skills.

    ReplyDelete
  7. I'm definitely impressed!! I really love how it turned out and I'm wishing I had some free time to work on my design/coding skills. I really love your social button sprite and the widget header - that stuff is mad impressive! I cannot wait to see what you come up with next!

    ReplyDelete
  8. This looks so beautiful! I love it, and am actually kind of jealous! Ha! You're so talanted. My favorite parts are the header, and the flowers on the side. Great job!

    http://laurensweetnothings.blogspot.com/

    ReplyDelete
  9. I think it looks great! It's definitely your style, but still original for her blog. I really like the background, with the flowers but being simple, too- it adds some jazz without clutter. The navigation bar is GREAT- an unusual, but still tidy and easy to find spot! Way to brave the colors, too- I love the yellow!! Great job!

    ReplyDelete
  10. Love that design. It's classy and pretty. I'm a fan of the flowers and the large profile pic. Following you from the GFC hop. Thanks for joining us today.

    ReplyDelete
  11. You go girl! I love seeing the designs that you come up with, keep up the good work!

    ReplyDelete
  12. I LOVE IT! Great job, girl! Super impressed. Love the links at the top right and the squiggly line :)

    ReplyDelete
  13. Sometimes you design blogs, and...

    SOMETIMES (read: always) YOU'RE REALLY EFFING GOOD AT IT!

    You did such a great job, Emily!

    ReplyDelete
  14. Great job Emily!!! I'm jealous of your skills and that you know how to do all of this! You should be proud. I love the color and definitely love the squiggly line.

    ReplyDelete
  15. I wish I could find the font you needed because I REALLY love mini eggs! Glad I found your blog - Yay for Tango Tuesday!

    ReplyDelete
  16. WOW! You did such a great job! I badly want to get into web/blog design and I love reading and seeing work from others! I'm only just learning HTML so I have a long way to go. This is super inspiring-you did great!

    ReplyDelete
  17. Yay Emily!! I'm so proud of you for figuring out the sprite code.. seriously, it makes a world of difference on the blog! I obsessively check social networking icons to see if they are sprites.

    I also have a vertical sprite code template if you need it! (like how your SN icons are now on your blog.)

    p.s. I found cadbury mini-eggs on the island last week!! They were at a pharmacy in the capital city called "Jolly's." They converted to about $8US but I took the plunge & am rationing them for the next month :)

    ReplyDelete
  18. Ohmystars. You are too a blog designer! Look at you!! IMpressive, girl!! I love it! :) :)

    ReplyDelete
  19. New follower from the GFC blog hop!

    This looks amazing and you're quite talented! I wish I knew more about how all that stuff works!

    Emily
    birthofamom.blogspot.com

    ReplyDelete
  20. LOve it...i love grey and yellow too..it looks awesome..

    I am trying to makeover my blog all on my own...its KILLING me..

    GRRR...good for you figuring it out on your own..

    I may have to hire you before I loose my mind

    ReplyDelete
  21. Thanks for linking up at the GFC Blog Hop today!!

    ReplyDelete
  22. Wow! That looks beautiful! Great job! I'll give ya a cyber fist-bump. *pow* Glad to have found you through the GFC hop. :)

    ReplyDelete
  23. You did a great job, Em! I always love your designs - clean and simple.

    ReplyDelete
  24. I think this designed turned out AWESOME!! You got some sweet skills girl. :)

    ReplyDelete
  25. I love this design!! Now I have blog envy! lol Thanks for linking up with the blog hop!!

    Rachel (co-host)
    www.lalalists.com

    ReplyDelete
  26. My blog just got a makeover too! I love your design. Very cool! Newest GFC follower from hop. Love for you to stop by and return the follow when you can. Hosting a facebook hop now. Love to have you!

    www.thenaptimereview.com

    ReplyDelete
  27. the squiggly line is my FAVORITE. :) Great job!!

    ReplyDelete
  28. you did a great job! love the sprites!!!! they are hard but so worth the effort :) plus i'm sure it get easier once you get over the initial 5 hour hump :P

    ReplyDelete

Thanks for dropping by Hope Squared. If you like the things I have to say - I would love to read what you have to say.