O processo de desenvolvimento de uma tela

O processo de desenvolvimento de uma tela

Existe hoje no mercado uma grande quantidade de empresas especializadas no desenvolvimento de sites e aplicações web, bem como algumas empresas de desenvolvimento de software ou agências de comunicação que têm pessoas capacitadas para executar esse tipo de projeto.

Quando detectada a necessidade do desenvolvimento de um site ou aplicação web, a empresa que tem essa necessidade deve passar todas as informações relevantes ao projeto para a empresa que vai executá-lo. A empresa responsável pelo seu desenvolvimento deve analisar muito bem essas informações e utilizar pesquisas para complementar ou mesmo certificar-se da validade dessas informações.

Um projeto de site ou aplicação web envolve muitas disciplinas em sua execução, pois são diversas características a serem analisadas e diversas as possibilidades apresentadas pela plataforma. Por exemplo, devemos conhecer muito bem as características do público alvo, pois ele define qual a melhor abordagem para definir a navegação, tom linguístico e visual a ser adotado, entre outras. A afinidade do público com a Internet e o computador pode inclusive definir o tipo e a intensidade das inovações que podem ser utilizadas.

Por isso, a primeira etapa do desenvolvimento do projeto fica a cargo da área de User Experience Design (UX) ou Interaction Design (IxD), normalmente composta de pessoas com formação na área de comunicação. Essa equipe, ou pessoa, analisa e endereça uma série de informações da característica humana do projeto, definindo a quantidade, conteúdo e localização de cada informação.

Algumas das motivações e práticas de Design de Interação e Experiência do Usuário são conteúdo do curso Design de Interação, Experiência do Usuário e Usabilidade. O resultado do trabalho dessa equipe é uma série de definições sobre a navegação (mapa do site) e um esboço de cada uma das visões, que são as páginas, e visões parciais como, por exemplo, os diálogos de alerta e confirmação da aplicação. Essas visões não adotam nenhum padrão de design gráfico: são utilizadas fontes, cores e imagens neutras, embora as informações escritas devam ser definidas nessa fase do projeto.

Esses esboços das visões são o que chamamos de wireframes e guiam o restante do processo de design.

Com os wireframes em mãos, é hora de adicionar as imagens, cores, tipos, fundos, bordas e outras características visuais. Esse trabalho é realizado pelos designers gráficos, que utilizam ferramentas gráficas como Adobe Photoshop, Adobe Fireworks, GIMP, entre outras. O que resulta desse trabalho que o designer realiza em cada wireframe é o que chamamos de layout. Os layouts são imagens estáticas já com o visual completo a ser implementado. Apesar de os navegadores serem capazes de exibir imagens estáticas, exibir uma única imagem para o usuário final no navegador não é a forma ideal de se publicar uma página.

Para que as informações sejam exibidas de forma correta e para possibilitar outras formas de uso e interação com o conteúdo, é necessário que a equipe de programação front-endtransforme essas imagens em telas visíveis e, principalmente, utilizáveis pelos navegadores. Existem diversas tecnologias e ferramentas para realizar esse tipo de trabalho. Algumas das tecnologias disponíveis são: HTML, Adobe Flash, Adobe Flex, JavaFX e Microsoft Silverlight.

De todas as tecnologias disponíveis, a mais recomendada é certamente o HTML, pois é a linguagem que o navegador entende. Todas as outras tecnologias citadas dependem do HTML para serem exibidas corretamente no navegador e, ultimamente, o uso do HTML, em conjunto com o CSS e o JavaScript, tem evoluído a ponto de podermos substituir algumas dessas outras tecnologias onde tínhamos mais poder e controle em relação à exibição de gráficos, efeitos e interatividade.