I recently finished work on the design & development of a website for Social Bits, a new Irish Social Media & Semantic Web consultancy. The Social Bits team have a huge amount of experience, and have come together to help companies understand how Social Media can bring value to their business. A welcome change from some of the self-styled “social media ninjas” out there. With their experience in Semantic Web research, they’re also well placed to help companies understand how to use the Web of Data as it evolves.
This was one of those enjoyable projects. Not only were the team in Social Bits easy to work with, they knew what they didn’t want, and were very open to hearing options & alternatives on things that would work. A great mix.
One of the joys of this type of work is that you get to know the business & services of the people you work with quite well; semantic web technology is one of those things that I had heard about, but never spent any time trying to understand. Having worked with the Social Bits team, learning more about it has definitely become more of a priority.
Social Bits have a number of events coming up, with one in particular that struck me as being a nice idea: a discounted workshop on Social Media for the Unemployed.
Putting it all together
With these type of posts, I’d normally leave it there, but I’ve recently read some useful posts that have given a bit more depth on how the design came about. As this was one of the (admittedly uncommon!) cases where the design of the site didn’t change radically from the first set of sketched drawings through to the live version. I though showing how it came about would be nice.
On paper
After talking with the team about what was needed, I spent some time coming up with some layouts on paper, and trying to figure out how to get the messages across. For the homepage, there were two that seemed to work well (the one that’s closest to the end result is below). And no. Drawing isn’t my strong point.
To Balsamiq
When I had a few different directions that I wanted to try out on paper, it was off to Balsamiq. Balsamiq is a tool for quickly creating mock-ups of interfaces. It’s really simple to use and is excellent is what it does; if you do front-end web work and haven’t checked it out, you really should.
So, I grabbed a 12 column 960.gs grid for Balsamiq and off I went. After I had played around with the layouts I had in mind, it came down to two that had some slight differences, but they were both headed in the very similar directions; the main difference was in the amount of information being presented.
After having a chat with the Social Bits folks, we ended up with a layout that was mix of the two versions. Once that was decided, I went to work on developing a look for the site.
Looking good
As this was a re-design, there was a logo already. So using that as the starting point for the look of the site made sense. From there, it was about coming up with a look that put across the message we wanted in as clear a way as possible. So we ended up with:
Not just skin deep
We had some of the copy worked out early on, so at this stage it was all about pulling it all together and polishing it up. This was done while I got my hands dirty coding up the custom WordPress theme for the site & blog.
Fin
And the end result is live at socialbits.net. Go. See.
