CENAIC – Centro Nacional Integrado de Cursos

Webdesign

O webdesign é uma extensão da prática do design, onde o foco do projeto é a

criação de web sites e documentos disponíveis no ambiente da web.
O webdesign tende à multidisciplinaridade, uma vez que a construção de
páginas web requer subsídios de diversas áreas técnicas, além do design
propriamente dito. Áreas como a programação, adoção de webstandards,
inovações nos recursos dos navegadores em conjunto com o design gráfico,
estão em constante evolução afetando diretamente esta atividade.
A preocupação fundamental em webdesign é agregar os conceitos de
usabilidade com o planejamento da interface, garantindo que o usuário final
atinja seus objetivos de forma intuitiva.

Planejamento estratégico
Como todo trabalho de design, é necessária uma análise informacional, a partir
de um briefing. Detectar corretamente o objetivo do projeto é essencial para um
bom planejamento, de modo que as ações sejam tomadas de forma correta.
É sempre necessário definir o público alvo do site, o objetivo, os serviços
oferecidos, o diferencial para o público. A partir desses e de outros elementos
que sejam específicamente relevantes ao projeto, será definida a estrutura do
site, a tecnologia empregada e o layout.
De uma forma geral, a primeira impressão que se tem de um site é o visual,
depois o visitante busca o conteúdo, por esse motivo o primeiro passo
estratégico é definir o design visual do site.

Estrutura
A estrutura do site deve contemplar seu objetivo, tornando a experiência do
usuário a mais confortável possível. Deve-se planejar a estrutura de forma que
o usuário obtenha facilmente a informação ou serviço desejado.

Layout
O layout deve ser atraente, funcional e comunicativo. A aparência do site não
deve ser somente um agregado de elementos gráficos interessantes. É preciso
que o layout seja um elo de comunicação com o usuário, que sua linguagem
seja condizente com o objetivo do site.

Navegadores
São programas responsáveis por interpretar o conteúdo de um web site,
disponibilizando assim a interface com a qual o usuário final irá interagir. O
navegador está para o webdesign assim como o papel está para o jornal. A
grande variedade de navegadores e discrepância entre os recursos fez seus
próprios criadores caminhar em direção a um padrão comum. Atualmente é
indispensável criar sites seguindo os padrões da W3C.
No desenvolvimento do site, ele deverá ser testado em mais de um navegador
(Internet Explorer, Firefox e outros), pois o layout do site pode apresentar
diferenças em determinados navegadores, e o usuário que navega não
entenderá o que está acontecendo.
Padrões

-1-
 CENAIC – Centro Nacional Integrado de Cursos
A World Wide Web Consortium é o órgão responsável por estabelecer os
padrões de desenvolvimento para a internet. Por meio destes padrões se pode
classificar: web sites de acordo com suas características técnicas, indo além do
visual e; navegadores, de acordo com sua capacidade em atender aos padrões
definidos.

Design
Design (em alguns casos projeto ou projecto) é configuração, concepção,
criação e definição de um objeto.
De uma forma ampla o termo design, se refere a concepção de uma solução
prévia para um problema. Mas em uma acepção mais específica, design se
refere à profissão da pessoa que projeta. Como tal, tem diversas
especializações, de acordo com qual tipo de coisa é projetada. O profissional
que trabalha na área de design é chamado designer.
Portanto, é um esforço criativo através do qual se projetam todo tipo de coisas,
incluindo utensílios, vestimentas, peças gráficas, livros, máquinas, ambientes e
(recentemente) também interfaces de programas.
As especializações mais comuns são o Design de produto, Design gráfico e o
Design de moda. O design é intimamente ligado às artes aplicadas, à
arquitetura, e à engenharia, mas a concorrência profissional muitas vezes leva
à animosidade entre essas áreas.
O termo vem da língua inglesa, e isso gerou um problema de tradução. As
traduções possíveis envolvem "projeto", "desenho", "configuração" ou "forma".

