About once a year we like to build a site for a community group or charity that would otherwise struggle to get the funds together to really benefit from a top-end website. To do this we either discount very heavily (there’s a new site for the Whitley Fund for Nature coming soon) or we donate the site entirely.
This year we donated some of our time and energy to Crosby, Liverpool’s Plaza Cinema. In part they were selected because we’d just missed out on the running to redevelop the FACT website after having made the shortlist. We had heads full of great ideas for the presentation of cinematic information and schedules and we fancied implementing them. Rob, the designer and developer of this site, had just moved into a new house around the corner from the Plaza Cinema and couldn’t help noticing that their site could benefit from our skills. An idea was born, some calls were made, and a plan fell into place.
- Full Web Design
- Development of sophisticated WordPress theme
- Extension of Events Plugin to handle complex cinema schedules
- Development of TheMovieDb.org API plugin to improve workflow
- Custom taxonomies
- User training
- Ongoing user support
- Links to newsletter subscription systems
- Ongoing content management support
A cinema website design is a tricky thing to get just right – after all, you need to be able to easily present complex scheduling information (what’s on, what’s coming soon, etc) whilst at the same time allowing the films to sell themselves. We wanted to create a cinematic experience within the browser quite unlike the surprisingly poor visual experience of most cinema websites.
The design language within interconnect/it is very much based upon typographic systems following mathematical structures. There’s not only a grid of columns, as is common on websites, but a carefully structured typographic scale allowing for the creation of vertical rhythm.
With the strong typographic there is little need for graphical frippery and instead you can allow the text and movie images to really stand out. On the movie pages we use large backdrop images, pulled in automatically from the TheMovieDb.org, to create a visually bold statement with very little effort from the site administrators.
On top of this there is a dynamic feel to the site where hovering over film names changes the backdrops, and clicking them has the feeling of dimming the lights while the film trailer is pulled in from YouTube. The feeling of being at the cinema is reproduced in these actions.
Not only is the site visually powerful on a large screen or laptop, it changes itself should you have a small screen such as a telephone or tablet. This responsive design allows for a simplified presentation whilst retaining all the important information.
One key element we focus on at interconnect/it is that visual design is nothing without a good workflow for the people who assemble the site. A CMS should never slow down or stress the user or visitor, and we look at what takes up their time and what we can do to save it. In this site’s case, the ability to automatically pull in movie descriptions, images and taxonomies such as actors and directors means that a lot of time is saved in creating the site’s content. It used to take about an hour to create a film listing whereas it now takes around five to ten minutes to not only list the film, but allow visitors to view trailers and see the key people involved.
This video shows how the workflow comes together:
Visit the Plaza Cinema website and see for yourself why it’s a step forward in cinema website design.