The Void is an online magazine established in 2007, it is focused on delivering premium articles, interviews and reviews on music, film, wrestling, games and more.
I originally worked on the project several years back, but was never really satisfied with the direction the project took. Using modern web design practices I was able to develop a website with strong brand identity and presence in a digital space. Before work could begin I needed to identify what the client wanted:
The redesign needed to reflect the changing nature of the site. What was previously just a blog, had become a fully-fledged online magazine with talented writers and a fast-growing readership; the aesthetics needed to reflect that. I wanted a design that complemented the fun, yet intelligent,nature of the content, with the ability to incorporate large imagery and really showcase new articles on the homepage.
Modernising the brand
The Void brand was the starting point for the re-design of the website. The colours for the site felt tired, and in need of updating. By using Colour Lovers service I was able to create a new colour scheme which felt fresh, whilst maintaining a sense of identity. I would always advise trying to address this sooner rather than later as it will set the tone for a design moving forward.
Once the colour scheme was settled upon, the fun could really start. The new logo brought a mature feel to an existing brand. The typeface emphasised by its unique, cult appeal, which the void was entering into, with great effect.
Sketching the website
The best place to start with the website redesign was a blank page. Using the 960 grid system sketch sheets, the initial concepts consisted of working out the content hierarchy and focus. The sketch below shows the very rough original ideas, the beauty of sketching is the freedom to explore ideas, even if they never come to fruition.
Wireframing the design
Once a clear direction had been mapped out the next phase was to take the sketches and turn them into something more concrete. At this point I turned to Go Mockingbird, a free online wireframing tool. The aim of the digital wireframe is to put a precise context to the ideas which have been sketched out, dimensions and spacing can be given more focus on a technical level.
At this point Photoshop was opened up and the wireframes were fleshed out using the modern web design practices. I was keen not to overwork the site’s design, as I felt this was something which had worked against the last design. So instead I wanted to get as much feedback on the design as possible.
Using Forrst to gain critical feedback
In its own words “Forrst helps you improve your craft as a developer or designer. Share your work, get feedback, and grow“. Having been an active member of this community I have seen it grow and produce some exceptional pieces of work. So where better to look for advice on improving my own design.
A prime example of this came when I was working on the navigation UI for the site, unable to decide on the best approach I turned to the community for guidance. The two options below presented a dilemma, but creative individuals Russel Jones and Gary Garside aided me in deciding on the darker UI, a decision which paid off with great effect.
If you are a creative professional in any capacity I can’t stress how useful sites like Forrst are for helping to improve, if you can approach it with an open mind you can greatly benefit from what it offers.
From Photoshop to working prototype
Once the design concept has been completed and signed off, the next step was to create a working prototype of the site. Keen to create a site which would be a flagship for online magazines I decided to use the HTML5 Boilerplate framework, with Modernizr to polyfill any cross browser inconsistencies. Creating a website prototype away from any platforms meant that I could create clean semantic markup without getting bogged down with coding. This also meant cross browser testing was a snap.
Porting the design to WordPress
The Void has been running on WordPress since 2007 and despite some of the stigma arising around WordPress, I still find it a powerful publication platform, the client was also very comfortable with using it and thus were his writers, so it made sense to port the working prototype into a WordPress theme. One of the great upshots to this is the bespoke features which I could allow the client to use out of the box. These included:
- Custom tweet of the week segment, which could be updated by the client
- Advertising widget for sidebar and in post
- Custom 404 control
- Post slider control
- Bespoke twitter widget
- Custom notifications
The Final product
The site has been launched for several months and the overall result has received very positive feedback.
Conclusions
For me this project has been a great success, but what really matters is how the client found the end result, and in his own words:
It was a tall order, but Phil was able to make it happen. When he first unveiled the new version of The Void, I was blown away. He had understood exactly what I wanted, and incorporate elements that I didn’t even realise I wanted. The level of control over every element of the site is unlike anything else I have encountered, and Phil has considered the user experience every step of the way. There is not a single part of the site that doesn’t have a solid rationale behind it, and it’s now easier than ever to navigate, for staff and users.
The continued success of the website will be measured by tools such as google analytics and website optimiser tools. But for me this project has been a great experience in working with a client and producing something I am proud of and keen to watch grow from strength to strength.
May 1st, 2012
Very nice tutorial, It helps me alot. Thanks for writing for us
« Reply