To follow on from my last post and to extend the new ‘Show + Tell’ category we’d like to take time to show you work we have recently completed for the Ikon Gallery. For this article, we’d like to focus on the development of the calendar within the new Ikon website and explain how this single element shaped the site as a whole.
For any events based organisation it is paramount that events — past, present and future — can be referenced easily. This was the first key problem we identified with their existing site. It is very difficult to find out what’s currently on and what’s upcoming. Events are scattered around various disparate areas of the site. During the research phase of the project, we concluded that poor event navigation is a common problem in many other gallery websites. Our primary goal was to consolidate all the various events into a single calendar.
Recently we've been getting quite uninspired by the state of web design. The web has become a bland swill of top page headers and 2 column layouts. One site looks just like the next. From a design perspective, we wanted the design of the calendar influence the design of the entire site, not just be a by product of a design direction. Generally we approach most jobs this way, we find a hook and then build upon that. At the same time we realise the site will be used daily by all kinds of people; the calendar and design of the site needed to be accessible and usable. With all this in mind we began thinking, sketching, refining. Rethinking, re-sketching and re-refining…
We didn't want to use a block date type of calendar, instead wanted to focus more on event blocks and time lines. As already mentioned, we wanted the calendar to influence the design of the site; to be a piece of design in itself. By sketching out ideas we explored how such an idea could work. We started visualising how varying the size of each event block in relation to it’s time span could work. Could this work full screen. Could events layer each other? How would we incorporate date references? Could time lines sit on top of every page in the site?
Hand drawn sketches became quick computer sketches. When designing for interactive media it’s essential to be able to imagine a design in action. How will it work? Ask yourself what will happen if… Being objective and thinking critically at this early stage saves a lot of wasted time prototyping time later.
The above ideas represent a sample of the many initial graphic prototypes. They explore the large format calendar idea. At this stage we weren't concerned with colour or typeface — just the way it could work. Thinking critically we concluded the top approach could be problematic in use; how would each block become focussed when they overlap so much? Where would the event details go on blocks on the right side of the time line?
The approach we adopted was to vertically layer the time lines down the page. We liked how the events worked primarily as a list and also as a readable series of time lines. We could see this working and at the same time being easy to read and understand. It was at this point we began to design the site.
Initial design translations of the calendar. At an early stage we realised these weren’t shaping up as we expected. They were too much like a series of time lines and not that readable. Further exploration resulted in the design route below.
A grid system developed where every 30 pixels represented 1 day. Starting from the far left (the current day) the calendar would display the next 30 days worth of events — a what’s on this month guide. We liked the bold approach and way the event blocks would drastically change the page design each day.
Once we had developed our grid system we then repeatedly refined the calendar simplifying elements and making it easier to read and understand. One key feature was the introduction of a subtle beige overlay over the majority of the calendar. The area without represented the current day. Events on that day were instantly recogniaable by the bright blue colour. We liked how worked both as a list and as a visual calendar.
The design above is the final approved calendar layout. We added smaller details like weekend blocks so the can easiy reference weekly cycles. Because the entire calendar is built in Flash the user can navigate through time quickly. The feedback is instant, you can see the date blocks advance 14 days with each click of the mouse. Naturally a non Flash version of the calendar was made.
The graphic above highlights the 30 pixel and 90 pixel grids. With a solid grid in place the design of the rest of the site was relatively straightforward. The screens below show various pages and how they are constructed based on the calendar’s binding influence.
Right now the site is being populated with content. It’s exciting to see real data being added. It should go live at the end of September / early October. I hope you found this show and tell session informative and useful. Let us know what you think by leaving us some feedback. If you like this, then we will do some more.