2010 has been a very important year for Joey and I and OMG! Ubuntu!
About 4 months ago we decided it was time to formalise the website and begin expanding the OMG! network. To do this we had to create some sort of over-arching entity that would allow us to easily refer to our products, because we aimed to have more than one. We also felt it was about time we started turning the OMG! brand into a commercial venture. We knew we wanted to start a company, and after about two weeks of trying to come up with names we finally settled on ‘Ohso.’
Tyler came to us with the idea of launching OMG! SUSE! and we let him have at it which expanded the Ohso network to two sites. With the launch of Ubuntu Gamer coming up before the end of the year, we’ll have three, and possibly four. We decided we needed some sort of user-facing image, and, myself being a stickler for consistency, found this idea of a network of very different but at the same time very similar websites an appealing design challenge.
We wanted to get away from Blogger as it was slow and very restricting in what we could do, so the new design couldn’t come soon enough. In July I sat down at my desk and started thinking of ideas. To start I wanted to create a nice colour pallete that we could use across multiple sites in varying levels – this would be the first relationship the network would have. It was important to establish something that kept the OMG! cheekiness and funk that we’re known for, but at the same time creating something elegant to raise the bar to that professional level. Looking at other tech sites, I could see that a lot of the time they have gone with function over form – being a designer, I felt we could have both. I wanted to make OMG! Ubuntu! the best looking blog on the internet.
Since we already had a very simple colour pallete with OMG! Ubuntu! purple and orange, I compared this to the new Ubuntu branding, aubergine and orange. Our colours are different to Canonical’s, with our purple being a lot darker and our orange being lighter, but I found they worked together well. In the new site design I wanted to convey a professional image, to me (and I think you’ll agree) the deep purples work better than bright oranges in doing this. The header is a gradient of OMG! Ubuntu! purple to Ubuntu aubergine.
Because orange is a bright colour, it’s very useful for attracting attention – especially when used in such contrast with aubergine. I decided to use orange sparingly around the site for highlights.
These two colours, along with varying shades of gray make up the bulk of the website colour pallete. But there was a problem with links – orange was too bright and not readable, and purple was already too prominent. I experimented with some aquas and blues which I used in the new Ubuntu Manual site design, and settled on a lovely deep aqua for links. I think this provides a nice middle ground between the luscious purples and candy orange.
Once I had settled on a colour pallete (which is very important) I started looking around for inspiration. With the new site we wanted to achieve a couple of imporant things regarding posts that the old blogger site didn’t do well:
- Making featured posts more prominent
- Allowing readers to easily find previous posts
- Better social sharing
To feature current posts we decided on a large, prominent carousel banner that is 960 x 200 – this gives us a good way to show off breaking news stories, and we can have as many in the loop as we like. It’s consistent with the new Ubuntu web design, so readers should feel quite at home. I also wanted to make use of Joey’s funky and eye-catching graphic design which I know is something that makes OMG! unique. Scrolling down to read posts is a tradeoff, but if you visit any of the large Gawker Media or Weblogs sites, you’ll see they employ similar tactics to an even greater degree.
The original design
With almost 2000 posts dating back a couple of years (a lot of which are still relevant) it was important to get the most reuse out of this material. Combining a prominent and effective search bar with clear categories will hopefully allow readers to find what they want much more easily than trawling through the endless menus present in the old site. The five categories in the banner serve three purposes:
- For new visitors to understand what the site is about at a glance
- So readers can quickly filter something they’re interested in
- To create an association with the categories in the header and then in the body
We have a new icon set (courtesy of ipapun) that comes in two flavours, light and dark, which means we can use these on other websites as well – giving some more consistency across the network. There are quite a few categories missing that we need to create more icons for, so we’ll slowly be expanding the set.
The posts themselves needed to improve on the current site in a number of ways:
- More prominent social buttons for sharing
- Clearer formatting and font
- Better use of image collections
- Excerpts for post previews
A lot of this was fixed simply by moving away from blogger. The new site uses a nice gallery plugin to handle image collections. The original design for posts was a bit different to what you see now – the floating categories on the left of the post also contained tags and sharing buttons. We soon realised this wasn’t particularly feasible for longer tags, and Joey wanted more prominent sharing buttons – now we have lovely tags down the bottom of the post, along with small sharing buttons, and then at the top of the post is a floating bar with Digg, Facebook and Twitter. It’s much less obtrusive than the last bar. You can thank Niall for that!
Hope you like grids
This leaves the side bar and footer. The side bar stuff was hacked up by Niall who spent quite a lot of time fooling around with the Facebook widget and the recent comments (pulled from Disqus) stuff, so that’s why they look quite nice. The footer is pixel perfect to my design – I wanted to achieve a few things with the footer:
- More professional look
- Obvious that the site is part of the Ohso network
- Trademarks and copyrights for Canonical and Ubuntu
- Links to other sites in our network and social pages
- Links to static pages
I can’t really say much more about the footer other than it looks really good!
The to-do list before launch
Overall, I feel the site is quite pleasing to the eye and a big improvement over the last site in terms of design. I think that we have established a unique look and feel, elements of which we will be able to use across many sites to give an excellent network consistency. I am pleased with how the this website has turned out, although there are a few bugs to iron out here and there. We launched the site on the date we set months ago, which is really good – sticking to the schedule without delays is a promising start for a small company like Ohso.
I love the site and I hope you guys do too, thanks for reading how it was created. We’ve got a lot more planned for the rest of 2010, so unfortunately we can’t celebrate just yet. Getting this website out the door is a huge milestone, but it’s back to work for us!
Ubuntu Gamer coming soon…?
For those more technically inclined, Niall (our web developer) will be posting an article about the challenges of creating a new website and moving service and server soon while keeping everything intact with (not much) down time.
Follow me on Twitter! I often tweet new ideas and upload teasers of designs I’m working on.
Related posts:
Pingback: OMG! we have a new site!