7.16.2012

What The Bittle?

Because I am desperate for people to trust me with the guts of their blogs - I offered up my 'design services' {and I use that term loosely} to another giveaway.  One that Kristen was holding in June for her birthday.  Happy birthday Kristen!!! I thought this would be a good opportunity to open it up to some bloggers who might not know me and vice versa.  I did this because I am crazy!  No but seriously I did this because I wanted to work with a blogger that I didn't know much about.  To see if I could design for them without having a sense of their personal style.  OK and participating in a giveaway added a little exposure to my blog too. Win win - right?

And a big {or not so big} win for Amber from My Three Bittles who was the winner of my in-progress of learning services.  YEAH AMBER!  And YEAH EMILY! And YEAH KRISTEN {because why not?}. I was a slacker and didn't contact her right away.  But hey I had a five day migraine - and I was on day four when I saw her e-mail in my junk mail.  Why does that happen?  I hate it.  She was understanding - and we got the ball rolling almost immediately.  I had only visited Amber's blog a few times before - but wasn't a dedicated reader {because I am a bad blogger but trust me after some digging - Amber's ramblings are gold!}.  This was perfect - this was exactly what i wanted. 

After a few e-mails back and forth I was able to come up with the basic design concept based on few pieces of information that Amber provided.   

{click the image to see the design in all its glory}
1.  The Header - Amber said she liked her current header and that she was contented to keep it the same.  However - I suggested that I would spruce it up a bit to match her colour scheme and overall blog design.  I made it left justified to keep some, much loved by myself, white space. 

2.  Social Media Icons - Amber sent a few examples of blogs that had their links and social media icons above the header rather than underneath. {I smiled - because this was something I wanted to learn how to do}. 

3.  Social Media Icons - Part Dos.  I decided to add some under her about me image to break them up.  No rhyme - no reason. 

4.  Circle About Me Image - This was another request that made me grin.  I had just figured out how to make clipping masks in Illustrator so I was excited to try this out.  In hindsight I wish I made the picture black and white.  I think it would make the colour in the design pop more.  I might have to change this.  Amber?

After we had all that established - Amber sent me the link to a Design Seeds colour scheme 'Santorini Tones'.

{colour scheme inspired by Design Seeds - Santorini Tones}
I went to my two go-to fonts.  Bebas Neue and New Cicle.  Why?  Because I love the clean lines.  And I think they look like they were made for each other.  They should get married and make beautiful font babies. What? Anyways - I have been learning some lessons in the importance of using Web Fonts.   The main lesson being don't just use fonts you downloaded.  They need to be web safe.  Or installed. Or linked. Because if they are not -  a person visiting that site who doesn't have that particular font installed on their computer won't see it correctly - the font actually defaults to it's font family - HUH???  I don't know how to explain this properly.   Anyways short story short - Google Web Fonts (GWF) is your answer. Use them.  Learn about them. Otherwise you run the risk of a visitor seeing.....GASP.....Comic Sans.  And then immediate barfing will ensue.  You don't want that.   Maybe someone can explain all this to you in a more eloquent way?  That person is not me.

Since I had already gone ahead and designed the blog with both Bebas Neue and New Cicle - I realized I had some Google research to do to find some matching web fonts. I have no idea what I am talking about!  But  from what felt like hours of research,  I settled on both Oswald and News Cycle.  After some comparison I think they match almost perfectly. Check me out - matchin' fonts in blogger, like a wizard. Anyone? What do you think?  This was great because both were listed for use on GWF. Word! So wham bam thank you mam - I got those loaded in the template and I was pleased with the results.

Here are my three favourite elements in this design.  And what I am most proud of. 




I noticed that Amber had installed a pin it button onto her blog posts.  At first glance the red pinterest button, in my opinion, clashed with the pink in the design.  It had to go!  So I used one of the monsters from her header and added a speech bubble.  Try to convince me you don't think it's adorable.  Because it is!  End of story.  However I had a bit of trouble installing it - and I am still not 100% convinced it worked.  But I'll make it work! Challenge accepted little pin it button. Your fate it mine.

 
I mentioned this already - but I am so in love with how this turned out.   This was definitely the most challenging part of this design.  Once I got it to work - I will guarantee you that I did a victory dance!  And I might have said "Booyah Mother F@#!er$."  I say that sometimes - or a lot!  If there was a beer close by I would have shotgunned it.  I was that excited.  What a loser right?


AND...if you scroll all the way to the bottom - in the right hand corner {or maybe the left I am directionally challenged} you'll see another little monster.  GO LOOK!!! You're back?  Or did you die from how cute that little sprite was?  I giggled the first time.  When did I get so ridiculous?  But come on - it's adorable.  Even I can recognize that. 

 So whatcha think?   So far I am enjoying this design learning journey.  And luckily - I think I got it right for Amber.  I mean she let inside her blog after all.

15 comments:

  1. this post made me giggle.
    I like you, you're a funny lady.
    I'm ok with you making the pic black and white.
    And i'm glad that my wants made you happy!
    Good team, we make a good team.
    And I'm still sorry about your migraine :(
    And it was a big win for me. I got a blog design!!! And an amazing one at that!!
    And shame on your for not being a dedicated reader! I'm awesome!!
    It worked out in the end, but shame on you, Emily! Shame on you :p
    Seriously though... You are quite talented! And i'm completely in love with my blog's new look.

    ReplyDelete
  2. Oh my goodness! It looks great and LOVE all the background info about it!

    ReplyDelete
  3. I love it! Its so clean and I love the colors!

    ReplyDelete
  4. I might need to hire you. I *love* your style. Also, anyone who applauds themselves with a 'Booyah Mother F@#!er$' is a winner in my book ;)

    ReplyDelete
  5. I think you're a rockstar. I was familiar with the old design, and I think you kept the best parts, while adding so much polish.

    And the idea of someone seeing Comic Sans and immediately barfing everywhere?!?! Comedic gold, my friend.

    ReplyDelete
  6. This is great, very helpful! I am your newest follower over from the blog hop. :) Hope you have a great week. Happy to be following along now.

    ReplyDelete
  7. You crackkk me up! Im so glad to see how this worked out! I love the color scheme and everything flows so nicely. You did good Em! You need to teach me some things! Oh and I know a trick to get around only using web fonts! :) I just got it to work the other day and u best believe I said boo yah mofo!!

    ReplyDelete
  8. This is awesome!! I'm so proud of you and all your blogging knowledge. The custom pin it button is amazing and so clever! Good job!

    ReplyDelete
  9. I love this design!! Now I have to go read up on google fonts and above the header links and social media icons. And custom pin it buttons. Please do let me know if you figure it out, I'd love to know!!

    And I agree. Finishing a good design makes me want to shotgun a beer and crush the can on my forehead. And I don't even like beer.

    Congrats! It looks amazing!

    ReplyDelete
  10. teach me your ways, design master! i am dying over that navigation bar above the header! LOVE IT!

    ReplyDelete
  11. You are MUY talented girl.
    Since I'm kinda in the same boat as you (learning all this shizz), I really loved this post.

    I've been dying to learn how to do that top navigation bar but I think i need Illustrator.

    ReplyDelete
  12. Yay Emily!! It looks so so good! You are going to be the new sprite-master soon :) This design is Awesome!!

    ReplyDelete
  13. Very funny. I love that though you are a blog designer, you are still learning. I.e. it isn't much easier for you than for me-who is not techie at all.=) Linked up from Grant's life.

    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.