I Made This: Custom Pin It Button
Hey Friends,
I’m in the final tweaks of my blog redesign and am pounding out the details, one of them being a pin it button hover. A lot of people just use the generic Pinterest button and call it a day, but I know I can do better than that, so I did some research about custom pin it buttons to see what was out there.
Literal Pins
Style Me Pretty: I dig the transparency of this, plus the little pin. The colors match their branding too!
Design Love Fest: Nicely Branded, large, completely custom
Breanna Rose: Love this! Clean and simple, and unobtrusive.
Circles
Inspired to Share: Simple outline treatment, bottom corner placement (probably wise with regular her use of tall images)
Creative Index Blog: I have a full on crush with this blog. I like the simplicity of a black circle dead center.
Other
Eat Drink Chic: Very Bold. Definitely Noticeable. Nice contrast with Yellow Branding
A Spot of Whimsy: Nice little treatment. Unobtrusive, but still elegant and noticeable.
Band.Do Blog: This is so cool. I like the idea of the whole image changing color.
I notice that circles are very popular. While these are absolutely lovely, I was looking for something that actually goes along with my theme a little better. They are a little too perfect, a little too flat for this “mixed media” approach I’m taking.
It wasn’t until I saw what Ban.do blog did on their images with a complete colorized hover and the words “PIN IT” large and in charge that I realized what I wanted to do. I wanted to continue that painted feeling, so I created a “pin it” script of my own with my sumi brush. Here’s what I’ve come up with. I’d love your thoughts! (Also, I updated the header. I like this better)
For more information about pin it button best practices, check out Zoe Rooney’s article about Six Tried and True WordPress plugins for social media. She brings up some good points that you should consider when designing your custom button.
LorettaMay
A little bit of my #process on designing a custom #pinit button for my #redesign http://t.co/eMP0msYorf
Zoe
Love all the research going into this
I would say that while I really like Ban.do’s (and am partially responsible for making it happen, hah), the really dramatic effect may not be what you want because it obscures the image when someone is rolling through the post. Theirs has the dramatic color shift but the text of the button actually doesn’t cover up a whole ton of the image so you can still see the image itself. I’d worry with your mockup that it’s blocking too much of the image.
And as a technical aside, centering vertically is actually next to impossible – we can center left to right but typically it’s best to stick to a set distance from top or bottom.
LorettaMay
Great point Zoe! I didn’t realize centering vertically would be a problem. while I still like my image, I am ok with changing the placement and sizing so that you can still see most of the image while viewing. Will change in my final style guide. It’s almost done!
Angel Y.
Such a fantastic roundup! I love the lettering on your mock up. It’s definitely original and stands out to me among the others.
LorettaMay
Thank you Angel! I love finding new ways to customize things and make them unique. Thanks for participating!