Design como profissão

Devido à abrangência do termo, é bastante difícil precisar quais atividades são
ou não design. Hoje uma enorme variedade de profissões passaram a ser
chamadas de design, várias vezes de forma errônea. Entre as especializações
do design se encontram:
 Design Gráfico
o Design editorial
o Design de hipermídia
o Design de interação
 Webdesign
 Design de jogos

Projeto
Segundo o Project Management Institute, projeto é um esforço temporário
empreendido para criar um produto ou serviço único. Desta forma, um projeto
tem início e fim definidos e resulta em um produto ou serviço de alguma forma
diferente de todos os outros anteriormente produzidos.
Seu resultado pode ser:
 Um produto ou objeto produzido, quantificável e que pode ser um item
final ou um item componente
 Uma capacidade de realizar um serviço, como funções de negócios que
dão suporte à produção ou à distribuição
 Um resultado, como resultados finais ou documentos. Por exemplo, um
projeto de pesquisa desenvolve um conhecimento que pode ser usado

-2-
 CENAIC – Centro Nacional Integrado de Cursos
para determinar se uma tendência está presente ou não ou se um novo
processo irá beneficiar a sociedade.
 A singularidade é uma característica importante das entregas do projeto.
Por exemplo, muitos milhares de prédios de escritórios foram
construídos, mas cada prédio em particular é único—tem proprietário
diferente, projeto diferente, local diferente, construtora diferente, etc. A
presença de elementos repetitivos não muda a singularidade
fundamental do trabalho do projeto.
 Antes do projeto, é comum ainda o trabalhador fazer a preparação de
um Anteprojeto, que é o estudo preparatório do projeto.
 Nos contextos de software, projeto é usado com o sentido do ato de
projetar, de conceber antecipadamente. Neste caso, costuma-se
também empregar a palavra design.

Site
Um site ou sítio, mais conhecido pelo nome inglês site, de website ou Web
site, é um conjunto de páginas Web, isto é, de hipertextos acessíveis
geralmente via http na Internet. O conjunto de todos os sites públicos
existentes compõem a World Wide Web. As páginas num site são organizadas
a partir de um URL básico, onde fica a página principal, e geralmente residem
no mesmo diretório de um servidor. As páginas são organizadas dentro do site
numa hierarquia observável no URL, embora as hiperligações entre elas
controlem o modo como o leitor se apercebe da estrutura global, modo esse
que pode ter pouco a ver com a estrutura hierárquica dos arquivos do site.
Alguns sites, ou partes de sites, exigem uma subscrição, com o pagamento de
uma tarifa, por exemplo, mensal, ou então apenas um registo gratuito. Os
exemplos incluem muitos sites pornográficos, partes dos sites de notícias, sites
que fornecem dados de bolsa em tempo real e a Encyclopedia Britannica.

Tipos de Sites
Existem numerosos tipos de sites, cada um especializado em um serviço ou
uso em particular. Alguns tipos de sites incluem:
 Site arquivo: usado para preservar conteúdo valoroso, ameaçado de
extinção. Dois exemplos são: o Internet Archive que desde 1996
preserva bilhões de antigas páginas web, e o Google Groups que no
inicio de 2005 estava arquivando mais de 845,000,000 mensagens
publicadas nos grupos de discussão da Usenet.
 site de negócios: usado para promover um negócio ou serviço.
 site de comercio: para comprar pela Internet. Por exemplo Amazon.com.
 site comunitário: um site onde pessoas com interesses comuns se
comunicam uns com os outros, geralmente por chat ou grupos de
discussão.
 database: um site cujo uso principal é a procura e a visualização do
conteúdo de um banco de dados como o Internet Movie Database ou o
Political graveyard.
 site de desenvolvedor: um site cujo propósito é fornecer informação e
recursos relacionados ao desenvolvimento de software, web design e
outros do tipo.

-3-
 CENAIC – Centro Nacional Integrado de Cursos
 site diretório: um site que contem conteúdo variado o qual é dividido em
