Ben
Ben is a lifelong Nintendo fan who likes to build websites, and make video games. He buys way too much Lego.
Building WPVote Part 4 : Design
Once I had finished researching similar voting sites I was ready to start designing and building the WPVote theme.
To decide basic page structure I went with Balsamiq mockups and knocked out some quick reference designs. I had a firm idea in mind for how the theme would function so it wasn’t that hard to make the images, and Balsamiq is REALLY easy to use so I had my reference images built quickly.
As I mentioned in part 3 of the WPVote series, since I already have a full featured WordPress framework (called Elemental) I decided to make WPVote a child theme, which has saved me a lot of time – all the SEO, templates and additional functionality is complete which gives me a solid base to work from. Also the fact it’s a child theme means that any future updates I make on Elemental will automatically be copied over to WPVote (which has already meant updates and bug fixes, even during development).
I decided to freestyle the actual visual design, but there were a few elements I needed to sort out first.
The logo was a very simple job and the first version only took me half an hour or so. However I wasn’t entirely happy with it so ended up creating 3 versions and asking the opinion of a peer (my fiancée 🙂 ) to decide the final version. Thankfully she agreed with my personal choice.
I wanted to use the tagline, ‘Spreading the WordPress Love’ so a heart motif seemed a good choice. I also wanted to combine elements of the logo in the voting graphics, so I created the circular heart icon. Then it was a quick trawl through my font library and I had the text done.
Below are the three logos I created – which one would you chose? Or would you do something different?
The other thing I needed was the voting graphics. I had an idea in my head (number 1) but it didn’t look as good as I had imagined when I built it so I went and mocked up a bunch of different images which you can see below.
Eventually I went with option number 3 but it didn’t look like something you would click on so I added a gradient and some other details to give it some depth and make it look more ‘clickable’, turning it into the final design as seen above.
Finally I had to make some small (16 x 16) icons for use throughout the site. I quite enjoy this sort of thing so they didn’t take that long either – however like the logo I revisited them later in the build to add some extra detailing. I compiled them in a long vertical image so that I can use the css background position property to show the different icons. This is known as css sprites which you can read about at A List Apart.
The sites colour scheme was made up as I went along, and you can see hints of it in the images above – and thankfully I am quite happy with the outcome, however this doesn’t normally last for long so I will probably tweak it in the future.
Next I am going to publish an overview of the code side of my rebuild. This was the more challenging aspect of the site development as there were things involved that I haven’t done before.
Wow, it looks really better than what I’ve done, lol. I’m glad I’ve sold the site to someone with lots a talent 🙂
I’m glad you gave me the chance to do something with it 🙂
Looking forward to releasing it to the world – I might send you a preview link so I can get some feedback
I’d love to 🙂 You have my email.
And as for the logo, my favorite is the third.
The voting graphics are seriously cool, but none of the logos really do it for me. I would go with number 3 (it’s the most balanced in from/shape), but it’s still too bland (colors). If you could somehow get some white into the red again, it would probably freshen things up.
Sort of a combination of 2 and 3, somehow (I guess heart on heart is a bit too much).
#1 is a no-no.
That V kills it. 🙂
very interesting read here.
I’ll be around.
Glad you like the voting graphics, they are definitely what I spent the most time thinking about.
I’m not what you’d call a world class logo designer but I am rather fond of the design I chose, hopefully with some additional feedback from others I will come up with something more people like. Out of interest what do you mean by “that V kills it”? To me it just looks like a letter V 🙂
Before I go to bed here, a quick reply.
I think the first logo with the V seems unbalanced, like it’s leaning to the left. The three black letters are too “heavy” for that side and the V distracts even more (is ‘jarring’ the right word here?). The other two are more even and balanced, like they have a center. Because the “v” in the 2nd design is smaller, it does not distract from the whole.
I think the third one with a third color or something to set some sort of highlight would still be my favorite, but it needs something to make it stand out more.
But then again, I even suck at stick figures, so what do I know?
🙂
Volkher
Ah – I see what you mean now. The weight of the WPV unbalances the image. It doesn’t happen on the third option because the V is replaced with the heart and the extra character on the right balances the uppercaseness of the left. I will think on this some more, I guess I have to do a 4th version now 🙂
Looking forward to what you’re going to come up with.
🙂
I like the first logo, but it would look better if the “V” were lowercase, as in the second one.
The final vote graphic looks really nice, although there’s some anti-aliasing problems around the circle (not sure if that’s because it’s not the raw image), but should fit really nicely aligned with the left-hand side of a story.
I’m not sure why I did the V in different cases for the different logos. Am going to do some more variations and write up what I work out I think.
I made it with Fireworks which I know is sometimes a bit funny with anti-aliasing but I thought it looked ok on the vote graphic.
I like logo #1, but I’d probably make WP either a different shade or color. Nice work!
between you and me, number 1 was my choice as well 😉
Vote buttons: way cool. Love the subtle blue, the red is perfect too, not too “red”.
Logos: hmm… No.
#1 it seems there are 2 distinct parts, the “WPV” and the “te”, the heart don’t really bring them together. To me it looks like someone with lipstick kissed the wall between those two unrelated words.
#3 same kind of thing. “WP”, then “ote”. It makes something like “WP loves ote” but then, that makes no sense 🙂
#2 is the one I think should be improved. I feel that the heart, distinct from the rest, makes sense. I just don’t like the font, too skinny next to that bold heart logo.
All in all: the bold heart logo in #2 is cool, the red color is gorgeous. Keep it, and work the font next to it 🙂
Thanks for all the awesome feedback. It’s given me a lot to think about. I think I am going to go back to the drawing board and come up with as many mockups as I can (and probably a blog post describing the process 🙂 ) before deciding the final winner.
Interesting insight into how this is done.
Oh and for what’s it’s worth at this time, I liked the 1st logo. 😉
The site is great…but did you used any plugin for voting or your own code? I like to try and make a site powered by WP like yours…
The code is all my own – there are no plugins used in the creation of WPVote.com. If you like the site then you can purchase the theme. It’s called Nominate and is the exact same code that is running on WPVote.com. You can buy Nominate on my Premium Themes site – Pro Theme Design
Yeah…I don’t have money to buy it and I’d like to make my own but I don’t know how to make the source URL show like that…can you please help me?!
Not sure what you’re referring too? Make the source url look like what?
I mean the URL to show like on Digg.com(http:www.yoursite.com or http://www.yoursite.com)…
so converting http://www.website.com/test/url/ to http://www.website.com? For that I would look up the parse_url command on php.net
$url_parts = parse_url($url);
echo $url_parts[‘host’];
thanks for the reply, but to bad I’m not a programmer, so what you posted doesn’t mean a thing to me…sorry…
I’m not sure how else I can help then I’m afraid. What you are asking for requires programming knowledge – I didn’t use plugins to build the site 🙁