Etapas Produtivas de um Website

1. iMasters - Por uma Internet mais criativa e dinâmica 01/04/09 09:16
Fabiano Pereira Sexta-feira, 08 de fevereiro de 2008
Etapas produtivas de um website
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
http://imasters.uol.com.br/artigo/7920/desenvolvimento/etapas_produtivas_de_um_website/imprimir/ Page 1 of 5

2. iMasters - Por uma Internet mais criativa e dinâmica 01/04/09 09:16
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
http://imasters.uol.com.br/artigo/7920/desenvolvimento/etapas_produtivas_de_um_website/imprimir/ Page 2 of 5

3. iMasters - Por uma Internet mais criativa e dinâmica 01/04/09 09:16
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
http://imasters.uol.com.br/artigo/7920/desenvolvimento/etapas_produtivas_de_um_website/imprimir/ Page 3 of 5

4. iMasters - Por uma Internet mais criativa e dinâmica 01/04/09 09:16
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.
http://imasters.uol.com.br/artigo/7920/desenvolvimento/etapas_produtivas_de_um_website/imprimir/ Page 4 of 5

5. iMasters - Por uma Internet mais criativa e dinâmica 01/04/09 09:16
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!
http://imasters.uol.com.br/artigo/7920/desenvolvimento/etapas_produtivas_de_um_website/imprimir/ Page 5 of 5