Estudo de Caso: Web Design - Refilmagem

É 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:

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

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

Web Design Case Study - Refilmagem
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.

Web Design Case Study - Refilmagem
Primeiros wireframes feitos à mão.

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

Web Design Case Study - Refilmagem
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

Web Design Case Study - Refilmagem
CSS básico já com algumas definiçoes de cores e espaçamentos.

Web Design Case Study - Refilmagem
Começamos a trabalhar com elemetos no header, sombras e gradientes.

Web Design Case Study - Refilmagem
Abusamos de CSS3 para sombras e Round Corners

Web Design Case Study - Refilmagem
Detalhe do header, esse deu trabalho pra refinar e organizar o conteúdo.

Web Design Case Study - Refilmagem
Alguns detalhes feitos de última hora.

Web Design Case Study - Refilmagem
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

Web Design Case Study - Refilmagem

fabiano's picture
Fabiano Meneghetti

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..



Sponsored Ads

RAWZ

Rawz is our user generated site where anyone can share their work or work with the Abduzeedo community. You can also share what inspires you, always crediting and linking the source properly. In addition to that, the best images get selected and published on the Daily Inspiration series here on Abduzeedo.

Submit image

Designed by Brazilians proudly hosted by (mt) Media Temple