Este artigo mostra uma das várias maneiras de se dividir o processo produtivo de um site web. Aqui, num primeiro momento, você conhecerá as quatro etapas básicas para depois conhecer, um pouco mais a fundo, o planejamento.

As Etapas

Podemos dividir a produção de um site web em quatro etapas principais, explicadas, abaixo, resumidamente:

a)Planejamento:

Processo que engloba todo levantamento das necessidades do cliente, pesquisas de mercado, linguagens e estratégias de comunicação, objetivos mercadológicos, entre outros.

b)Criação:

Transformação das informações e definições da etapa de planejamento em idéias visuais claras e objetivas. Definição de estruturas de navegação, de condução do usuário da página

c)Estruturação:

Uso das linguagens XHTML/CSS para efetuar a codificação do lay-out do site desenvolvido pela equipe de criação na etapa anterior. Testes de navegabilidade e de UP LOAD do site.

d)Desenvolvimento:

Aplicação das linguagens de servidor para integração do site com um banco de dados para tornar partes do site dinâmicas, com conteúdo atualizado constantemente, muitas vezes permitindo uma grande participação do usuário na página, alterando características diversas.

O Planejamento

Etapa que pode ser dividida da seguinte forma:

Tema

Sobre o que será o site? Descrever de forma sucinta e objetiva o tema geral do site

Briefing

Levantar, junto ao cliente, informações precisas sobre o que se espera do site. Esta reunião deve ser um bate papo, evitando estruturas formais de perguntas e respostas, pois, assim, consegue-se muito mais do cliente do que se espera. Apesar disso, deve-se levantar, minimamente, as seguintes informações:

a)Público-Alvo: a quem se destina o site? Qual a classe social, a faixa etária e o perfil geral das pessoas?

b)Definir o retorno esperado para o site: um site, como uma peça de comunicação, é uma ferramenta de marketing como qualquer outra, precisa de objetivos claros e bem definidos. O retorno deve ser encarado como uma meta a ser cumprida.

Linguagens

As linguagens de comunicação, quando bem definidas, resultam num bom retorno para o cliente definido como público-alvo. Apesar de haver uma grande quantidade de linguagens que podem ser utilizadas, podemos definir as principais da seguinte forma:

a)Moderna (jovem): possibilita o uso de cores fortes, experimentalismos gráficos diferenciados, linguagem mais cool, solta, livre, informal. O site da MTV é um bom exemplo deste tipo de linguagem visual.

b)Conservadora (madura): não deve causar impacto por recursos visuais ou informalidade na linguagem. Estruturas mais rígidas de navegação, de controle. Recomendado para sites de investimentos, negócios, bancos, de uma maneira geral. O site do Citibank é um bom exemplo.

c)Clean (suave): diz respeito mais ao aspecto visual do que a uma linguagem propriamente dita. As cores são suaves, fluidas. As imagens comunicam tranqüilidade, suavidade, beleza. Tudo é limpo, os espaços não são totalmente preenchidos, permitindo que a página "respire". Sites de beleza e estética seguem este padrão.

d)Over (forte): também diz respeito aos aspectos visuais. Aqui, ocorre o inverso do "clean". As cores são fortes, agressivas, pulsantes. Imagens em ângulos e enquadramentos inusitados, uso livre de grafismos fortes, experimentais. Os sentidos são agressivamente tocados, não há espaços para se "respirar", tudo é muito intenso. Sites de skateshops seguem este padrão.

Tecnologias e ferramentas utilizadas

Com base nas informações levantadas até o momento, pode-se definir as ferramentas e tecnologias que serão utilizadas, até mesmo para se ter uma melhor idéia "orçamentária" do projeto. Abaixo, as principais necessidades de um web site e exemplos de tecnologias e ferramentas para executá-las:

a) Ilustrações, logotipos, símbolos vetoriais:

Corel

Illustrator

Inkscape

b) Criação de lay-outs:

Photoshop

Fireworks

c) Tratamento de Imagens:

Photoshop

Gimp

d) Otimização de Imagens:

Fireworks

Gimp

e) Edição Visual do código:

Dreamweaver

Amaya

f) Linguagens de estruturação:

XHTML (estrutura)

CSS (formatação visual)

g) Animações vetoriais:

Flash

Ktoon

h) Linguagens de Scripts:

Javascript

Action Script(no flash)

i) Desenvolvimento:

PHP (Linguagem de Servidor Open Source)

ASP (Linguagem de Servidor Paga)

Observação: existem diversas outras ferramentas e linguagens no mercado que também efetuam tais trabalhos.

Pesquisas

Etapa destinada a levantar todos os dados necessários afim de fazer um site adequado ao perfil do cliente:

a)Pesquisar concorrência: quem é a concorrência? Qual o seu perfil? Que sites possuem? Que estratégias trabalham em seu sites? Que colocação possuem no mercado? Quais os pontos fortes? E os fracos? Oferecer, por meio de pesquisa, a informação do que ainda não se fez, ter a real noção do mercado em que se está entrando, conhecer a fundo todas as características.

b)Pesquisar o público-alvo: levantar, efetivamente, todos os dados sobre o público-alvo que interessam dentro do contexto do site.

