janeiro 15, 2010 from fabiano's blog
É 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
Design Final
