É com imenso prazer que apresento o novo projeto em que participei, chama-se Refilmagem. Um site de cinema pensado para agregar em um único local todas as informações dos filmes em cartaz e as estréias dos cinemas aqui de nossa cidade, Porto Alegre. O projeto é do nosso sócio naZee e sua namorada, Eduardo e Gisele (a GisMullr!), e abaixo eu mostro pra vocês como foi este trabalho.

Quando o Eduardo veio falar comigo para participar do projeto e criar o layout do site achei fantástica a idéia, não por eu ser um cinéfilo inveterado, pois apenas assisto meus filmes e gosto de ir ao cinema, nada além disso. O que gostei foi do da proposta do trabalho, de desmistificar a idéias destes sites complexos de cinema, e trazer todas as informações em um só local, de forma simples e direta.

A idéia surgiu motivada pela frustração e dificuldade de encontrar em um único site as estréias da semana, filmes em cartaz, maiores bilheterias do fim de semana e um resumo geral do filme com o poster, trailer legendado e grade de horários. Gisele/Eduardo

Pra iniciar o trabalho, ele me enviou algumas referências de sites que aplicam conceitos interessantes, com um bom uso de tipografia, diagramação de conteúdo, comapresentação simples, e assim me fizesse entender o que ele estava querendo. Algumas referências então foram estas:

Emptees

Strange Beautiful

Volumedia

Robbie Manson

Desenvolvimento antes do Design

O site foi desenvolvido em Drupal, adoramos esse CMS, e o Eduardo tem se divertido muito com a diversidade de módulo e feito chover com eles. Ele já havia sido iniciado quando entrei, e este processo foi bacana, pois começamos a trabalhar nolayout já com uma idéia de estrutura definida.

Refilmagem é basicamente um mashup onde quase 90% do serviço é automatizado utilizando vários tipos de API's e tecnologias como yahoo pipes, yql, json e jquery. Além disso o site conta com um editor/administrador para dar o toque final e garantir o funcionamento e a qualidade do serviço. Eduardo Sasso

Drupal com CSS muit básico.

Em cima disso começou os rabiscos para ver o que poderíamos fazer mantendo aquela mesma estrutura, se iríamos testar algo diferente, como posicionar alguns conteúdos, que tipo deheader iríamos utilizar, e assim por diante.

Primeiros wireframes feitos à mão.

E claro, tendo um wireframe definido passamos por diversos testes de layout até chegarmos no design final.

Different design tests

O Fabio entrou nesse processo final também para ajudar no layout, foi fundamental o auxílio dele nessa etapa do trabalho. Quando chegamos em um modelo que gostamos, começamos então os refinamentos de design trabalhando noFireworks e CSS ao mesmo tempo. Em determinados momentos é muito mais rápido testarmos direto no CSS antes, pois é ágil e temos a noção exata de como vai se comportar no browser.

Ajustes de Design

CSS básico já com algumas definiçoes de cores e espaçamentos.

Começamos a trabalhar com elemetos no header, sombras e gradientes.

Abusamos de CSS3 para sombras e Round Corners

Detalhe do header, esse deu trabalho pra refinar e organizar o conteúdo.

Alguns detalhes feitos de última hora.

E como o Eduardo é um fã incontestável do Rocky, a participação dele no projeto era indispensável!

Esse projeto começou agora somente para nossa cidade Porto Alegre, mas em breve a programação do site será expandia para as demais cidades do país. Já estamos com essaimplementação no forno, e para aqueles que não são daqui mas querem matar a curiosidade e dar uma navegada, fiquem à vontade pra conferir refilmagem.com.br.

Design Final