It is a great honor for me to present you the new project that I was working on called Refilmagem. A site about movies that was planned to add in a same place all the information about movies premiers, upcoming and showtimes from our home town, Porto Alegre. The project is from our partner at Zee and his girlfriend, Eduardo and Gisele (yeap, GisMullr!), and bellow I will show you how was the whole process of this project.

When Eduardo spoke to me about this project and asked me to create the layout for the site, I loved the idea - not because I love movies, because I only go to the movies, watch some films and that is it - but I loved the concept, the approach of showing this kind of content in a simple and direct way, without all of that 'over information' and 'over colors' from other movies sites.

The idea of Refilmagem came from a great frustration and difficulty of finding in a single site all the information about the premiers, showtimes, box office of the weekends and also the film review, poster and subtitled trailer. Gisele/Eduardo

To begin the work, he sent me some sites' references that apply interesting concepts, as typography usage, content disposal, simple presentation, etc, so I could understand what he was looking for. Here are some of the references:

Web Design Case Study - Refilmagem
Emptees

Web Design Case Study - Refilmagem
Strange Beautiful

Web Design Case Study - Refilmagem
Volumedia

Web Design Case Study - Refilmagem
Robbie Manson

Development before the Design

The site was developed in Drupal, we love this CMS, and Eduardo is having lots of fun with the diversity of its modules. By the way he is being very successful with it. He had already started everything when I came along, and this process was pretty cool since we started the layout with the idea of the structure already defined.

Refilmagem is basically a mashup where almost 90% of the service is automatic utilizing many types of API's and technologies like yahoo pipes, yql, json and jquery. Besides that the site counts with an editor/admin to give a special/personal touch to assure the that the service will run smoothly. Eduardo Sasso

Web Design Case Study - Refilmagem
Drupal with very basic CSS.

After that we started some mockups using pen and paper to see what we could do to maintain that same structure, or if we were going to test something different, how we would present the content, the header we were going to use and so on.

Web Design Case Study - Refilmagem
First wireframes 'hand made'.

And of course, having a defined wireframe we went through a lot of layout tests until we got to the final design.

Web Design Case Study - Refilmagem
Different design tests

Fabio also participated in this final part of process to help with the layout, and his help was very important in this step of the work. When we found the model we all liked, we started to improve its design working on Fireworks and CSS at the same time. In some moments it's faster to test straight at the CSS before, because we can gain time and we can have a notion about how it will the the behavior at the browser.

Adjusting the Design

Web Design Case Study - Refilmagem
basic CSS already with some definitions of colors and spaces.

Web Design Case Study - Refilmagem
Started to work with header elements, shades and gradients.

Web Design Case Study - Refilmagem
used lots of CSS3 at the shades and Round Corners

Web Design Case Study - Refilmagem
Header detail, it gave us a lot of work to refine and organize the content.

Web Design Case Study - Refilmagem
Some 'last minute' details.

Web Design Case Study - Refilmagem
And as Eduardo is a huge fan of Rocky, he also joined the project!

Right now this project (showtimes, movies, etc) is available for our home town - Porto Alegre, but soon it will be available for other cities in Brazil and maybe some cities around the world. We are already working on it. If you are not from Porto Alegre but you want to take a look at the project and browse around the site, go to refilmagem.com.br.

Final Design

Web Design Case Study - Refilmagem

About the author of this post

I’m a UX / Web designer and manage business and projects at Zee. Also I love to spend some hours on our main projects Openjobs and as a writer and contributor here on Abduzeedo..

Also, you can take a look on my personal website.