11 Black and White Obsession: Blog Redesigned (Grand Tour y’all)

What a whirlwind of events over the past two weeks…

From declaring a mini-break from posting, to finishing the blog redesign (about 85% because there’s always room left for improvement) just in the nick of time for Haven, to actually attending HAVEN, the business sure has kept me plenty busy. I cannot wait to tell you all-about-my experience at the Haven Conference, but today I want to give you the grand tour of the blog redesign just in case you're lost or you like pretty pictures.  #WarningItsLong

And since a bit lengthy (mostly scrolling) here’s an ‘index’ if you will:
  • Blog Style Guide
  • Menu/Social Media Hovers/Back to Top
  • Sidebar
  • More Social Media Buttons
  • Subscribe
  • Share Buttons
  • Footer
  • Evolution of the Header & Menu
  • Surprise announcement (if you make it to the end, har har)
Let’s begin with a style guide of the entire site:


Let me start off by saying, I’m not a designer by any means. I’m sure I broke many style “golden” rules- *cough more than two fonts *cough or keeping the number of ‘elements’ to a minimum. I think the reason mine worked out well was sticking with one rule- white space. Ok, maybe two rules- having a simple color pallet as well. The color scheme consisted of a black to white gradient scale with a dash of teal. Oddly, the color pallet was a bit difficult to work with at first.

On with the show it’s TOUR time:
Click on image or here to enlarge.
The drop down menu has been revamped to fit the color scheme and the little Social Media Guitar Picks actually fully appear when hovering with your mouse. In the bottom right corner, you will see a back to the 'top' button as well. If anyone knows how to make this appear after the ‘fold’ (once you actually scroll) in blogger please do tell!!


One of my biggest pet peeves when visiting a site is a clogged up sidebar, to me it’s like a clogged toilet- yuck! Run/click-away, f-a-s-t. So what better way than to solve that issue by condensing most of the widgets into neat little tabs. Let’s not forget the little social tickers for convenience.

Go on, poke around. Fair warning, there may be a few 'under construction' blurbs. Side note: the basic tab stylizing in the box bugs me to no end, if you have any coding tips send ‘em my way, or leave a comment below. 

Speaking of sidebar, I couldn’t let these little social media buttons sneak away without an honorable mention:
It’s one of three locations on the site to find social media buttons so you can connect, well socially. You know, as if the post signatures and the little pull-down guitar tabs weren’t enough.

Next, are few more hidden gems -er elements:
There are two ways to subscribe to Black and White Obsession, one on the sidebar to the right, and the other in the blog/webpage footer. It would be a shame if I didn’t send out a friendly reminder about the Photography subscription box, you know since there’s a giveaway and all. And let me tell you the chances of winning are pretty high. Thanks dad for putting your email in there, family may or may not be pro bono *wink.*


Click the image or here to enter for your chance to win!


Sure the Post Footer has a little work to do, but those darling little share buttons are my pride and joy. It may be because they took me about a million hours to figure out. Ok that’s a bit dramatic. 

So go ahead and share, you know you wanna.


One thing I noticed when surfing other blogs for inspiration is the lack of a practical footer. It must be the last thing on bloggers minds when finishing their blog design. I say it is one very important area to simply skim over, a sorely missed opportunity if you will. It's like the eye liners to your eyes, the hairspray to your hair- it finishes off your page off and can provide more ways for 'customers' to interact with your site.

Last but not least, the new signature (at the bottom of this post). It’s a combination of fun and function.



Well, that's it. The end. 



Just kidding, I saved the BEST for last...

Like I did back in December with the first re-design, I thought it’d be fun to look back at previous designs. This time, let’s hone in on two Evolutions- the Header and the Navigation bar so you can see how things gradually evolved over time. Fair warning- these are Loooooong images so get your scroll-y fingers ready, because here we goooo…

Wow. my blog style has really come a long way...


What a stark difference it was over time, eh?!

I'm not gonna lie, the redesign was a lengthy but steady process which actually started back in May- finishing Phase 1 right before the Maiedae Mixer (sense a pattern?). Although long, overdue, and highly anticipated (for me at least) it was well worth the 'slow' turtle race this time.

Feel free to poke around, tell me what is and isn’t working. Or, tell me, what do you think of the new look? Have you designed something recently? Did you proudly, yet nervously show it off?


But wait, there’s MORE!! 
Come back Monday for a freebie download to help you design your own website!! Even if you hire a designer, it’s always great to have a template filled out and ready to go! If anything, you’ll be a step ahead of other clients by creating a great working relationship with your designer. It also helps your professional nail down your perfect site if you provide a rough draft.

Interested in your own blog design? I'm in the early stages of providing blog designing services. Email me for special pricing with a la carte items such as social media icons, sidebar titles, *installation assistance, etc. If you're ready for a full or even mini blog makeover, let's talk! Take advantage of portfolio building prices!! Check out other designs here.

*Installation assistance on blogger/blogspot only.

11 comments:

  1. It's neat to see your blog's design evolution over time. =D Do you code everything yourself?

    ReplyDelete
    Replies
    1. Hey there Yvonne, thank you so much for stopping by!!

      Yes I code (with lots of research of course) and design everything myself. If you're interested in something let me know!!

      Much love,
      Trisha D.

      Delete
    2. I love using tabs for navigation. My husband coded my apartment tour using tabs recently, but I love how you used it in your sidebar! What a neat space saver, and great way to keep things organized. =D

      Delete
    3. Thanks Yvonne, Sidebars that are longer than content drive me crazy haha.

      Delete
  2. Replies
    1. Thanks Cortney!! It was fun and tiring at the same time :)

      Delete
  3. The redesign looks great - I love it! Do you do your own illustrations or did you download/purchase them? I'm starting a redesign of my own to improve the navigation of my blog because it's essentailly non-existant at the moment and I'm planning on switching my blog over to wordpress eventually. I'm fairly competent in photoshop and I'm looking forward to the design but I'm not looking forward to the coding - it'll probably be the cause of way to many late nights googling around for help.

    Can't wait to hear about your recap of Haven - I wish I could have been there :)

    ReplyDelete
    Replies
    1. Hi Rebecca, thanks for all the kind words, seriously I'm beaming right now!!

      To answer your question, yep I designed all the illustration myself with regular old Photoshop CS5. I'm actually posting a template today, you should check it out. It may be helpful to you!!

      The coding is definitely not easy, especially when you're new-er to < /bold> the language and whatnot. See what I did there? T.D. = Total Nerd!!

      Delete
  4. J'adore this new design!! I'm seriously drooling over the prettiness of it all.

    Plus it's hella functional and a breeze to move around.

    Well done you!!

    Cheers,
    Becky

    ReplyDelete
    Replies
    1. Thank you, my love!! Yeah the site was a mess before. Can't wait to tackle of some of the sarcastic placeholder pages. One.Step.At.A.Time. har har.

      Delete
  5. This comment has been removed by a blog administrator.

    ReplyDelete

Comments make my heart go pitter-patter! Your comment may not appear right away as they are manually accepted.

Pin It button on image hover