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.

Was it good/ useful/ a load of old rubbish? Let me know on Mastodon, or BlueSky (or Twitter X if you must).

Link to this page

Thanks for reading. I'd really appreciate it if you'd link to this page if you mention it in your newsletter or on your blog.

WordPress News

The latest WordPress updates from the WPBriefs Podcast.

Related Posts

29 Jan 2010

Building WPVote Part 7: Almost Done

Building WPVote has been a really interesting process for me. I have learnt stacks of new things, and through developing WPVote have added a stack of improvements to my WordPress Elemental.From start to finish I have: Building WPVote Part 1:...
30 Apr 2005

The Design One

I mentioned in my first post that I was going to do a run down of how I redesigned this site. It’s taken a while to put together but here it is.Binary Moon – a brief historyI started Binary Moon...
27 May 2013

WordPress: 10 Years Young, What Does The Future Hold?

WordPress is now 10 years old. I started using wordpress 9 years ago – which means I joined the WordPress community early on. The reason I chose WordPress is simply because of the fabled 5 minute install process – I...
20 Dec 2009

Building WPVote Part 2 : Planning

In part 1 of Building WPVote I mentioned how I have recently purchased WPVote from Jean-Baptiste Jeung.The first thing I did before I even spoke to Jean was trying to think of simple things I could do that would add...
15 Jan 2010

Building WPVote Part 5 : Programming

I’m nearly finished with the design of my new WordPress voting site, WPVote, so now need to look more closely at the programming.I enjoy dissecting WordPress themes, and since I also like code simplicity and minimalism (and am working with...
30 Dec 2009

Building WPVote Part 3 : Research

After receiving the WPVote domain and theme from Jean I moved on to stage 3. Researching ‘competitors‘ websites.I must admit I tend not to do too much research when building a website, but this time I did decide to do...