Monday, January 30, 2012

New (Digital) Buttons ...and A Chat About The Good & Bad of Small Business Ad Design

Handmade Buttons -- Set of 4 -- Teal with Dotted Edge

The past couple days I've been working on some new buttons.

And every time Bryan asks what I'm doing and I say, "working on new buttons" he thinks I mean real buttons.  Like the physical, handmade buttons I sell in my shop.  Haha.  Poor Bry.  That's not what I mean.

In this case, I've been making new digital buttons to represent my blog and etsy shop in the online world.  I thought we'd have a little look-see at some new and old designs and talk about the good and bad.  Hopefully along the way you'll find a few helpful ideas you can apply in your own designs.

Shall we?

Starting in February I'm going to be a sponsor on a new (to me) blog and that required a button with some different dimensions than what I already had on hand.  It's really just as well because it gave me a chance to update my blog and shop buttons and give them a much-needed face lift.  

While I'll be the first to admit that I'm never completely satisfied with my branding and design, I am pretty pleased with how the most recent designs came out.  I figured while I'm showing off the new buttons anyway, we could talk a little about the good and bad between my old and new button designs.  

I don't pretend to be any kind of design expert, but hopefully a quick run-down like this will help you be able to think through the positive and negative aspects of your own ad designs and think about what's working for you and you might improve.

Note: These images are obviously the super mega jumbo versions of my blog and shop buttons.  Nobody is putting anything this large on their sidebar.

Shop Button:

In case you're not already familiar with my shop, feel free to check it out and judge for yourself whether my shop buttons are a good indication of what products buyers will find there.

For those who are curious, this is what my old/other shop button looks like:
Design details:
-Photography by Katie Lewis (me)
-Designed by Katie Lewis using the free tools in Picnik exclusively

