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.

Renegade is a stylish, clean, free to download Photoshop PSD. This design would make a great online publication. The PSD includes the 960 grid system used to create it, along with clearly labeled folders and layers.

I big thanks to Orman Clarke for some of the UI elements.

Download PSD

After 3 flat tyres, 2 broken gears, 1 wipeout and a lot of lycra myself and 3 others are in the final stages of preparation for a charity cycle for MS Society. We will be cycling from London to Paris, a gruelling 260 mile trip to be completed over 4 days commencing on August 24th.

I am not often one to participate in charity events, the thought of jumping head first into a bath tub full of baked beans does not appeal to me, but when I heard about this great cause I thought I should take it upon myself to get into shape and raise as much money as possible for a great cause.

Our aim is to raise awareness for a charity that does so much great work but doesn’t have the same presence as other charities. One of the riders has first-hand experience with the support and advice provided by the MS Society due to a family member now being in the advanced stages of this degenerative disease.

We are very close to reaching our target of £2,000 and would be very grateful to anyone who can make a donation, no matter how big or small.

If you can find it in your hearts (and bank accounts) please give when you can!

Sponsor me

]]> http://theodin.co.uk/blog/charity/london-to-paris-charity-cycle-for-ms-society.html/feed 1 http://theodin.co.uk/blog/charity/london-to-paris-charity-cycle-for-ms-society.html http://feedproxy.google.com/~r/co/VazT/~3/CI4pSeyX4ZY/tagzy-tagging-jquery-plugin.html http://theodin.co.uk/blog/jquery/tagzy-tagging-jquery-plugin.html#comments Wed, 13 Jul 2011 21:42:30 +0000 philip beel http://theodin.co.uk/?p=2604 Tagzy is a jQuery plugin which enables you to add a highly visual tag input to any web page quickly and easily. If you have ever signed up for soundcloud or forrst you may have already encountered this approach. Try …]]>

Tagzy is a jQuery plugin which enables you to add a highly visual tag input to any web page quickly and easily. If you have ever signed up for soundcloud or forrst you may have already encountered this approach.

Try the demo

How to use this plugin

Setting up tagzy is quick and easy. First call in the jQuery framework and the tagzy plugin like so:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tagzy.js"></script>

Next create a hidden input which will serve to hold your comma seperated list of tags like so:

<form id='myForm' name='myForm' method='get' action='#'>
  <input type='hidden' name='tagged' id='tagged' />
</form>

To activate the tagzy plugin simply call it on the hidden field like so:

$(function() {
    $('#tagged').tagzy();
});

Download the plugin

You can download and use this plugin for free, however please be sure to read the instructions above clearly before posting any questions or comments about the plugin. Tagzy is hosted on github, so if you see any ways to improve or develop it further please get involved.

Download Tagzy

I would like to say a special thanks to Dan Whitfield for helping to put the finishing touches to this plugin.

I bought an A4 wacom graphics tablet sometime ago to get back into drawing. One of the first things I created was a superhero. Aside from this I never really did much with him. So I thought this would be a great opportunity to give him away for free.

Ideal as a website mascot or something more, this superhero is extremely easy to customise. The layered PSD comes in full size uncropped with no copyrights. Please feel free to download and share.

Download PSD

After a long break I picked back up on my fancy select options interface experiment. I was really inspired by the UI elements that zhanna provided for free over on forrst. I always liked the way Envato used large beautiful interface elements to navigate around their sites, my initial concepts draw from Themeforest quite heavily.

Big and beautiful interfaces

In modern web design form interaction is very important. Toolboxes such as jQuery UI have made up for the gaping holes of bad usability, but there is still a requirement for websites to handle the fabled drop down box and text input. If you have ever attempted the interactions with an iphone or ipad you will have seen a noticeable difference in the way interactions are handled. With my experiment I want to create something which not only looked good but felt enjoyable to use. Something tangible and clean.

Try the demo

Useability Considerations

More than just looking great it was important that the form could stand up to concerns over JS support and practical concerns over wide scale use. Where possible I have used HTML and CSS3 with a peppering of jQuery. Should the page be loaded on a browser which does not have javascript enabled there is a fallback and a standard drop down will be displayed. My main concerns are over the lack of form labels, something I would like to incorporate moving forward.

A sprinkling of jQuery

The real magic, if there were any, is the use of jQuery to control the actions of the select options. The code for which can be seen below.

//-------- populate form options
 $('#title li a.selected, a.trigger').live('click', function() {
 //check if the options are visible
 if( $('#title li a.option:visible').length > 1) {
 //hide the options if currently displaying
 $('#title li a.option:not(.selected)').hide();
 } else {
 //show the options if hidden
 $('#title li a.option:not(.selected)').show();
 }
 return false;
 });
 //check for selecting a new option
 $('#title li a.option:not(.selected)').live('click', function() {
 //change over the selected class
 $('#title li a').removeClass('selected');
 //apply this to the new selection
 $(this).addClass('selected');
 //shuffle the new selection to the top of the page
 $(this).parent().remove().prependTo('#title');
 //update the select option
 $("input[name='option']").val( $(this).attr('title') );
 //slide up the selected option
 $('#title li a.option:not(.selected)').hide();
 return false;
 });

Download the work in progress

You can download the work in progress from github, please feel free to fork it and add you own thoughts and suggestions, this is by no means a final product and there is plenty of room to explore this concept further.

Download Fancy Form