c)Pesquisar estratégias: levantar dados sobre as estratégias que serão abordadas, analisar se já foi utilizada em outro momento (analisar e pesquisar CASES alheios), não "reinventar a roda", o que já foi feito no passado e deu certo, torna-se modelo a ser seguido, o que deu errado, modelo do que deve ser evitado.

Planejamento Estrutural do site

Com todo o extenuante trabalho acima concluído, pode-se começar a estruturar o site de forma básica, não-visual. As definições abaixo, para a surpresa de muitos estudantes de web design, são atribuições do marketing, de maneira geral:

a)Quantas páginas, links ou seções o site terá?

Isto dependerá do perfil do site, dos assuntos abordados. Um site com poucos links não é necessariamente um site de pouco conteúdo, da mesma forma, um site repleto de links e seções não é, exatamente, um manancial de boas informações sobre aquele tema determinado. Prudência, canja de galinha e bom senso não fazem mal a ninguém.

b)Mapa do site

Estrutura básica da divisão de todos os links, com todas as páginas relacionadas como subdivisões dentro de um contexto maior. Muito mais do que "quadradinhos" com nomes de páginas escritos dentro, um mapa de site permite uma visualização global e visual do que se pretende, tornando fácil e visual os processos de alterações, aprovações e definições genéricas.

c)Arquitetura da Informação:

Este tema daria um novo artigo por si só, de tão amplo e complexo. Definindo sucintamente, a arquitetura da informação passa pelo processo de separação do conteúdo, da condução do cliente pelo site, dos túneis de navegação, estruturas lineares e não-lineares de navegação, visando a criação de um web site intuitivo, que ajude o visitante a encontrar tudo o que deseja da forma mais direta e racional possível. O profissional envolvido com este tópico dedica-se a utilizar o principal conteúdo da web de forma a extrair todo o seu potencial: o hipertexto.

e)Textos principais:

Já ouviu falar em web writing? É, basicamente, o ofício de escrever para web, respeitando suas características (textos curtos, rápidos, sintéticos, utilização do LEAD Definir e escrever todos os textos num bom editor, corrigir possíveis erros (utilizar manuais de estilo e redação )antes de aplica-los nas páginas. Evitar escrever textos diretamente no editor de códigos, separar esta etapa da produção.

f)Cores:

A definição de cores de um site pode vir de vários aspectos, que vão desde as tonalidades padronizadas de uma empresa até o sentido conceitual que cada cor carrega por si própria. Existem teorias das cores genericamente aceitas, porém este é um conceito que muda de povo para povo, até mesmo de público-alvo para público-alvo. Conheça um ótimo artigo de Wellington Carrion, sobre teoria das cores . É possível chegar-se a conjuntos de cores por meio de extenuantes pesquisas de mercado, avaliar como cada cor será aceita ou quais sentimentos provocarão em determinado perfil de público.

g)Linguagens:

Como falar com determinada faixa de público? Que termos devem ser empregados e evitados? O marketing, mais uma vez, deve definir o tipo de linguagem a ser utilizada e a maneira de se abordar o visitante durante a visita à página. O público jovem, por exemplo, pode tolerar gírias, neologismos, termos da moda e tudo mais. Porém, para uma faixa de público conservadora, a linguagem deve ser polida, cuidadosa, sem excessos. De qualquer maneira, os textos devem seguir a regra da simplicidade, da facilidade de entendimento.

h)Tipos de imagens:

Definição de que tipos de imagens serão utilizados, de acordo com a linguagem utilizada. As imagens podem possuir enquadramentos ousados, pouco usuais; bem como podem utilizar ângulos tradicionais, comportados, "corretos". Esta é uma definição importantíssima para a equipe de criação, já que no design a utilização de imagens é essencial.

i)"Pré-Site" em Programas de apresentação:

Quando necessário, pode-se montar a estrutura básica de navegação, de páginas, de links, utilizando-se uma ferramenta típica de escritórios como o Power Point ou qualquer outra ferramenta voltada para a criação de aplicações em suítes de escritório, ferramentas normalmente de simples utilização, conhecidas por profissionais de todas as áreas. Esta apresentação será um guia na elaboração do processo criativo, tomando importantes decisões sobre a estrutura do site.

Conclusões e Considerações Finais

Este é um tema extenso, que pode ser trabalhado e encarado de maneiras diferentes e distintas pelas empresas e agências de web ao redor do mundo. Porém, trata-se de algo funcional, testado e utilizado em diversas empresas, com resultados positivos.

Não há, de maneira alguma, a intenção de propor a estrutura de planejamento definitiva, acima do bem e do mal, muito pelo contrário. Regras e bolachas nasceram para serem quebradas; sendo assim; a mudança é bem vinda e sempre necessária. O "fazer web" e algo muito novo, muito recente: estamos todos "apanhando", aprendendo e descobrindo as melhores formas de trabalho.

O intuito é o de auxiliar o estudante e o profissional de web iniciante de uma maneira geral, dando a oportunidade de ter algo a seguir como uma bússola de orientação para todos os que precisarem, de alguma forma.

Comentem, mandem suas opiniões e críticas para mim . Terei o maior prazer em responder!