Ben
Ben is a lifelong Nintendo fan who likes to build websites, and make video games. He buys way too much Lego.
How I built BenGillbanks.co.uk in a little over 2 hours
Quite some time ago I purchased BenGillbanks.co.uk thinking it would be a good idea to own my own name as a domain. But then I didn’t do anything with it.
The other day I decided it was time to sort it out so I proceeded to develop the thing.
Concept
From the start I wanted the site to be a single page, with links to all my sites and a Twitter feed. I wanted to use a dark colour scheme, and I wanted to do something more detailed, and less blocky than I normally create, whilst still keeping it clean and minimal.
My first port of call was Colorlovers.com (a great resource for the colour blind amongst us) where I did a palette search to find a colour scheme I liked. I ended up choosing the lovely Stay Blue. 10 minutes down.
I then jumped straight into my very old copy of Fireworks and started roughing things out. I quickly decided on a two column page, with sites on the left and twitter on the right. No logo, and simple text formatting throughout. Soft gradients and shadows would be used to give the design some pop and bosh – it was complete. Just over an hour total.
Building
The code is very clean and simple. I wrote 1 function for displaying my list of sites so that I didn’t have to repeat the code over and over. In the future I will hand edit the code directly on the site using WinSCP (so no downloads or local files). There is no need for a content management system for something as simple as this.
The core css is a touch bloated for something like this. It’s actually a hacked around version of the BluePrint framework that I have been developing for my own sites. I intend to move everything into a single file, and remove a lot of the fluff that BluePrint includes but, again, for a simple site like this it wasn’t worth spending time on.
The Twitter stuff was very easy. I have been using the service for a few weeks now and, whilst not a prolific poster, quite enjoy it. To add it to your site all you have to do is include a simple piece of html & javascript that you can grab from your profile on their site.
Another hour gone.
Finishing touches
There were about 15 minutes spent tweaking. The original mockup didn’t have the short tag line or the little icons next to the headers so these got added to fill the page out a bit.
Any more for more?
I still need to add a favicon, I always forget them, and I have just noticed the top gradient is a bit streaky so needs sorting out. So apart from a few tweaks in the textual content it’s all done and I am very pleased with it, especially since it only took me a little over 2 hours to make.
So it’s basically just a html page, with no CMS behind it?
Sweet, Ben!
Erm… yes 🙂
In essence it’s a webpage. But I thought I’d try and make it sound grander.
Very clean design Ben! Layout is nice and the colors are easy on the eyes. Very good job 🙂
Could I have the code to use on my personal site? paultocknell.com?
right click – view source. It has all you need
A nice clean layout + good color palette speaks volumes sometimes. Nice work.
Hey Ben, your design was inspiration for a new website design I’d like to use, but I was wondering what sort of license/use restrictions you’d like to put on the code. I’ve modified the colors quite a bit and the code to some degree, but the general layout of the design is still present (you can see it here).
If I wanted to build a fuller, WordPress theme around the design, would that be okay with you?
Hi Abe – The link you posted doesn’t work – can you post it again so I can take a look?
Hey Ben- Here’s the raw link, I guess the html didn’t work.
http://www.flickr.com/photos/abeolson/2676435211/
When it comes to development I am happy for people to use my designs as inspiration but I don’t like theft. By all means learn from it but don’t outright copy.
Regarding your own site, I have slight concerns that it’s still very similar but I don’t have a problem with you turning it into a public WordPress theme, provided you give it away for free (so that others can learn from it).
Thanks for asking
Oh – and please let me know when you make it so that I can take a look 🙂
Alright. Thanks and I’ll let you know if I can find the time to put one together. I expect to keep tweaking the design to my own liking as I go, and if I end up putting a theme together I’ll release it for free (which I guess I’ll figure out how to do).
Along those lines, I was wondering if you know of the best minimalist theme to start working with when designing a new theme for WordPress (e.g. something that’s up to date, works with WordPress 2.5.1, etc…)?
Abe – I’m afraid I have no idea what theme you could use as a base. I learnt by modifying the themes that come with WordPress (not K2 the other one), the code isn’t that tidy but it’s all quite simple so should be easier to work from
I’ve recently expanded into having 3 blogs, maintaining 3 different (wordpress) themes was rather difficult so I started something similar however I called it tabula rasa (Blank Slate) with some sans-serif fonts.
If I find a tweak to improve performance seo etc, I apply it to TR and change what needs changing on the children themes. Versioning helps too.
Great Idea, certainly a more elegant blueprint.
Hey Ben, It’s (almost, maybe) done! Well, it’s at least a proof of concept.
I’ve posted about it over at my blog (http://abeolson.com/2008/08/05/new-theme-simplecity/) and you can see what it looks like on the site. I’ve really appreciate any feedback on that post, even “constructive criticism”. (i.e. “Abe, stick to physics and far away from website design 🙂
Per your request, I’ll release it GPL once I’m satisfied with it. Thanks!
Mike – I have started doing something similar to you as well. I have a single base wordpress theme that I now build upon for different themes on different sites.
Abraham – looking good. I would make use of the widgets and the sidebar too. Would be nice to get maximum use out of the different wordpress features. I like the name also 🙂