01/04/09 09:16iMasters - Por uma Internet mais criativa e dinâmica

Page 1 of 5http://imasters.uol.com.br/artigo/7920/desenvolvimento/etapas_produtivas_de_um_website/imprimir/

Fabiano Pereira Sexta-feira, 08 de fevereiro de 2008

Etapas produtivas de um websiteEste 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 afundo, 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, linguagense 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 eobjetivas. 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 equipede 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 partesdo site dinâmicas, com conteúdo atualizado constantemente, muitas vezes permitindo uma grandeparticipaçã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

01/04/09 09:16iMasters - Por uma Internet mais criativa e dinâmica

Page 2 of 5http://imasters.uol.com.br/artigo/7920/desenvolvimento/etapas_produtivas_de_um_website/imprimir/

Briefing

Levantar, junto ao cliente, informações precisas sobre o que se espera do site. Esta reunião deve ser umbate papo, evitando estruturas formais de perguntas e respostas, pois, assim, consegue-se muito mais docliente 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 daspessoas?

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

Linguagens

As linguagens de comunicação, quando bem definidas, resultam num bom retorno para o cliente definidocomo 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 linguagemvisual.

b)Conservadora (madura): não deve causar impacto por recursos visuais ou informalidade nalinguagem. 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. Ascores são suaves, fluidas. As imagens comunicam tranqüilidade, suavidade, beleza. Tudo é limpo, osespaços não são totalmente preenchidos, permitindo que a página "respire". Sites de beleza e estéticaseguem este padrão.

d)Over (forte): também diz respeito aos aspectos visuais. Aqui, ocorre o inverso do "clean". As coressão fortes, agressivas, pulsantes. Imagens em ângulos e enquadramentos inusitados, uso livre degrafismos 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 queserão utilizadas, até mesmo para se ter uma melhor idéia "orçamentária" do projeto. Abaixo, asprincipais necessidades de um web site e exemplos de tecnologias e ferramentas para executá-las:

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

Corel

Illustrator

Inkscape

01/04/09 09:16iMasters - Por uma Internet mais criativa e dinâmica

Page 3 of 5http://imasters.uol.com.br/artigo/7920/desenvolvimento/etapas_produtivas_de_um_website/imprimir/

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

Pesquisas

01/04/09 09:16iMasters - Por uma Internet mais criativa e dinâmica

Page 4 of 5http://imasters.uol.com.br/artigo/7920/desenvolvimento/etapas_produtivas_de_um_website/imprimir/

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

a)Pesquisar concorrência: quem é a concorrência? Qual o seu perfil? Que sites possuem? Queestratégias trabalham em seu sites? Que colocação possuem no mercado? Quais os pontos fortes? E osfracos? Oferecer, por meio de pesquisa, a informação do que ainda não se fez, ter a real noção domercado 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 interessamdentro do contexto do site.

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

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 domarketing, 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 degalinha 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 dentrode um contexto maior. Muito mais do que "quadradinhos" com nomes de páginas escritos dentro, ummapa de site permite uma visualização global e visual do que se pretende, tornando fácil e visual osprocessos 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, aarquitetura da informação passa pelo processo de separação do conteúdo, da condução do cliente pelosite, dos túneis de navegação, estruturas lineares e não-lineares de navegação, visando a criação de umweb site intuitivo, que ajude o visitante a encontrar tudo o que deseja da forma mais direta e racionalpossível. O profissional envolvido com este tópico dedica-se a utilizar o principal conteúdo da web deforma 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 suascaracterísticas (textos curtos, rápidos, sintéticos, utilização do LEAD Definir e escrever todos os textosnum bom editor, corrigir possíveis erros (utilizar manuais de estilo e redação )antes de aplica-los naspáginas. Evitar escrever textos diretamente no editor de códigos, separar esta etapa da produção.

01/04/09 09:16iMasters - Por uma Internet mais criativa e dinâmica

Page 5 of 5http://imasters.uol.com.br/artigo/7920/desenvolvimento/etapas_produtivas_de_um_website/imprimir/

f)Cores:

A definição de cores de um site pode vir de vários aspectos, que vão desde as tonalidades padronizadasde uma empresa até o sentido conceitual que cada cor carrega por si própria. Existem teorias das coresgenericamente 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 comocada 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? Omarketing, mais uma vez, deve definir o tipo de linguagem a ser utilizada e a maneira de se abordar ovisitante 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 serpolida, 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 imagenspodem 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 nodesign 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-seuma ferramenta típica de escritórios como o Power Point ou qualquer outra ferramenta voltada para acriação de aplicações em suítes de escritório, ferramentas normalmente de simples utilização, conhecidaspor 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 pelasempresas e agências de web ao redor do mundo. Porém, trata-se de algo funcional, testado e utilizadoem diversas empresas, com resultados positivos.

Não há, de maneira alguma, a intenção de propor a estrutura de planejamento definitiva, acima do bem edo mal, muito pelo contrário. Regras e bolachas nasceram para serem quebradas; sendo assim; amudança é bem vinda e sempre necessária. O "fazer web" e algo muito novo, muito recente: estamostodos "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 aoportunidade de ter algo a seguir como uma bússola de orientação para todos os que precisarem, dealguma forma.

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