Quarta-feira, 27 de junho de 2007 às 22:35   (Última atualização: 31/07/2008 às 17:07:22)

Os Processo de criação e desenvolvimento de um projeto na web – Parte 4

Publicado por: Thiago Melo

Criação dos Wireframes

A primeira etapa de desenvolvimento dentro da “produção” é feita pelo Arquiteto de Informação, que cria os wireframes do projeto. Utilizados no desenvolvimento de sistemas de complexidade maior os diagramas (denominados como wireframes) e as aplicações que sintetizam as funcionalidades são exibidos em documentos com várias apresentações gráficas. No Wireframe o ideal é que não existam cores, sendo o mesmo produzido em uma paleta de tons de cinza. São utilizados em casos onde existe uma expectativa a respeito do projeto gráfico do sistema final. Isto ajuda a prevenir a confusão a respeito da experiência final da aparência da aplicação.

Com os wireframes definidos, o projeto é enviado para o Designer de Interfaces que criará o design conceitual de acordo com as informações do projeto como estrutura do site, wireframes, material gráfico, fotos, logomarca, posicionamento da marca, etc.

Design Conceitual

No design conceitual são criados a estruturação dos elementos; paleta de cores; tipografia; estilos de links, parágrafos, títulos, listagens, publicidades e etc. Muitas vezes nesta etapa o projeto passa por uma análise do Designer de Interação para implementações mais complexas de usabilidade e acessibilidade, por exemplo.

Com o design conceitual aprovado, o designer de interfaces desenvolve as páginas internas. Todas as páginas e canais especificados na estrutura do site devem ser criados. Nesta etapa deve-se levar em consideração os módulos do sistema CMS que o projeto terá para que o mesmo não fique engessado.

Interface

Depois do design de toda a interface pronta o projeto é enviado para o Desenvolvedor de Interfaces (ou Projetista de Interfaces, ou ainda, Programador de Interfaces) que será responsável pelo desenvolvimento dos códigos xHTML e CSS. Em resumo, o Desenvolvedor de Interfaces transforma os arquivos-fonte enviados pelo designer (PSD, PNG, AI, etc.) em GIF, JPG, xHTML, CSS e Javascript.

Nesta fase do projeto é muito importante que o “Interface” se reuna, se possível, com o Designer de Interfaces, o Arquiteto de Informação e o Programador do Projeto. Estas reuniões de “ponto de controle” do projeto são importantíssimas para redução de erros e para uma maior produtividade.

É importante lembrar que há uma diferença fundamental entre o Desenvolvedor de Interfaces e o Designer de Interfaces, pois possuem focos diferentes dentro do projeto. O foco do Designer de Interfaces é na apresentação gráfica enquanto o Desenvolvedor de Interfaces explora o front-end das aplicações web através do desenvolvimento de códigos semânticos e técnicas avançadas de acessibilidade.

Não é responsabilidade do “Interface” conhecer à fundo linguagens de programação e Javascript, por exemplo, mas é fundamental que este profissional saiba como integrar de forma modular a programação do site com os códigos desenvolvidos e que ele saiba disparar ações (funções) de Javascripts de bibliotecas existentes na Web, como por exemplo a galeria de fotos Lightbox.

Desenvolvimento em Camadas

O ideal em um projeto é que o mesmo tenha uma divisão entre o conteúdo e a apresentação, ou seja, desenvolver o site em camadas. As imagens relacionadas ao layout do projeto devem ser inseridas no código CSS e o conteúdo inserido no código xHTML. Um dos benefícios deste modelo de desenvolvimento é que o mesmo reduz erros e aumenta a produtividade em tempo de desenvolvimento e em manutenções futuras.

No próximo artigo: Programação

Categorias:

Compartilhe: