January 15, 2010 from fabiano's blog
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:
Emptees
Strange Beautiful
Volumedia
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
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.
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.
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
basic CSS already with some definitions of colors and spaces.
Started to work with header elements, shades and gradients.
used lots of CSS3 at the shades and Round Corners
Header detail, it gave us a lot of work to refine and organize the content.
Some 'last minute' details.
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
