In the last 24 hours I have started work on a new web design project for The Isis Magazine based in Oxford. I managed to get the design gig through a friend at university who has previously written for the magazine (many thanks again to Helen) and its probably one of the most prestigious and, in many ways ambitious, projects that I have embarked upon.
To best document the project it would be best to provide a little background to Isis (handily provided from its wikipedia page). The Isis magazine was founded in 1892 at Oxford University and has traditionally been a rival to the Cherwell newspaper which, coincidently, many of my friends at university write, or have written for.
Since its founding in 1892 the magazine has been starkly transformed from the weekly publication which struggled to acknowledge the equality of women up until 1935 when the first female “idol” was published in its traditional “idols” section. Through a thoroughly leftist mindset and much financial turmoil the Isis has become a termly publication that has carved out a niche in Oxfordian journalism by providing quality and sophistication right down to the quality of the paper it is printed on. Notable former editors of the Isis include: David Dimbleby, Michael Foot, Chris Huhne and George Osborne.
It is thus my task to renovate what appear to be a slightly outdated WordPress based website into something that is worthy of the illustrious past that the Isis embodies.
The brief provided by editors Tom and Rosie initially leaves a fair bit of room for creative freedom with the main stipulations being: a grid based navigation system, articles divided into specific sections, an events page, access to current and past issues and advertising space.
A tile/grid (or panel) based system is becoming quite popular in modern web design, especially with the rise of ‘Responsive Design” outlined by Ethan Marcotte in the seminal article “Responsive Web Design“.
Examples in popular design also include the formerly-named ‘Metro’ UI designed by Microsoft for Windows Phone 7 and the soon to be released Windows 8. The ethos of tile-based design is to provide simplicity of navigation regardless of the input of output device (think of the difference between navigating on an iPhone than to using a mouse and keyboard). This simplicity; however, does not come at a cost of functionality. The beauty of tile-based interfaces is the tiles themselves can contain information and functions that would otherwise have been contained within fiddly controls. In a world where touch screens are a at a point of overtaking regular mobile and computer input methods in terms of everyday usage it is imperative that the interfaces we design cater to all methods of input and tile-based design is one way of achieving this.
At the beginning of this project I really want to focus on the tile-based navigation implementation as there is the chance to kill off two (or possibly three) birds with one stone. The initial idea is to incorporate the mandated article sections into their own distinct tiles available at the top of the homepage (but nowhere else) to initially alert new visitors to the breadth of content available. The decision not to include the tile on any further basis comes down to a focus on content throughout the website. It is far more important to have the content chosen by the user available straight away on further pages rather than making them have to scroll through a grid every time they wish to view an article.
Here is the near-end result after a couple of hours of work:
Not visible in this image are hover based CSS effects which allow the text on the tiles to glow and the responsive movement of the tiles in accordance to what screen size the web browser is operating from.
Further changes are likely to occur, even to this initial design, but for the minute I’m pleased with the day’s work and look to move forward onto other parts of the design.