Let's talk about the good and bad here...


  • The pictures are indicative of what I sell in my shop
  • The photos are good quality
  • The bright, bold colors in the photos are eye-catching
  • The background in all of the photos are the same
  • The background in all the photos is neutral (i.e. doesn't distract from the products)


  • Two of the items (the rainy day pouch and the stripey bias tape) are permanently sold out
  • The words are all slightly different sizes
  • The circle in the middle looks a little juvenile to me
  • The lighting is a little darker than I'd like in the picture of the bias tape

All around, it's not bad and I'm not completely ashamed of it.  But I probably will be phasing it out once I get time to make my updated version in square dimensions.  And with that...

Here's the updated version:

Design details:
-Photography by Katie Lewis (me)
-Designed by Katie Lewis using the free tools in Picnik exclusively

Now let's talk about the new one...


  • One picture makes the color and light easier to balance
  • I like the simpler look of just one picture
  • The bright, bold colors are still eye-catching
  • The background is a good neutral pallet for highlighting the actual product
  • Both the picture and the words (along the bottom) describe/show what people will find in my shop
  • Using a general term like, "printable," will likely help my button catch more people's interest than using specific terms like, "printable alphabet and number flashcards."  
  • Using a general term like "printable" will give buyers something specific to go looking for
  • Use of general terms also keeps my button from being instantly outdated as soon as I add or change the contents of my shop


  • Having only one picture could give the idea that all I sell is handmade buttons
  • Having the words along the bottom could be a little hit or miss (examples: 1. These could be helpful or just make the button look too crowded, 2. If the button has to get sized down too small, the words may be too small to read.)

Also, I'm a little bit proud of myself for finally figuring out how to do the slightly see-through overlay thing.  I'd do a little how-to, but I just figured out how to do it in Picnik and, sadly, Google is shutting down Picnik in April, so... not much point in that.  Sorry.

Blog Button:

Okay, let's start with my (most recent) old blog button:

Design details:
-Designed by Katie Lewis using the free tools in Picnik exclusively


  • It matched my blog header/overall design at the time
  • It has a simple, clean design
  • The words are easy to read
  • The text is big enough that it can be easily read, even when the button has to be sized down quite a bit


  • First big no no: I never saved a large copy of the button before I started sizing it down to the appropriate button sizes.  Hence the lame-o small image you see above.  Even if you're 100% sure you'll only ever need your button to be a certain size, save a big version of it first.  Because you will always need different sizes.  And it is so much easier to re-size and reformat things from bigger to smaller than the other way around.  Always always always save a big copy.
  • This button does not describe what my blog is.  Especially when you have a misleading title like mine, you need to make sure your advertisement will tell readers what your title does not.  For instance, this is what my blog title communicates to new readers:
  • This is a blog about food
  • This is a blog about a kitchen 
  • As it turns out, my blog is not really about either of those things, so I need to help a potentially new audience know what they'll find when they arrive.  I wouldn't want foodies to come and be disappointed that this isn't a food blog, nor would I want people interested in sewing and craft projects to pass me up simply because they didn't know that's what my blog is full of. 
  • Other than the name, this button doesn't tell me much of anything.  
  • Overall, even though the design is clean and legible, I'd be very likely to pass it up if I saw it on someone else's site.

Okay, now let's take a look at the updated button...

Design details:
-Photography by Katie Lewis (me)
-Designed by Katie Lewis using the free tools in Picnik to create the photo collage
-Text design & button graphic added using Photoshop Elements

Ta-da!  Here's the latest version of my blog button.  Let's talk about it...


  • The words (I mean font and actual title) and red button logo match the branding on my current blog design
  • The new title matches the new title on my blog (i.e. used to be "Notes From A Very Red Kitchen" now I'm just "The Red Kitchen.")
  • The tagline "printables + tutorials + life" is descriptive of the general content of my blog
  • The photos included give a sample of the quality of photography readers will find on my blog
  • The photos also give a quick, visual sample of what kinds of things I usually include on my blog
  • The background on all three of the photos match
  • All of the things pictured in the photos are projects that readers could come and easily find the tutorial/recipe/shop listing for


  • The tagline "printables + tutorials + life" will likely be too small to read if the button has to get sized down very small
  • I'm not 100% satisfied with the overall design of this button-- can't quite place my finger on it


I'm sure there are a lot of good and bad things I haven't mentioned about any and all of the buttons I've shown here, but hopefully the pros and cons I've listed will be a good starting place and help you think about your own branding and design.  I'm so much of a novice myself (ahem, obviously), but I'm learning a lot as I go.

Also (shameless plug) now that I've finally updated the ol' blog button, you're welcome to grab a shiny new one to put on your own blog if you like.  Just copy the code you see (where it says "Go ahead, grab a button" at the bottom of the right-hand sidebar here on my blog) and paste it into an HTML gadget on the sidebar of your own blog.  Feel free to ask if you have questions about that.

If you're working on your own designs, I also recommend this post on I Still Love You.  Melissa, author of I Still Love You, has posted several great articles lately on redesign.  The specific post I've linked to here offers helpful information on standard ad sizes.  Who knew?  (Answer: not me.)

So... what do you think?

Do you have certain things you look for in blog and etsy shop ad designs?

Are there certain things about your own designs that you're proud of or that you want to change?

Be sure to leave your comments/questions/feedback in the comments below.
I'm always interested to talk design.  :)


Polly @ Pieces by Polly said...

I've been feeling like my blog buttons need a bit of a redesign...but it's a daunting task, so I have started it.

As someone who has had your shop button on my blog a while, I have to say your "old" button with it's different products shown has (as far as I can tell with my lame-o traffic counters) gotten the most attention of any of my sponsors and I think it's because it shows what you sell.

I LOVE the look of your new shop button...I like the artistic style of it better than your old one...but I'm not sure if it will catch people's attention as much as the old one since it does just show the buttons. (And I can tell you how to do the overlay in Photoshop if you ever need it...super easy.)

I think your new blog button is good too...and even though it's not as artistic as your shop button...I think a similar one with buttons in one square, alphabet cards in another, and something else in the third might be a good direction to go.

Sorry I didn't call you back tonight...Little Brother and I were sewing, but I'm around now and the kids are in bed, so I'm free to chat if you're still up. (Sorry...kinda a weird comment to leave.)

Liz said...

I like the new designs :)

For your blog button, I wonder if it might look a bit more balanced(?) if you had the two circular components (button and plate) diagonally from each other rather than one on top of the other.