Jun
27
Por:
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
Procure por: Livros, Geladeira, Multifuncionais, Kingston 4Gb, Óculos escuros, Walk Talkies, Micro System, Lost 3ª Temporada (DVD)
Tags:
- Arquitetura da Informação
- Desenvolvimento em Camadas
- Design Conceitual
- Interface
- Processos de Criação
- Profissão Web
- Wireframes
Artigos relacionados:
- Os Processo de criação e desenvolvimento de um projeto na web – Parte 4
- Profissão: Web Designer
- Os Processo de criação e desenvolvimento de um projeto na web – Parte 2
- Designer de Interfaces
- Os Processo de criação e desenvolvimento de um projeto na web – Parte 3
- Os Processo de criação e desenvolvimento de um projeto na web – Parte 7
- Curso grátis sobre XSLT
- Profissão Web Entrevista: Henrique Costa Pereira
- Univali abre inscrições para graduação em design de jogos
- Extensões para Firefox – MeasureIt
1° Cid 4 de July de 2007 às 3:38 pm
Muito bom Thiago!
Você poderia colocar um link para um modelo de wireframe… Seria interessante o público visualizar um exemplo deste documento que é importantíssimo no processo de desenvolvimento de um projeto web.
[ ]s