Saturday, May 18, 2013

2013 Re-Design (input requested)

A little sprucing up the place for spring!


It's been 13 months since I last updated the layout of the blog (I wrote about it here).  I was feeling a little antsy today and decided that it was time for a re-fresh.  I didn't think it was worth completely changing the tone of the blog as I did last time.  If you remember, last time I went from a hot pink color scheme, to this more muted warm pink tone.  I still like the warm tone, and I still like it fading down to black.  So one of that changed.

But I did want to jazz up the background a bit, so I added a stripe and let the bottom part of the gradient be completely gray scale.

I left the blog at 1100 pixels wide, and moved the side bar over to the left.

The big change is the preview images.  I never liked having the preview images so small and it always bothered me from a design perspective that each post's preview image was a slightly different size.  So instead of posting a smaller version of the cap, I decided to make a quick custom post graphic.

And seeing as the design of my entire blog plays with black and white, I figured that would be a fun way to preview the cap... present the photo used in the cap as a black and white with the title in it.  The title would still give a splash of color.  This also allows me to make the preview image fairly quickly.  Once I'm done with the image and have it saved, I can simply delete the test and text boxes, crop the image down to 400x400 pixels, then move the title into an appropriate place (if it wasn't included in the original crop).

I chose 400x400 since that's the "large" way that blogger shows images. The old way I was displaying the images was the "regular" way in blogger which made them about 300 pixels on their longest axis.   If the picture was wider, it would be 300 pixels wide.  If it was taller it would be 300 pixels tall.  Inside the post I'd show the preview caps in the "large" format which did the same re sizing except it used 400 pixels.

With this new preview image, I no longer have to worry about people clicking on it instead of the cap (it happened more than I like to admit).

And as long as I was standardizing the size of the preview images, I went ahead and updated the preview image on a non cap post (like the preview image for this post).  The old noncap preview images were 400x333 pixels... a slightly wide format image.  But from here on out they will be the same 400x400 pixels.  They will still have the text and text box, and if I can help it they'll still include some spot coloring.

I went ahead and made new preview images for the last 10 cap posts, so the first page here will be all updated.

While I'm finished with the design work for today, I don't think I'm completely done with it.  I think I'll be editing the color, size, and font of all the text.  I like the warm tones, but I believe I'd like them to be more grayscale rather than pink.  I may also change the post box colors (the dark grey areas).  Again.. just to play around and see if I can distinguish the post boxes from the side bar gadget boxes.

I'll update this post as I work on it.

Oh, and since I only have a vague idea as to what my original hot pink design looked like, I went ahead and took a screen cap of my old format.  Here it is for posterity sake:



As always, I'm open to any suggestions for thing to add to the blog.  

3 comments:

  1. I'm enjoying the new look and it's not hard to get used to like some redesigns out there.

    The one thing that was just a little jarring for me when I first looked at the new design, was the header image over the pink ribbon at the top.

    But After I refreshed the site and got a different image for the header, I realized what the jarring effect for me was. It was that some of the header images had a very bight, pale pink color and it kind of really stood out from all of the dark grey and warm pink colors.

    The dark maroon or hot pink looks great, but The bright pink kind of threw me off and made me feel like it kind of belonged to a different site.

    Other then that, I enjoy all of the changes and really like all of the preview images. i would steal the idea my self if I had any means to create a preview image that looks half as good as yours.

    ReplyDelete
    Replies
    1. Thanks Jennifer!

      I think I see what you mean about some of the headers. They are all using the same color, but each image has it's own saturation. The 'brighter' pink ones simply started out as lighter images while the other were darker to begin with. I've gone over the headers several times and will take ones down that don't seem to fit. The one that is particularly bright is one that I love because of her eyes... so it's going to be staying in the rotation.

      Delete
  2. Everything's looking great, and I'm really liking the black and white preview images.

    ReplyDelete