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.

Let me know what you think on Mastodon, or BlueSky (or Twitter X if you must).

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...