categorias e subcategorias, como o Diretório Yahoo! , o Diretório Google
e o Open Directory Project.
 site de download: estritamente usado para download de arquivos, como
aplicativos, jogos ou sharewares.
 site de jogo: um site que ele mesmo é um jogo ou um "playground" onde
muitas pessoas vêm para jogar, como Zone.com, Pogo.com, MMORPGs
Planetarion e Kings of Chaos.
 site de informação: contem informação que é voltada meramente para
informar os visitantes, mas não necessariamente para fins comerciais.
Por exemplo RateMyProfessors.com, Free Internet Lexicon and
Encyclopedia.
 site de notícias: similar ao site de informação, mas dedicado a divulgar
notícias e comentários.
 site de pornografia: um site que mostra imagens e vídeos pornográficos.
 mecanismo de busca: um site que fornece um meio de encontrar outros
sites através de palavras chaves, retornando na pesquisa breves
pedaços dos textos dos sites pertinentes. Exemplos são os buscadores
globais Google e o Yahoo!, Buscador Regional(Listão, GuiaMais) e os
Guias de Busca Local (http://www.donavera.com).
 shock site: possui imagens ou outros materiais que têm a intenção de
chocar e/ou serem ofensivos para a maioria dos usuários.
 site pessoal: mantido por um indivíduo ou um pequeno grupo (como uma
família), que contem informação ou qualquer conteúdo que o indivíduo
deseja incluir.
 blog (de weblog): site usado como diário na web, para postar
informações pessoais ou pertinentes a um determinado assunto,
atualizado diariamente.
 flog (fotolog, fotoblog, webflog ou webfotolog): site usado como diário de
fotos.
 wiki: um site que os usuário colaborativamente editam. Por exemplo a
própria Wikipedia.
 Muitos sites são uma mistura de tipos. Por exemplo, um site de negócios
pode promover o seu negócio, mas também pode disponibilizar
documentos informativos, como white papers ou manuais. Existem
também inúmeras subcategorias nos listados acima. Por exemplo, um
site pornográfico é pode ser um tipo de site comercial ao ponto que
vende assinaturas para se poder entrar. Um site de fã pode ser um site
pessoal onde o administrador está homenageando uma celebridade.
 Muitos site de negócios tem a aparência de brochuras; isto é, uma
propaganda que pode ser veiculada. Alguns sites atuam como meio de
comunicação com outras pessoas via chat.
 Sites são restritos por limites de recursos (por exemplo, a largura de
banda dedicada ao site). Sites muito grandes, como Yahoo!, Apple e
Google, usam vários servidores e equipamentos de balanceamento de
carga, como o Cisco Content Services Switch ou o F5 BigIP solutions.

-4-
 CENAIC – Centro Nacional Integrado de Cursos
Usabilidade
Usabilidade é um termo usado para definir a facilidade com que as pessoas
podem empregar uma ferramenta ou objeto a fim de realizar uma tarefa
específica. A usabilidade pode também se referir aos métodos de mensuração
da usabilidade e ao estudo dos princípios por trás da eficiência percebida de
um objeto.
Na Interação Humano-computador e na Ciência da Computação, usabilidade
normalmente se refere a simplicidade e facilidade com que uma interface, um
programa de computador ou um website pode ser utilizado. O Termo tambem é
utilizado em contexto de produtos como aparelhos eletronicos, em áreas da
comunicação e produtos de transferencia de conhecimento, como manuais,
documentos e ajudas online. Tambem pode se referir a eficiencia do design de
objetos como uma maçaneta ou um martelo

Público-alvo
Também conhecido por levantamento do perfil, segmento de mercado ou
target, o público-alvo auxilia a empresa no direcionamento que irá promover a
um determinado produto, bem como para a agência de publicidade desenvolver
suas campanhas publicitárias.
Os itens que compõem a segmentação de mercado podem ser os seguintes:
Características geográficas
 Regiões, cidades, estados, países.
Características demográficas
 Sexo
 Idade
 Raça
 Nacionalidade
 Renda
 Escolaridade
 Ocupação profissional
 Tamanho da família
 Ciclo Familiar
 Estado civil
 Religião
 Estrato social
Variáveis psicográficas
 São as relacionadas a personalidade, estilo de vida, atitudes,
percepção do consumidor.
Aspectos relacionados ao produto
 Refere-se à intensidade de consumo do produto, à sensibilidade
em relação ao preço, à sua lealdade, à marca e os benefícios
esperados.
Variáveis comportamentais
 Refere-se à influência na compra, hábitos de compra e intenção
de compra.

-5-
 CENAIC – Centro Nacional Integrado de Cursos
Layout
Layout é um esboço mostrando a distribuição física e tamanhos de elementos
como texto, gráficos ou figuras num determinado espaço.
Em relação a Web, é a determinação do desenho do site, seria uma resenha
do que será o produto final. Serve para a apresentação como uma prévia do
que virá a ser a página.
Depois do layout ser aprovado, cabe ao programador "quebrar" o layout e
adapta-lo as especificações do site.

-6-
 CENAIC – Centro Nacional Integrado de Cursos
PROJETO DE SITES WEB

Criar sites web é uma nova área de estudo. Ela deriva de disciplinas

tão distintas quanto a Engenharia de Software e o Marketing. A seguir enumero

alguns princípios de gerenciamento de projetos de sites web que serão úteis a

todos...

Perguntas a responder antes de iniciar o projeto do site

1. Quais são os principais objetivos do seu site? (Informar? Vender? Dar

suporte?)
2. Quem é o seu público-alvo primário e secundário? (descreva interesses,
necessidades, habilidades)
3. Qual é a capacidade dos usuários? (browser, velocidade de acesso)
4. O site atrairá diferentes pessoas? Quais? Quais são as suas áreas de
interesse?
5. Qual é o principal slogan do site? (a mensagem que melhor descreve seu
conteúdo)
6. O conteúdo do site é novo ou já existe em outro formato?
7. Que imagens já existentes estão disponíveis?
8. É necessário obter dados dos clientes? O quê é preciso saber? Porquê?
9. Que novas tecnologias serão utilizadas? Quais e, especificamente, porquê?
10. Que informação do site mudará? Com que freqüência e com que
abrangência?
11. Qual é a posição do produto? (compare com os concorrentes)
12. Descreva o produto como se fosse uma pessoa. (sério? estranho? jovem?
confiável?)
13. Que áreas do site precisam de atualização? Quem se beneficia com esta
atualização?
14. Pontos fortes e fracos do produto. (compare com os concorrentes)
15. Quando o site precisa estar pronto?
16. Quem aprovará o trabalho?
17. Quem hospedará e dará manutenção ao site?
18. O site funcionará durante quanto tempo?
19. Qual o orçamento para o site?
20. Quais são os planos para promover o site? Quem é responsável pela
promoção?

-7-
 CENAIC – Centro Nacional Integrado de Cursos
As treze armas secretas de quem constrói sites

1. Segmentação do mercado. Saiba qual é o seu público, conheça os

desejos de seus clientes e faça deles o seu objetivo.
2. Visão do negócio. Muitos projetistas de sites não sabem quais os objetivos
de negócio dos seus clientes. Pense em formas de usar a web de forma
eficaz para a empresa.
3. Saber dizer não. Se um cliente não se encaixa nos seus critérios, analise
se vale a pena aceitar o trabalho. Como grandes projetos são geralmente
melhores que pequenos projetos, é melhor deixar de lado alguns projetos
pequenos para concentrar-se em um projeto maior.
4. Termo de compromisso. Este documento declara o compromisso de
desenvolver o projeto, dando suas linhas gerais. É fundamental tê-lo
mesmo nas primeiras discussões, antes de se chegar a um contrato. Se
você está trabalhando sem ter ao menos um termo de compromisso, está
indo rápido demais...
5. Site do projeto. Tenha um site web sobre o projeto de cada site que você
está construindo, contendo todo tipo de informação útil (objetivos,
cronograma, tarefas realizadas, etc). Isto é uma forma eficaz de trabalhar e
de se comunicar com o seu cliente. A forma organizada de trabalhar pode
até ajudar a conquistar novos clientes.
6. Estratégia. A fase de planejamento estratégico é a mais importante do
projeto. Conheça detalhadamente o negócio do seu cliente. Clientes que
levam a Internet a sério diferenciam os bons dos maus projetistas pela
qualidade de sua estratégia.
7. Perfil do usuário. Saiba tudo sobre o seu usuário: idade, local onde mora,
profissão, tipo de família, revistas que lê, tempo que passa na Internet,
hobbies, etc. Imagine que você fosse contratatado para construir um site
que tem como público-alvo apenas 4 pessoas. Não valeria a pena descobrir,
individualmente, o quê fazer para que eles voltassem a visitar seu site?
Mesmo que o público-alvo inclua milhões de pessoas, você deve agir da
mesma forma...
8. Envolvimento do líder. Em cada projeto, existe uma pessoa na empresa
que lhe contratou que funciona como um líder, um ponto focal do cliente. Se
esta pessoa está envolvida no projeto, todos são beneficiados. Leve-o a
acompanhar todo o processo de desenvolvimento, como se fizesse parte da
sua equipe.
9. Comunicação. A maior causa para que os projetos acabem mal está na
falta de comunicação ou na má comunicação. A natureza mutante da
Internet e a rapidez na liberação de novas versões de browsers podem
confundir ou frustar qualquer um. Às vezes, basta um mal entendido em
torno de um simples termo técnico. Clientes e projetistas devem conversar
pelo menos duas vezes por semana.
10. Tratar clientes individualmente. Cada cliente precisa de atenção e
envolvimento pessoais. Se você está recebendo e-mails de mais de
cinquenta clientes por dia, está na hora de repensar seu trabalho.
11. Prazo para "fechar" o conteúdo. Se é um projeto grande, insista em não
incluir mais nenhum conteúdo nas últimas duas semanas antes do

-8-
 CENAIC – Centro Nacional Integrado de Cursos
lançamento do site. Mesmo em projetos pequenos, não deve ser menos de
uma semana. A única possível exceção são as seções de "novidades" de
algumas páginas.
12. Número de projetos. Cada grande projeto deve ter um produtor dedicado,
mas muitos estão envolvidos em vários outros projetos. Para isso, o
produtor deve ser extremamente organizado. Um bom produtor conseguirá
dar conta, no máximo, de dois grandes projetos. Mesmo assim, apenas se
os prazos dos dois não forem próximos um do outro.
13. Gerenciamento de conteúdo x Gerenciamento de projetos. Um
projetista utilizará uma ferramenta de gerenciamento de projetos para criar
o site. O cliente utilizará uma ferramenta de gerenciamento de conteúdo
para fazer a atualização diária do site, criando documentos segundo os
modelos definidos durante o projeto.

As sete falsas economias nos projetos de sites

1. "O nosso site é uma versão na Internet do nosso marketing atual. Podemos
usar os mesmos textos e gráficos de nossos folders, anúncios de jornal ou
revista."
2. "Se mais pessoas trabalharem no site, ele ficará pronto mais rápido!"
3. "A web é um lugar onde nós podemos fazer várias experiências para depois
ver o que deu certo. Vamos contratar aquele amigo nosso que faz sites nas
suas horas vagas."
4. "Documentação é uma perda de tempo e esforço..."
5. "Vamos fazer nós mesmos o projeto do site. Depois contratamos alguém
para pegar os nossos rascunhos e transformá-los em paginas web."
6. "Vamos pedir propostas de construção do nosso site a alguns projetistas e
agências de propaganda. Assim, teremos um monte de boas idéias de
graça!"
7. "Sites web não precisam de manutenção. Vamos até nos divertir fazendo
tudo por conta própria..."

O cliente tem direito a

1. Cronogramas bem feitos.

2. Comunicação constante.
3. Um contrato por escrito.
4. Notificação imediata em caso de atrasos, problemas e despesas extras.
5. Pagar somente pelo que foi autorizado.
6. Controle de horas, quando está pagando por hora.
7. Ver o projeto durante o desenvolvimento.
8. Tempo de resposta razoável.
9. Precauções relativas a segurança e privacidade.
10. Produtos que funcionam de acordo com o que foi contratado.
11. Direitos autorais sobre o conteúdo do site.

-9-
 CENAIC – Centro Nacional Integrado de Cursos
O projetista de sites tem direito a

1. Saber qual o orçamento do projeto, desde o início

2. Um perfil completo do projeto.
3. Um contrato por escrito.
4. A valorização do seu tempo (atrasos por parte do cliente custam dinheiro).
5. 25-50% do valor orçado como pagamento inicial.
6. Pagamento no prazo combinado.
7. Gerenciar seu próprio processo.
8. Compensar suas falhas.
9. Ser pago por trabalhos de consultoria ou idéias.
10. Ser informados quando estão fora da concorrência por um projeto
11. Direitos autorais sobre as ferramentas criadas para construir o site.

Pontos chaves para fechar um projeto

1. Tenha um site web informativo que diferencie a sua empresa de projetos de

sites web da concorrência.
2. Tenha um panfleto ou folder com informação sobre o seu trabalho e o
testemunho de clientes.
3. Seja a pessoa com quem seu cliente queira fazer negócio, sendo
profissional e capacitado.
4. Certifique-se de que deseja fazer negócios com seu cliente. É uma via de
mão dupla.
5. Aprenda sobre o negócio do seu cliente.
6. Indique clientes anteriores que estão plenamente satisfeitos com o seu
trabalho.
7. Não vá abaixo do seu preço mínimo, a não ser que tenha de fazê-lo ou
queira fazê-lo.
8. Não entregue uma proposta ou informação específica sobre o seu projeto
antes de ter certeza que o cliente está realmente interessado em contratá-lo
(e que não está contactando mais de três outras empresas).
9. Faça boas estimativas.
10. Não importa se você gosta ou se o cliente gosta. A única coisa que importa
é se o usuário do site vai gostar.
11. Se você está pronto para fechar o negócio, não saia sem um termo de
compromisso.

Dez segredos para produzir sites web

1. Use uma nomeclatura consistente.

-10-
 CENAIC – Centro Nacional Integrado de Cursos
2. Padronize os tamanhos dos gráficos criando uma hierarquia: títulos,
subtítulos, gráfico grande, gráfico médio, gráfico pequeno, amostras, etc.
Use o menor número de classes possível.
3. Use uma palette otimizada para as imagens em cada classe. Use
sempre a mesma palette para uma determinada classe.
4. Insira comentários nas suas páginas HTML, de forma a dar informações
para os projetistas e pessoal responsável pelo conteúdo.
5. Use exatamente os mesmos comandos em páginas diferentes para
facilitar futuras buscas e substituições.
6. Em páginas grandes, remova os comentários e elimine saltos de linha
na versão final que será publicada no site.
7. Use o máximo de recursos que sua ferramenta oferece e atualize a
versão desta ferramenta com freqüência.
8. Faça cópias de segurança do seu site.
9. Verifique como o seu site aparece tanto no Microsoft Internet Explorer
quanto no Netscape Navigator. Se possível, teste tanto nas versões 3.0
quanto nas versões 4.0 destes dois browsers.
10. Teste, teste e depois teste tudo de novo. Tenha sempre uma versão alfa
ou beta disponível para que seja possível fazer testes e dar opiniões.

-11-