UNIPLAN – Centro Universitário Planalto do Distrito Federal

Curso Superior de Tecnologia em Produção Gráfica Digital – Design

GRUPO DESAINEIRAS
GIORGIA BARRETO LIMA PARRIÃO
MARIANA SILVA MARÇAL

REFORMULAÇÃO VISUAL E TÉCNICA DO SITE DA

PLUS DESIGN, TECNOLOGIA E TREINAMENTO LTDA

Brasília,DF
Junho de 2007
 2

UNIPLAN – Centro Universitário Planalto do Distrito Federal

Curso Superior de Tecnologia em Produção Gráfica Digital – Design

GRUPO DESAINEIRAS
GIORGIA BARRETO LIMA PARRIÃO
MARIANA SILVA MARÇAL

REFORMULAÇÃO VISUAL E TÉCNICA DO SITE DA

PLUS DESIGN, TECNOLOGIA E TREINAMENTO LTDA

Trabalho de conclusão do Curso Superior

de Tecnologia em Produção Gráfica
Digital – Design.
Orientador: professor João Arthur

Brasília,DF
Junho de 2007
 3

SUMÁRIO

SUMÁRIO EXECUTIVO 5

APRESENTAÇÃO DO GRUPO 6

Mini Currículo 6
Giorgia Barreto Lima Parrião 6
Mariana Silva Marçal 6

1. INTRODUÇÃO 7

2. CONCEITOS FUNDAMENTAIS 9

2.1. Padrões WebStandards 9

2.1.1. Usabilidade e Navegação 9

2.1.2. Acessibilidade 10
2.1.2.1. Projeto W3C 11
2.1.2.1.1. W3C 11

2.1.3.Semântica 12

2.1.4. Tableless 13

2.2. Design Centrado no Usuário para a Web 14

3. APRESENTAÇÃO DO WEBSITE ATUAL 17

4. NOVA PROPOSTA 20

4.1. Características da Solução Proposta 20

4.2. Rought (RAFE) 20

4.3.Wireframe 20

4.4. Arquitetura da Informação 22

4.4.1. Áreas do Website 22

4.4.1.1. Página Inicial 22
4.4.1.2. Design e Tecnologia 23
4.4.1.3. Treinamentos 23
4.4.1.4. Clientes 23
4.4.1.5. Contato 23
4.4.1.6. Seja Plus 24

4.4.2. Mapa de Navegação 25

 4

4.5.Cor 26

4.6.Tipografia 28

4.7.Conceito Visual 28

4.8. Funcionalidade 29

4.8. Interatividade 29

4.9.Layout 29

4.10. TECNOLOGIA E METODOLOGIA APLICADA 31

4.10.1. Banco de dados: My SQL 31

4.10.2. LINGUAGENS : XHTML, PHP, CSS E JAVASCRIPT. 31

4.11. RECOMENDAÇÃO PARA A IMPLEMENTAR A PROPOSTA 32

4.12. MANUTENÇÃO E ATUALIZAÇÃO 32

5. CONSIDERAÇÕES FINAIS 33

6. REFERÊNCIAS BIBLIOGRÁFICAS 34

ANEXOS 35

ANEXO I 36

ANEXO II 41

ANEXO III 48
 5

SUMÁRIO EXECUTIVO
Desenvolvimento de um novo website, que visa implementar um novo layout
respeitando a identidade visual da empresa, aplicar os padrões Webstardads, as
normas W3C e a legislação de acessibilidade brasileira.
 6

APRESENTAÇÃO DO GRUPO

O grupo DESAINEIRAS nasceu da união das amigas e formadas do curso

Produção Gráfica Digital do Centro Universitário Planalto do Distrito Federal, Giorgia
Barreto e Mariana Marçal, com o intuito de realizarem o seu projeto final.

O nome do grupo foi escolhido baseada em suas profissões de uma forma

descontraída e criativa, condizente com suas personalidades. este nome tem o
desejo de mostrar aos seus clientes que a empresa faz seus trabalhos com paixão,
criatividade pois trabalhar com design é algo que realmente satisfaz e realizam o
grupo.

A logo possui o conceito de “borboleta”. Lagartas no início que ao saírem do

casulo se transformam em lindas borboletas, assim são as DESAINEIRAS,
Transformam as necessidades dos clientes em idéias que irão revolucionar seus
produtos. As cores fortes e os traços em forma de desenho animado dão o tom
criativo e despojado.

Mini Currículo

Giorgia Barreto Lima Parrião

Designer desde 1998, formanda do curso Produção Gráfica Digital do Centro
Universitário Planalto do Distrito Federal. Especialista em Arquitetura de informação,
Usabilidade e Acessibilidade. Desenvolvendo vários projetos web principalmente na
área governamental de Acessibilidade e Usabilidade.

Mariana Silva Marçal

Formanda de curso de Produção Gráfica Digital do Centro Universitário
Planalto do Distrito Federal - UNIPLAN. Estagiou na ANAC – Agência Nacional de
Aviação Civil de julho de 2006 a março de 2007. Cursou Design gráfico no Senac,
participou da 1ª e 2ª Semana Acadêmica de Tecnologia e Design da UNIPLAN.
 7

1. INTRODUÇÃO
A World Wide Web surgiu com o objetivo de facilitar a troca de informações
entre pesquisadores. A metáfora das páginas interconectadas por ligações
chamadas links foi proposta pelo pesquisador Tim Bernes-Lee para substituir
aplicações que disseminavam informações de forma hierárquica1. A
descentralização do hipertexto permitiria que fossem ligados documentos
localizados em qualquer ponto do mundo sem a necessidade de passar pela
sabatina de uma seqüência de menus hierarquizados. Isso facilitaria tanto o acesso
às informações quanto à sua disponibilização. A proposta inicial funcionava num
navegador baseado em linha de comando, escrito pelo próprio Berners-Lee em
1991.

Graças a essa facilidade que a Web oferecia para a troca de informações,

logo despertou interesse em empresas e veículos de comunicação. O número de
páginas publicadas começou a crescer sem parar e em ritmo exponencial desde que
a Web foi aberta para o uso comercial. Além de disponibilizar páginas, as
organizações descobriram que era possível usar a Web como interface de usuário
para aplicações, gozando da universalidade de acesso do meio. Qualquer
computador conectado à rede poderia acessá-la e não precisaria instalar programa
algum para usá-la.

As empresas de comunicação de massa viram na Web a possibilidade de

transmitir suas mensagens para seus públicos por um custo muito mais baixo do que
em outras mídias. Logo surgiram websites que disponibilizavam o conteúdo de
jornais, de revistas e de outros periódicos já existentes. Conforme a audiência e a
demanda por informações de qualidade aumentava, esses websites foram mudando
para oferecer conteúdo exclusivo pela rede, adaptando-se às características
intrínsecas ao meio como, por exemplo, a questão da baixa resolução do monitor e
conseqüente cansaço da vista na leitura contínua.

A concorrência insuflada pela injeção de capitais no mercado de Internet

provocou uma corrida pela conquista de mais audiência2. Para isso, os websites
ofereciam uma quantidade monstruosa de informações de todos os tipos, desde

1 BERNERS-LEE, Tim. The World Wide Web: A very short personal history. Disponível em:
<http://www.ibarakiken.gr.jp/www/world/shorthistory-e.html> Acessado em: 3/12/2004
2 VERAS, Paulo. Por dentro da bolha. Edições Inteligentes, 2004
 8

receitas de cozinha a agenda de eventos culturais, todas agregadas num mesmo

lugar. Foi criado o conceito de "portal da Web" para definir estes websites.

A Plus Design, Tecnologia e Treinamentos, está no mercado de Brasília

desde 2003 e desde então desenvolve projetos pioneiros na área de design e
tecnologia para clientes de peso da área privada e governamental. Sempre
atualizada com as tendências de mercado e as tecnologias mais atuais.

Visando oferecer o que há de melhor para seus clientes, se propõe a

reformular o seu website para que ele seja a vitrine de seus trabalhos, mostrando
todo o seu potencial. Após 4 anos no mercado, reformula sua filosofia e suas metas,
para se modernizar.

O presente trabalho se pretende justamente a analisar a melhor forma de

aplicar as novas tendências. O objetivo é que a solução proposta ofereça as
mesmas informações e identidade visual já existentes de uma forma mais atual,
clara e organizada, atendendo aos padrões Webstardard.

Para isso é preciso um projeto cuidadoso, que leve em consideração as reais

necessidades e costumes dos usuários.
 9

2. CONCEITOS FUNDAMENTAIS

2.1. Padrões WebStandards

O WebStandard3 é um conjunto de preocupações que passam por

Usabilidade, Acessibilidade, Semântica e Tableless.

2.1.1. Usabilidade e Navegação

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 e importante e referir-se também 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 à simplicidade e facilidade com que uma
interface, um programa de computador ou um website pode ser utilizado. O
Termo também é utilizado em contexto de produtos como aparelhos eletrônicos,
em áreas da comunicação e produtos de transferência de conhecimento, como
manuais, documentos e ajudas on-line. Também pode se referir à eficiência do
design de objetos como uma maçaneta ou um martelo

Em website busca o desenvolvimento de uma navegação adequada e

simples diminuindo a quantidade de cliques, para se chegar à informação
desejada. Permitindo o acesso rápido e direto as informações e serviços.

As etapas para pesquisas estão bem simplificadas no projeto do Website,

desde a sua localização até a sua finalização. Os caminhos percorridos pelo
usuário são bem curtos e contém histórico e informações de como continuar a
navegação, existindo links para retorno de páginas, garantindo assim a
satisfação do usuário.

3 WINKPEDIA. Site Pesquisa de Conteúdo. Disponível na internet no endereço:

http://pt.wikipedia.org
Acessado em: 04/06/2007
 10

2.1.2. Acessibilidade
Acessibilidade significa não apenas permitir que pessoas com
deficiências participem de atividades que incluem o uso de produtos,
serviços e informação, mas a inclusão e extensão do uso destes por
todas as parcelas presentes em uma determinada população.
Representa para o nosso usuário não só o direito de acessar a rede
de informações, mas também o direito de eliminação de barreiras
arquitetônicas, de disponibilidade de comunicação, de acesso físico, de
equipamentos e programas adequados, de conteúdo e apresentação da
informação em formatos alternativos.

Não é fácil, a princípio, avaliar a importância dessa temática

associada à concepção de páginas para a web. Mas os dados W3C
(Consórcio para a WEB) e WAI (Iniciativa para a Acessibilidade na Rede)
apontam situações e características diversas que o usuário pode
apresentar: 4

1. Incapacidade de ver, ouvir ou deslocar-se, ou grande dificuldade -

quando não a impossibilidade - de interpretar certos tipos de informação.
2. Dificuldade visual para ler ou compreender textos.
3. Incapacidade para usar o teclado ou o mouse, ou não dispor deles.
4. Insuficiência de quadros, apresentando apenas texto ou dimensões
reduzidas, ou uma ligação muito lenta à Internet.
5. Dificuldade para falar ou compreender, fluentemente, a língua em
que o documento foi escrito.
6. Ocupação dos olhos, ouvidos ou mãos, por exemplo, ao volante a
caminho do emprego, ou no trabalho em ambiente barulhento.

7. Desatualização, pelo uso de navegador com versão muito antiga, ou

navegador completamente diferente dos habituais, ou por voz ou sistema
operacional menos difundido. Nesse projeto aplicaremos as recomendações
para acessibilidade na web, conforme as regras e leis abaixo especificadas:

4 ACESSO BRASIL. Site Oficial de Acessibilidade no Brasil. Rio de Janeiro. Disponível na

internet no endereço: http://www.acessobrasil.org.br
Acessado em: 28/05/2007
 11

2.1.2.1. Projeto W3C

O projeto W3C5 visa tornar o Website acessível a pessoas com

deficiências, automaticamente se tornando acessível a todos os usuários. É

dividido em 3 níveis básicos que englobam todas as deficiências físicas,
cognitivas e mentais.

2.1.2.1.1. W3C
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: websites 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.

World Wide Web Consortium é um consórcio de empresas de tecnologia,

atualmente com cerca de 500 membros. Fundado por Tim Berners-Lee em 1994
para levar a Web ao seu potencial máximo, por meio do desenvolvimento de
protocolos comuns e fóruns abertos que promovem sua evolução e asseguram a
sua interoperabilidade. O W3C desenvolve tecnologias denominadas padrões da
web para a criação e a interpretação dos conteúdos para a Web. Websites
desenvolvidos segundo esses padrões podem ser acessados e visualizados por
qualquer pessoa ou tecnologia, independente de hardware ou software utilizados,
como celulares, PDAs, eletrodomésticos, de maneira rápida e compatível com os
novos padrões e tecnologias que possam surgir com a evolução da internet.

Para alcançar seus objetivos, a W3C possui diversos comitês que estudam as
tecnologias existentes para a apresentação de conteúdo na Internet e criam padrões
de recomendação para utilizar essas tecnologias. Com a padronização, os
programas conseguem acessar facilmente os códigos e entender onde deve ser
aplicado cada conhecimento expresso no documento.

Apesar de o W3C não ser muito conhecidos no Brasil, padrões seus como
HTML, XHTML e CSS são muito populares. Contudo, em muitos casos são usados

5W3C. World Wide Web Consortium, consórcio de empresas de tecnologia. Estados Unidos
da América. Disponível na internet no endereço: http://www.w3.org
Acessado em: 28/05/2007
 12

de forma errônea devido ao desconhecimento da especificação.

É um dever de todo desenvolvedor Web respeitar e seguir os padrões do

W3C, pois de outro modo poderá impor barreiras tecnológicas a diversas pessoas,
desestimulando e até mesmo impedindo o acesso a suas páginas.

2.1.2.2. Lei nº 10.098 artigo 16, de dezembro de 2000, estabelece normas gerais e
critérios básicos para a promoção da acessibilidade das pessoas portadoras de
deficiência ou com mobilidade reduzida, mediante a supressão de barreiras e de
obstáculos nas vias e espaços públicos, no mobiliário urbano, na construção e
reforma de edifícios e nos meios de transporte e de comunicação."

2.1.2.3. Projeto de Lei: PL 7432 Altera os arts. 2º e 17 da Lei nº 10.098, de 19 de

dezembro de 2000, que dispõe sobre a acessibilidade das pessoas portadoras de
deficiência ou com mobilidade reduzida, para acrescentar a acessibilidade aos
portais públicos da Internet.Estabelecendo que o poder público será responsável
pela eliminação de barreiras que dificultam o acesso de pessoas deficientes aos
portais públicos ou de interesse público na Internet.

2.1.3.Semântica

A Web semântica7 é uma extensão da Web atual, que permitirá aos

computadores e humanos trabalharem em cooperação e interliga significados de
palavras e, neste âmbito, tem como finalidade conseguir atribuir um significado
(sentido) aos conteúdos publicados na Internet de modo que seja perceptível tanto
pelo humano como pelo computador. A idéia da Web Semântica surgiu em 2001,
quando Tim Berners-Lee, James Hendler e Ora Lassila publicaram um artigo na
revista Scientific American, intitulado: “Web Semântica: um novo formato de

6PALACIO DO PLANALTO. Site oficial do Palácio do Planalto. Disponível na internet no

endereço: http://www.planalto.gov.br/ccivil/leis/L10098.htm
Acessado em: 09/05/2007
7 WINKPEDIA. Site Pesquisa de Conteúdo. Disponível na internet no endereço:
http://pt.wikipedia.org
Acessado em: 04/06/2007
 13

conteúdo para a Web que tem significado para computadores vai iniciar uma
revolução de novas possibilidades.”

O objetivo principal da Web semântica não é, pelo menos para já, treinar as
máquinas para que se comportem como pessoas, mas sim desenvolver tecnologias
e linguagens que tornem a informação legível para as máquinas. A finalidade passa
pelo desenvolvimento de um modelo tecnológico que permita a partilha global de
conhecimento assistido por máquinas (W3C 2001). A integração das linguagens ou
tecnologias eXtensible Markup Language (XML), Resource Description Framework
(RDF), arquiteturas de metadados, ontologias, agentes computacionais, entre
outras, favorecerá o aparecimento de serviços Web que garantam a
interoperabilidade e cooperação.

Ultimamente tem-se associado Web Semântica a Web 3.0, como um próximo

movimento da Internet depois da Web 2.0 que já inicia seu crescimento.

As aplicações mais imediatas para Web Semântica visam categorizar

informação e aumentar a qualidade do resultado das ferramentas de busca através
de resolução de ambigüidade e contextualização da informação.

2.1.4. Tableless

Tableless8 é uma forma de desenvolvimento de websites que não utiliza

tabelas para disposição de conteúdo na página, pois defende que os códigos HTML
deveriam ser usados para o propósito para o qual foram criados, sendo que tabelas
foram criadas para exibir dados tabulares. O termo ganhou destaque no Brasil sendo
pouco utilizado no resto do mundo.

Dentre as possíveis vantagens da metodologia, estão a diminuição do peso

da página (na realidade, o conteúdo da página é mostrado mais rápido, o que não
significa que o peso da página seja menor - isso, é claro, sempre dependendo de
como o HTML é feito) e melhora da acessibilidade - podem ser vistos em
dispositivos móveis sem necessidade de versão especial e por deficientes visuais,

8 WINKPEDIA. Site Pesquisa de Conteúdo. Disponível na internet no endereço:

http://pt.wikipedia.org
Acessado em: 04/06/2007
 14

embora não são muitos os websites tableless que carregam atualmente esta
segunda característica.

2.2. Design Centrado no Usuário para a Web

Hoje ainda é comum encontrar websites que falham até mesmo em informar
números de telefones aos seus visitantes. Isso acontece porque seus criadores não
imaginaram que alguém iria precisar dessa informação. Como não é possível
imaginar toda e qualquer necessidade dos usuários ao acessarem um website, é
melhor perguntar a eles do que eles precisam. Afinal, websites esclarecidos são
feitos exclusivamente para seus usuários e, como tais, devem estar de prontidão
para atender seu público da forma mais eficiente possível.

Além de identificar as demandas, é preciso escolher a melhor forma de supri-

las. Informação crítica para o usuário prescinde de destaque, bem como informação
com menor potencial de relevância deve estar mais atenuada.

Os primeiros passos para organizar informações são classificar e agrupar9.

Isso pode ser feito de duas maneiras: baseando-se unicamente na experiência do
profissional da equipe ou ouvindo e interpretando o usuário. A primeira é mais
rápida, mas tem menor grau de confiabilidade10. Por mais experiente que seja o
profissional, não é possível prever com exatidão o comportamento do usuário sem
observá-lo em testes, simulados ou em ambientes reais. A segunda opção também
está sujeita a desvios, mas com certeza traz maior segurança porque a chance de a
organização fazer sentido tanto para um usuário quanto para outro é grande.

Para adicionar ainda mais complexidade, a setorização não ocorre somente

na disposição dos elementos numa página, mas também na seqüência das páginas,
ou seja, na ordem de navegação. Se vai haver uma hierarquia explícita entre as
páginas, ela deve estar de acordo com essa setorização. O caminho do usuário
pode passar por três páginas, mas cada uma delas deve estar associada ao objetivo
que ele quer alcançar, do contrário não fará sentido e ele desistirá11.

9 WODTKE, Christina. Information Architecture: Blueprints for the Web. New Riders, 2002.
10 KRUG, Steve. Don't Make Me Think: A Commonsense Approach to Web Usability. New
Riders, 2000.
11 WODTKE, Christina. Information Architecture: Blueprints for the Web. New Riders, 2002.
 15

Agrupando os objetivos específicos em objetivos gerais é possível administrá-

los. Assim, teríamos uma tela e hierarquia estratificada não de acordo com as
divisões do público feitas acima nem tampouco refletindo a estrutura física da PLUS,
mas sim pelos objetivos que as divisões do público tem em comum. Por exemplo,
uma seção do website que daria conta daqueles que buscam por produção
científica, sejam professores ou alunos.

O website segmentado por público pode oferecer complicações ao usuário

quando este o acessa com um objetivo não previsto pela estrutura do website.

A única forma de impedir que isso aconteça em larga escala é monitorar o

comportamento dos usuários ao acessar o website constantemente e identificar as
mudanças nos seus objetivos para fazer os ajustes necessários.

Quando abrimos uma página com ou sem um objetivo definido, paramos nem
que sejam alguns milésimos de segundos para decidir em que link clicará primeiro.
Para fazer esse julgamento, montamos um modelo mental das opções disponíveis
seguindo a lógica percebida da página. Essa percepção não é igual para todas as
pessoas, nem mesmo para a mesma pessoa em ocasiões diferentes.

Um modelo mental é uma projeção de uma idéia que se forma em nossa

mente com o objetivo de entendê-la melhor. Essa idéia pode ser a maneira como
vamos usar, por exemplo, um martelo, navegar por um website ou provar uma teoria
científica. Dado seu caráter analítico, antes de montá-lo, precisamos arrebanhar
todos os meandros da idéia projetada e, em seguida, estabelecer relações entre
eles. Esse processo é contínuo e iterativo, ou seja, se repete progressivamente.
Nossos modelos mentais são mutáveis, mas tendem ao refinamento das relações e
papéis de cada elemento constituinte do modelo. Ou seja, a construção de um
modelo mental é um processo de estudo sobre o assunto em questão e possui uma
curva de aprendizado que pode ser lenta ou rápida.

A arquitetura da informação de um website deve priorizar a curva de

aprendizado rápida, já que websites não tem o mesmo caráter de uso contínuo do
que um aplicativo de desktop. Quanto mais rápido e precisamente se formar o
modelo mental do usuário, melhor para ele. Para esse fim, os elementos devem ser
apresentados com rótulos claros, em ordem lógica e relacionados através de
agrupamentos.
 16

Todo conceito que não puder ser simplificado dessa forma deve ser quebrado
e seus pedaços dispostos de acordo com uma estratégia pedagógica, visando o
acoplamento suave ao modelo mental em formação. Em termos práticos, a interface
do website deve ajudar o usuário a entender o que são, como estão organizados e
como se comportam seus elementos mais complexos. Quanto mais efetiva ela for
nesse intento, mais amigável.

Caso o website cumpra a missão de ensinar satisfatoriamente o usuário a

navegar por ele.

Possui características de website institucional e a partir da implementação

deste projeto se tornará um portal. Seu publico este dividido da seguinte forma:
Empresários interessados em conhecer e contratar os serviços da PLUS na área de
design e tecnologia ou alunos, professores e aspirantes aos cursos na área de
treinamento.
 17

3. APRESENTAÇÃO DO WEBSITE ATUAL

Abaixo algumas telas do website atual.

1- Página Inicial:
 18

2- Páginas Secundárias:

2.1 - Clientes 2.2- Quem Somos

 19

2.3- Contato 2.4- Produtos

 20

4. NOVA PROPOSTA
4.1. Características da Solução Proposta

O Portal da PLUS deverá ser fácil de usar até mesmo para aqueles que não
estão familiarizados com sua estrutura. Adotando o modelo de navegação orientado
a tarefas, o acesso às informações e serviços oferecidos será facilitado tornando-se
um website fácil de usar.

O projeto de reestruturação do website da PLUS poderia, dessa forma, se

tornar referência para um mercado carente de boas práticas de relacionamento com
clientes.

4.2. Rought (RAFE)

Rought (RAFE) é um esboço visual, que indica de forma grosseira da

interface e onde cada conteúdo estaria.

Abaixo o rought do website proposto.

4.3.Wireframe

Wireframes são os esqueletos dos websites, um esboço visual

 21

gerado para especificar os elementos que vão compor uma página, devem servir
como mera referência para o designer que está elaborando a página, que pode até
encontrar uma disposição melhor para os elementos dentro de sua criação web deve
ser o mais simples possível. Baseado no rought desenvolvido criamos o wireframe
do website proposto.

4.3.1. Página Inicial

4.3.2. Página Interna

 22

4.4. Arquitetura da Informação

A Arquitetura da Informação trata da forma como o conteúdo do website é

rotulado, organizado em grupos, estruturados em menus de navegação e
recuperado através de ferramentas de busca.

Ao mesmo tempo em que é feita a mudança na estrutura do portal, será

necessário também alterar e criar novas páginas, para que o conteúdo do website
esteja o máximo possível integrado à sua estrutura. Desta vez, a estratégia será de
cima-para-baixo, com a estrutura determinando o conteúdo. Porém, deve-se lembrar
que essa mesma estrutura partiu da própria oferta de conteúdo do website

O topo da página, deve conter informações significativas: o logo geralmente

fica na parte superior, à esquerda. Exceções: o tamanho, a cor ou outro recurso
substitui o posicionamento privilegiado.

4.4.1. Áreas do Website

4.4.1.1. Página Inicial

• Cabeçalho contendo assinatura visual da empresa (identificação) à esquerda,
imagem representativa e ilustrativa ao centro e menu principal (Design e
Tecnologia, Treinamentos, Clientes, Contato e Página Inicial) à direita.

• Menu da área Design e Tecnologia: Portifólio, Soluções, Produtos e Serviços.

• Apresentação da Empresa: Texto explicativo apresentando a empresa, sua

missão e filosofia.

• Destaque: Área reservada ao destaques (produto, serviço ou curso)

• Menu da área Treinamentos: Metodologia (curso presencial e on-line), Curso

presencial (Direção de arte, Acessibilidade e Usabilidade e Gerenciamento de
Projetos), Curso On-line (Web design), Cadastro (Pré-Inscrição), Área do
Aluno (área pública:Trabalhos dos alunos, área restrita: material de apoio,
apresentação das aulas e exercícios)

• Rodapé: copyprint, e selos de acessibilidade

 23

4.4.1.2. Design e Tecnologia

• Portifólio: Design Gráfico, Webdesign e Prêmios ganhos.

• Soluções: Especificar as soluções oferecidas pela empresa.

• Produtos : Especificar os produtos oferecidos pela empresa.

• Serviços: Especificar os serviços oferecidos pela empresa.

4.4.1.3. Treinamentos
• Metodologia aplicada nos curso presenciais e on-line

• Curso presencial: contém as seguintes informações pertinentes aos cursos:

Nome,apresentação,Objetivo,Público-alvo,Pré-
requisitos,Metodologia,Conteúdo Programático, Carga Horária, Material
Didático, Valor e Observação Gerais.

• Curso On-line (Webdesign) : Modulo que será desenvolvida a parte.

• Cadastro (Pré-Inscrição): contendo os seguintes campos:Nome, CPF,RG e

Órgão Expedidor, Endereço completo, E-mail, Telefone, Celular, Data de
Aniversário,Turno do curso,Forma de pagamento e algumas perguntas
pertinentes tais como: Como ficou sabendo do curso,Gostaria de receber
informações sobre outros cursos, qual o tema de sua preferência? Deseja ser
contatado quando ocorrer os mesmos?

• Área do Aluno: uma área visível ao publico geral mostrando os trabalhos

executados pelos alunos durante o curso e link para seus currículos e
websites. E uma área restrita contendo:o material de apoio, apresentação das
aulas e exercícios

4.4.1.4. Clientes
• Apresentação dos clientes segmentados por áreas.

4.4.1.5. Contato
• Deve conter: mensagem, fone de contato, e formulário de contato contendo
campos de Nome, E-mail, Assunto e Mensagem.
 24

4.4.1.6. Seja Plus

• Formulário de inserção de currículo para pessoas que desejam trabalhar ou
prestar serviços para a PLUS.
 25

4.4.2. Mapa de Navegação

O mapa de navegação apresenta a estrutura, subdivisões e organização de seu conteúdo.

É essencial que o usuário se sinta à vontade logo na sua primeira visita ao website.

Os sistemas de navegação (menus, barras laterais, link, etc.) devem ser apresentados de forma clara e harmoniosa, orientando o
internauta para uma navegação tranqüila, sem interrupções ou mesmo caminhos sem volta.
 26

4.5.Cor

A cor é a parte mais emotiva do processo visual, expressando e reforçando a

informação12 . exerce ação tríplice: a de impressionar, a de expressar e a de
construir.

o significado das cores depende do seu contexto13. Para cada pessoa, numa
determinada ocasião, num determinado objeto, o significado das cores pode ser
diferente. O esquema de cores escolhido obedece à indenidade visual da empresa
(verde, o laranja, braço e o cinza)

4.5.1. Verde: O verde é uma cor-luz primária e uma cor-pigmento secundária

composta pelo ciano e amarelo. Está aproximadamente na faixa de freqüência 550
nm do espectro de cores visíveis.

4.5.2 Laranja: O laranja é uma cor terciária, pelo vermelho e o amarelo (uma
primária e outra secundária, dependendo do caso) que, no espectro visível, tem um
comprimento de onda aproximado de 620-585 nanômetros. Tem a mesma cor da
fruta que lhe dá o nome.

É uma cor viva que geralmente é associada à euforia, uma disposição enérgica e
muito usada para chamar a atenção. Estudos indicam que a cor laranja em um
ambiente pode deixar as pessoas do recinto eufóricas.

12
GUIMARÃES, Luciano. A Cor Como Informação. 2ª Edição. Editora Annablume. 2000
13
FARINA, Modesto. BASTOS, Heliodoro Teixeira.RODRIGUES. Maria Clotilde Perez.
Psicodinâmica das cores em comunicação. 5ª edição revista e Ampliada. Editora Edgard Blucher.
2002
 27

4.5.3. Cinza: O cinza é a cor intermediária entre o branco e preto. Em um modelo

subtrativo de cores (CMYK), ou seja, de emprego de pigmentos, é obtido pela adição
de preto. Em um modelo aditivo (RGB), ou seja, emprego de luzes, é obtido pela
adição de quantidades iguais de vermelho, verde e azul. Duas cores são ditas
complementares quando sua adição resulta em cinza.

4.5.4.Branco: O uso ostensivo do branco confere ao layout leveza e ameniza a

sobrecarga de informação, principalmente na área em que se apresenta o portifólio,
onde há um grande número de imagens. Espaços em branco permitem que sejam
feitos agrupamentos desnecessários de linhas ou fundos diferenciados. Apesar de
transmitir a sensação de vazio, a vantagem cognitiva supera as desvantagens
subjetivas.
 28

4.6.Tipografia

Certos caracteres exercem uma ação psicológica, conforme sua forma.

Alguns dão impressão de positivos, ponderados, racionais. Outros, pelo

contrário, de rigidez, peso. E outros, ainda, de flexibilidade, leveza, alegria etc.

A tipografia escolhida para os títulos foi à fonte fantasia “Base 5” a mesma

utilizada para construir a assinatura visual da empresa, entretanto seu uso deve ser
restrito aos títulos principais das áreas para não banalizar a marca da PLUS.

Para os textos corridos à tipografia escolhida foi à fonte verdana, que

pertence a uma família tipográfica sem-serifa e apesar de não ser uma das mais
belas é a que apresenta melhores índices de legibilidade na tela do monitor e não
chega a entrar em conflito com a fonte escolhida para os títulos.

4.7.Conceito Visual

Conceito é a idéia, a opinião sobre algo.

 29

Um website deve conter o conceito do produto ou da empresa sobre o qual se

quer informar. Ou seja, o conceito deve ser transmitido através da Comunicação
Visual.

4.8. Funcionalidade

Para que o website atinja seus objetivos, temos que ter muito claro em nosso
projeto, qual será a sua Função, ou seja, qual será o seu propósito, ação
característica.

4.8. Interatividade

“Interagir é trocar informações, á assistir, agir é não estar passível ao recebimento

dessas informações.”

A Interatividade é o tempero do website, portanto tem que ser na medida

certa para o sucesso do prato... digo do website.

Os elementos de interatividade que utilizaremos neste projeto são: contato,

Layout do website, Cadastro, Fórum.

4.9.Layout
O layout precisa transmitir a informação desejada com eficiência. É preciso
que o layout seja um elo de comunicação com o usuário, que sua linguagem seja
condizente com o objetivo do website.
o design de websites deve primar à simplicidade14: tipografia de fácil leitura,
cores amenas com contraste, espaço em branco para respirar e etc.
a interface deve ser tão óbvia, que o usuário não precise ficar parando para
pensar como usá-la.15 Cada elemento inserido em um website deve ter um objetivo,
a perfeição de um website se atinge quando não há nada a ser retirado e não
quando não há nada mais a ser inserido.

14
NIELSEN, Jakob e LORANGER, Hoa. Projetando Websites com Usabilidade. 1ª Edição. Editora:
Campus. 2007
15
KRUG, Steve. Não me Faça Pensar. 2ª Edição.Editora Alta Books. 2006
 30

Foram usados somente ângulos retos nas linhas porque dessa forma, não é
preciso usar imagens de fundo para marcar o layout, o que aumentaria o tempo de
carregamento da página.

As únicas exceções são a imagens representativas localizadas no cabeçalho

do website. Tal imagem será substituída nas páginas internas de acordo com o
assunto, segundo o estilo e identidade visual do website.

4.9.1 - Página Inicial

4.9.2 - Página Interna (Design e Tecnologia)

 31

4.9.3 - Página Interna (Treinamento).

4.9.4 - Página Interna (Contato).

4.10. TECNOLOGIA E METODOLOGIA APLICADA

4.10.1. Banco de dados: My SQL

4.10.2. Linguagens : XHTML, PHP, CSS e Javascript.

4.10.3. Metodologia: Web Standard

 32

4.11. RECOMENDAÇÃO PARA A IMPLEMENTAR A PROPOSTA

O presente trabalho é apenas uma proposta de como poderia ser guiado o

projeto de reestruturação do portal da PLUS. Para ser aplicado na prática, envolveria
uma série de variáveis que aqui não foram levadas em conta, devido ao escopo
limitado do trabalho. Para assegurar que a solução fosse realmente efetiva, seria
necessária a realização de testes em laboratório de usabilidade, por exemplo,
infraestrutura que a PLUS ainda não dispõe. Um laboratório simples consiste em
umas salas pequena e reservada, contendo um computador para o usuário
participante do teste e câmera de vídeo para documentar as sessões.

De qualquer forma, seguem algumas observações técnicas que devem ser

levadas em conta quando for feita nova reestruturação do website.

4.12. MANUTENÇÃO E ATUALIZAÇÃO

O processo de desenvolvimento de websites proposto pela metodologia de

Design Centrado no Usuário não termina nunca. Ele prevê a evolução constante da
qualidade de interação e informação através de testes com usuários e análise de
estatísticas.

Implementada provavelmente apresentará falhas que não foram previstas e

devem ser identificadas através de testes com usuários para serem corrigidas.
Também estatísticas de acesso que detalham o comportamento do usuário ao
navegar pelo website podem ser valiosas para uma mudança na estrutura da
informação.
 33

5. CONSIDERAÇÕES FINAIS
Torna-se evidente que atualmente um dos meios de comunicação mais
crescentes é a internet. Pelo uso dos computadores já ter ultrapassado as fronteiras
empresariais e se tornado utensílios necessários nas residências, as pessoas estão
usufruindo ao máximo desse meio. Seja para crescimento profissional, lazer,
estudos, até mesmo pela comodidade, pagar uma conta ou fazer um trabalho
escolar não é mais dificuldade para alguém que tenha um computador conectado à
internet em casa, basta acessar um website específico e pronto.

Os Padrões de Acessibilidade e Usabilidade estão se tornando a cada dia

mais necessários, tomando por base a crescente popularização da internet e dos
computadores entre as mais diversas classes de pessoas, incluindo os deficientes,
que representam um número considerável dos “navegadores”.

Para uma empresa quanto mais usuários conseguirem navegar em seu

website e conseguirem acessar as informações que necessitam, sem dificuldades,
significa que ela alcançará satisfatoriamente as necessidades primárias dos
usuários, que conseqüentemente, ficarão predispostos à utilização do website e
serviços oferecidos. Aumentando assim, sua procura e lucratividade.
 34

6. REFERÊNCIAS BIBLIOGRÁFICAS

FARINA, Modesto. BASTOS, Heliodoro Teixeira.RODRIGUES. Maria Clotilde

Perez. Psicodinâmica das cores em comunicação. 5ª edição revista e
Ampliada. Editora Edgard Blucher. 2002

GUIMARÃES, Luciano. A Cor Como Informação. 2ª Edição. Editora

Annablume. 2000

NIELSEN, Jakob e LORANGER, Hoa. Projetando Websites com

Usabilidade. 1ª Edição. Editora: Campus. 2007

KRUG, Steve. Não me Faça Pensar. 2ª Edição.Editora Alta Books. 2006

WODTKE, Christina. Information Architecture: Blueprints for the Web. New

Riders, 2002.

KRUG, Steve. Do not Make Me Think: A Commonsense Approach to Web

Usability. New Riders, 2000.

WODTKE, Christina. Information Architecture: Blueprints for the Web. New

Riders, 2002.

BERNERS-LEE, Tim. The World Wide Web: A very short personal history.
Disponível em: <http://www.ibarakiken.gr.jp/www/world/shorthistory-e.html>
Acessado em: 3/12/2006

UFRGS. Instituto de Informática. Curso de Pós-Graduação em Ciência da

Computação. Biblioteca. Normas para apresentação de monografias ao
CPGCC. Porto Alegre,1995. Disponível na internet no endereço
<http:/~.inf.ufrgs.biblioteeamtimlnormas.asp>
Acessado em: 12/02/2007

ACESSO BRASIL. Site Oficial de Acessibilidade no Brasil. Rio de Janeiro.

Disponível na internet no endereço: http://www.acessobrasil.org.br
Acessado em: 28/05/2007

W3C. World Wide Web Consortium, consórcio de empresas de tecnologia.

Estados Unidos da América. Disponível na internet no endereço:
http://www.w3.org
Acessado em: 28/05/2007

WINKPEDIA. Site Pesquisa de Conteúdo. Disponível na internet no endereço:

http://pt.wikipedia.org
Acessado em: 04/06/2007

PALACIO DO PLANALTO. Site oficial do Palácio do Planalto. Disponível na

internet no endereço: http://www.planalto.gov.br/ccivil/leis/L10098.htm
Acessado em: 09/05/2007
 35

ANEXOS
 36

ANEXO I

Código de Ética Profissional do Designer Gráfico (ADG Brasil - Associação dos

Designers Gráficos)

Capítulo I - Dos Objetivos

Artigo 1º - O Código de Ética Profissional do Designer Gráfico tem por objetivo

indicar normas de conduta que devem orientar suas atividades profissionais
regulando suas relações com a classe, clientes, empregados e a sociedade.

Artigo 2º - Incumbe ao Designer Gráfico dignificar a profissão como seu alto título de
honra, tendo sempre em vista a elevação moral e profissional, expressa através de
seus atos.

Artigo 3º - O Designer Gráfico visará sempre contribuir para o desenvolvimento do

país,procurando aperfeiçoar a qualidade das mensagens visuais e do ambiente
brasileiro.

Artigo 4º - O Designer Gráfico terá sempre em vista a honestidade, a perfeição e o

respeito à legislação vigente e resguardará os interesses dos clientes e
empregados, sem prejuízo de sua dignidade profissional e dos interesses maiores
da sociedade.

Capítulo II - Dos Deveres Fundamentais

Artigo 5º - No desempenho de suas funções, o Designer Gráfico deve:

1. Interessar-se pelo bem público e com tal finalidade contribuir com seus
conhecimentos, capacidade e experiência para melhor servir à sociedade;

2. Contribuir para a emancipação econômica e tecnológica de nosso país,

procurando utilizar técnicas e processos adequados a nosso meio ambiente e aos
valores culturais e sociais de nosso país;

3. Respeitar e fazer respeitar os preceitos internacionais da Propriedade Industrial;

4. O Designer Gráfico não deverá empreender, dentro do contexto de sua prática

profissional,
 37

nenhuma atividade que comprometa seu status como profissional independente.

Artigo 6º - O Designer Gráfico, em relação aos colegas, deve empenhar-se em:

1. Não cometer ou contribuir para que se cometam injustiças contra colegas;

2. Não usar de descortesia no trato com colegas de profissão ou de outras

profissões, fazendo-lhes críticas ou alusões depreciativas ou demeritórias;

3. Não praticar qualquer ato que, direta ou indiretamente, possa prejudicar legítimos
interesses de outros profissionais;

4. Não solicitar nem submeter propostas contendo condições que constituam desleal
competição de preço por serviços profissionais;

5. Em busca de oportunidade de trabalho, o Designer Gráfico deve apoiar a

concorrência íntegra e transparente, baseada no mérito do profissional e de sua
proposta de trabalho;

6. Não se interpor entre outros profissionais e seus clientes, sem ser solicitada e
esclarecida sua intervenção e, neste caso, evitar, na medida do possível, que se
cometa injustiça;

7. Não se aproveitar, nem concorrer para que se aproveitem de idéias, planos ou

projetos de autoria de outros profissionais, sem a necessária citação ou autorização
expressa destes;

8. Não procurar suplantar outro profissional depois deste ter tomado providência
para obtenção de emprego ou serviço;

9. Não substituir profissional em relação de trabalho, ainda não encerrada, sem seu
prévio conhecimento e autorização;

10. Não rever ou corrigir o trabalho de outro profissional, sem o seu prévio
conhecimento e sempre após o término de suas funções;

11. Prestar-lhe assistência de qualquer ordem e natureza no que for de direito e

justiça;

12. O Designer Gráfico não deve reivindicar ter crédito sozinho em um projeto onde
outros Designers Gráficos colaboraram.
 38

13. Quando o Design Gráfico não é de um só autor, cabe a este designer ou à

empresa de design identificar claramente as responsabilidades específicas e
envolvimento com o design.

Trabalhos não devem ser usados para publicidade, display ou portfólio sem uma
clara identificação das autorias específicas.

Artigo 7º - O Designer Gráfico, em relação à classe, deve:

1. Prestar seu concurso moral, intelectual e material às entidades de classe;

2. Desde que eleito, desempenhar cargos diretivos nas entidades de classe;

3. Acatar as resoluções regularmente votadas pelas entidades da classe;

4. Facilitar a fiscalização do exercício da profissão;

5. Não se aproveitar, quando do desempenho de qualquer função diretiva em

entidade representativa da classe, dessa posição em benefício próprio;

6. Manter-se em dia com a legislação vigente e procurar difundi-la, a fim de que seja
prestigiado e definido o legítimo exercício da profissão;

7. Não utilizar o prestígio da classe para proveito pessoal, ter sempre em vista o
bem-estar, as adequadas condições de trabalho e o progresso técnico e funcional
dos demais profissionais e tratá-los com retidão, justiça e humanidade,
reconhecendo e respeitando seus direitos.

Artigo 8º - O Designer Gráfico, em relação a seus clientes e empregadores, deve:

1. Oferecer-lhes o melhor de sua capacidade Técnica e Profissional, procurando

contribuir para a obtenção de máximos benefícios em decorrência de seu trabalho;

2. Orientar-lhes, de preferência de forma expressa, com dados e elementos precisos

sobre o que for consultado, após cuidadoso exame.

3. Considerar como sigilosa e confidencial toda informação que souber em razão de

suas funções, não as divulgando sem o consentimento dos clientes e/ou
empregadores;

4. Receber somente de uma única fonte honorários ou compensações pelo mesmo

serviço prestado, salvo se, para proceder de modo diverso, tiver movido
consentimento de todas as partes interessadas;
 39

5. O Designer Gráfico não deverá aceitar instruções do cliente que impliquem

infração contra os direitos próprios de outras pessoas ou conscientemente, agir de
maneira a acarretar alguma infração;

6. O Designer Gráfico, quando atuar em países que não o de origem, deve observar
os códigos de conduta próprios de cada local.

Artigo 9º - O Designer Gráfico, em relação ao setor público, deve:

1. Interessar-se pelo bem público com sua capacidade para esse fim, subordinando
seu interesse particular ao da sociedade;

2. Enviar esforços para que se estabeleça a mais ampla coordenação entre as

classes profissionais, de forma a concorrer para a maior e melhor justiça social;

3. Contribuir para uma utilização racional dos recursos materiais e humanos, visando
o estabelecimento de melhores condições sociais e ambientais.

Capítulo III - Dos Honorários

Artigo 10º - Recomenda-se ao Designer Gráfico fixar previamente, em contrato

escrito, seus honorários.

1. O Designer Gráfico não deve encarregar-se de nenhum trabalho sem que tenha
havido a devida compensação financeira, exceto em casos de prestação de serviços
para instituições não-lucrativas.

Artigo 11º - Os honorários profissionais devem ser fixados de acordo com as

condições locais dos mercados de trabalho, atendidos os seguintes elementos;

1. A complexidade, o vulto e a dificuldade do trabalho a executar;

2. O trabalho e o tempo necessário;

3. A situação econômico-financeira do cliente ou empregador e os benefícios que

para este advirão de seu serviço profissional;

4. O caráter do serviço a prestar, conforme se tratar de cliente ou empregador

eventual, habitual ou permanente;

5. O lugar da prestação de serviço;

6. O conceito profissional da classe;

 40

7. As tabelas ou recomendações oficiais existentes, inclusive por resolução das

entidades de classe.

Artigo 12º - O Designer Gráfico não deve, sozinho ou em concorrência, participar de

projetos especulativos pelo qual só receberá o pagamento se o projeto vier a ser
aprovado.

1. O Designer Gráfico pode participar de concursos, abertos ou fechados, cujas

condições sejam aprovadas pela entidade de classe;

2. Uma taxa administrativa justa pode ser adicionada, com o conhecimento e

compreensão do cliente, como porcentagem de todos os itens reembolsáveis pelo
cliente que tenham passado pela contabilidade do Designer Gráfico;

3. O Designer Gráfico que é chamado para opinar sobre uma seleção de designers
ou outros consultores não deverá aceitar nenhuma forma de pagamento por parte do
designer ou consultor recomendado.

Capítulo IV - Recomendações Complementares

Artigo 13º - O Designer Gráfico deve realizar de maneira digna e discreta a

publicidade de sua empresa ou atividade, impedindo toda e qualquer manifestação
que possa comprometer o conceito de sua profissão ou de colegas.

Artigo 14º - O Designer Gráfico deve procurar difundir os benefícios e as corretas

metodologias de sua atividade profissional, em qualquer tempo ou condição.

Artigo 15º - Este Código de Ética Profissional entra em vigor na data de sua
aprovação em Assembléia Geral da ADG Brasil - Associação dos Designers
Gráficos.

As infrações deste Código de Ética Profissional serão julgadas pela ADG Brasil –
Associação dos Designers Gráficos
 41

ANEXO II

Lei de Acessibilidade No 10.098, de 19 de dezembro de 2000 Publicada no

D.O.U. de 20.12.2000

Estabelece normas gerais e critérios básicos para a promoção da acessibilidade das

pessoas portadoras de deficiência ou com mobilidade reduzida, e dá outras
providências.

O PRESIDENTE DA REPÚBLICA

Faço saber que o Congresso Nacional decreta e eu sanciono a seguinte Lei:

CAPÍTULO I
DISPOSIÇÕES GERAIS

Art. 1. Esta Lei estabelece normas gerais e critérios básicos para a promoção da
acessibilidade das pessoas portadoras de deficiência ou com mobilidade reduzida,
mediante a supressão de barreiras e de obstáculos nas vias e espaços públicos, no
mobiliário urbano, na construção e reforma de edifícios e nos meios de transporte e
de comunicação.
Art. 2. Para os fins desta Lei são estabelecidas as seguintes definições:
I - acessibilidade: possibilidade e condição de alcance para utilização, com
segurança e autonomia, dos espaços, mobiliários e equipamentos urbanos, das
edificações, dos transportes e dos sistemas e meios de comunicação, por pessoa
portadora de deficiência ou com mobilidade reduzida;
II - barreiras: qualquer entrave ou obstáculo que limite ou impeça o acesso, a
liberdade de movimento e a circulação com segurança das pessoas, classificadas
em:
a) barreiras arquitetônicas urbanísticas: as existentes nas vias públicas e nos
espaços de uso público;
b) barreiras arquitetônicas na edificação: as existentes no interior dos edifícios
públicos e privados;
c) barreiras arquitetônicas nos transportes: as existentes nos meios de transportes;
d) barreiras nas comunicações: qualquer entrave ou obstáculo que dificulte ou
 42

impossibilite a expressão ou o recebimento de mensagens por intermédio dos meios

ou sistemas de comunicação, sejam ou não de massa;

III - pessoa portadora de deficiência ou com mobilidade reduzida: a que temporária

ou permanentemente tem limitada sua capacidade de relacionar-se com o meio e de
utilizá-lo;
IV - elemento da urbanização: qualquer componente das obras de urbanização, tais
como os referentes a pavimentação, saneamento, encanamentos para esgotos,
distribuição de energia elétrica, iluminação pública, abastecimento e distribuição de
água, paisagismo e os que materializam as indicações do planejamento urbanístico;
V - mobiliário urbano: o conjunto de objetos existentes nas vias e espaços públicos,
superpostos ou adicionados aos elementos da urbanização ou da edificação, de
forma que sua modificação ou traslado não provoque alterações substanciais nestes
elementos, tais como semáforos, postes de sinalização e similares, cabines
telefônicas, fontes públicas, lixeiras, toldos, marquises, quiosques e quaisquer outros
de natureza análoga;
VI - ajuda técnica: qualquer elemento que facilite a autonomia pessoal ou possibilite
o acesso e o uso de meio físico.

CAPÍTULO II
DOS ELEMENTOS DA URBANIZAÇÃO

Art. 3. O planejamento e a urbanização das vias públicas, dos parques e dos demais
espaços de uso público deverão ser concebidos e executados de forma a torná-los
acessíveis para as pessoas portadoras de deficiência ou com mobilidade reduzida.
Art. 4. As vias públicas, os parques e os demais espaços de uso público existentes,
assim como as respectivas instalações de serviços e mobiliários urbanos deverão
ser adaptados, obedecendo-se ordem de prioridade que vise à maior eficiência das
modificações, no sentido de promover mais ampla acessibilidade às pessoas
portadoras de deficiência ou com mobilidade reduzida.
Art. 5. O projeto e o traçado dos elementos de urbanização públicos e privados de
uso comunitário, nestes compreendidos os itinerários e as passagens de pedestres,
os percursos de entrada e de saída de veículos, as escadas e rampas, deverão
observar os parâmetros estabelecidos pelas normas técnicas de acessibilidade da
Associação Brasileira de Normas Técnicas - ABNT.
 43

Art. 6. Os banheiros de uso público existentes ou a construir em parques, praças,

jardins e espaços livres públicos deverão ser acessíveis e dispor, pelo menos, de um
sanitário e um lavatório que atendam às especificações das normas técnicas da
ABNT.
Art. 7. Em todas as áreas de estacionamento de veículos, localizadas em vias ou
em espaços públicos, deverão ser reservadas vagas próximas dos acessos de
circulação de pedestres, devidamente sinalizadas, para veículos que transportem
pessoas portadoras de deficiência com dificuldade de locomoção.Parágrafo único.
As vagas a que se refere o caput deste artigo deverão ser em número equivalente a
dois por cento do total, garantida, no mínimo, uma vaga, devidamente sinalizada e
com as especificações técnicas de desenho e traçado de acordo com as normas
técnicas vigentes.

CAPÍTULO III
DO DESENHO E DA LOCALIZAÇÃO DO MOBILIÁRIO URBANO

Art. 8. Os sinais de tráfego, semáforos, postes de iluminação ou quaisquer outros

elementos verticais de sinalização que devam ser instalados em itinerário ou espaço
de acesso para pedestres deverão ser dispostos de forma a não dificultar ou impedir
a circulação, e de modo que possam ser utilizados com a máxima comodidade.
Art. 9. Os semáforos para pedestres instalados nas vias públicas deverão estar
equipados com mecanismo que emita sinal sonoro suave, intermitente e sem
estridência, ou com mecanismo alternativo, que sirva de guia ou orientação para a
travessia de pessoas portadoras de deficiência visual, se a intensidade do fluxo de
veículos e a periculosidade da via assim determinarem.
Art. 10. Os elementos do mobiliário urbano deverão ser projetados e instalados em
locais que permitam sejam eles utilizados pelas pessoas portadoras de deficiência
ou com mobilidade reduzida.

CAPÍTULO IV
DA ACESSIBILIDADE NOS EDIFÍCIOS PÚBLICOS OU DE USO COLETIVO

Art. 11. A construção, ampliação ou reforma de edifícios públicos ou privados

destinados ao uso coletivo deverão ser executadas de modo que sejam ou se
 44

tornem acessíveis às pessoas portadoras de deficiência ou com mobilidade

reduzida.

Parágrafo único. Para os fins do disposto neste artigo, na construção, ampliação ou

reforma de edifícios públicos ou privados destinados ao uso coletivo deverão ser
observados, pelo menos, os seguintes requisitos de acessibilidade:

I - nas áreas externas ou internas da edificação, destinadas a garagem e a

estacionamento de uso público, deverão ser reservadas vagas próximas dos
acessos de circulação de pedestres, devidamente sinalizadas, para veículos que
transportem pessoas portadoras de deficiência com dificuldade de locomoção
permanente;
II - pelo menos um dos acessos ao interior da edificação deverá estar livre de
barreiras arquitetônicas e de obstáculos que impeçam ou dificultem a acessibilidade
de pessoa portadora de deficiência ou com mobilidade reduzida;
III - pelo menos um dos itinerários que comuniquem horizontal e verticalmente todas
as dependências e serviços do edifício, entre si e com o exterior, deverá cumprir os
requisitos de acessibilidade de que trata esta Lei; e
IV - os edifícios deverão dispor, pelo menos, de um banheiro acessível, distribuindo-
se seus equipamentos e acessórios de maneira que possam ser utilizados por
pessoa portadora de deficiência ou com mobilidade reduzida.

Art. 12. Os locais de espetáculos, conferências, aulas e outros de natureza similar

deverão dispor de espaços reservados para pessoas que utilizam cadeira de rodas,
e de lugares específicos para pessoas com deficiência auditiva e visual, inclusive
acompanhante, de acordo com a ABNT, de modo a facilitar-lhes as condições de
acesso, circulação e comunicação.

CAPÍTULO V
DA ACESSIBILIDADE NOS EDIFÍCIOS DE USO PRIVADO

Art. 13. Os edifícios de uso privado em que seja obrigatória a instalação de

elevadores deverão ser construídos atendendo aos seguintes requisitos mínimos de
acessibilidade:

I - percurso acessível que una as unidades habitacionais com o exterior e com as

 45

dependências de uso comum;

II - percurso acessível que una a edificação à via pública, às edificações e aos
serviços anexos de uso comum e aos edifícios vizinhos;
III - cabine do elevador e respectiva porta de entrada acessíveis para pessoas
portadoras de deficiência ou com mobilidade reduzida.

Art. 14. Os edifícios a serem construídos com mais de um pavimento além do

pavimento de acesso, à exceção das habitações unifamiliares, e que não estejam
obrigados à instalação de elevador, deverão dispor de especificações técnicas e de
projeto que facilitem a instalação de um elevador adaptado, devendo os demais
elementos de uso comum destes edifícios atender aos requisitos de acessibilidade.
Art. 15. Caberá ao órgão federal responsável pela coordenação da política
habitacional regulamentar a reserva de um percentual mínimo do total das
habitações, conforme a característica da população local, para o atendimento da
demanda de pessoas portadoras de deficiência ou com mobilidade reduzida.

CAPÍTULO VI
DA ACESSIBILIDADE NOS VEÍCULOS DE TRANSPORTE COLETIVO

Art. 16. Os veículos de transporte coletivo deverão cumprir os requisitos de

acessibilidade estabelecidos nas normas técnicas específicas.

CAPÍTULO VII
DA ACESSIBILIDADE NOS SISTEMAS DE COMUNICAÇÃO E SINALIZAÇÃO

Art. 17. O Poder Público promoverá a eliminação de barreiras na comunicação e

estabelecerá mecanismos e alternativas técnicas que tornem acessíveis os sistemas
de comunicação e sinalização às pessoas portadoras de deficiência sensorial e com
dificuldade de comunicação, para garantir-lhes o direito de acesso à informação, à
comunicação, ao trabalho, à educação, ao transporte, à cultura, ao esporte e ao
lazer.
Art. 18. O Poder Público implementará a formação de profissionais intérpretes de
escrita em braile, linguagem de sinais e de guias-intérpretes, para facilitar qualquer
tipo de comunicação direta à pessoa portadora de deficiência sensorial e com
 46

dificuldade de comunicação.
Art. 19. Os serviços de radiodifusão sonora e de sons e imagens adotarão plano de
medidas técnicas com o objetivo de permitir o uso da linguagem de sinais ou outra
sub-titulação, para garantir o direito de acesso à informação às pessoas portadoras
de deficiência auditiva, na forma e no prazo previstos em regulamento.

CAPÍTULO VIII
DISPOSIÇÕES SOBRE AJUDAS TÉCNICAS

Art. 20. O Poder Público promoverá a supressão de barreiras urbanísticas,

arquitetônicas, de transporte e de comunicação, mediante ajudas técnicas.
Art. 21. O Poder Público, por meio dos organismos de apoio à pesquisa e das
agências de financiamento, fomentará programas destinados:

I - à promoção de pesquisas científicas voltadas ao tratamento e prevenção de

deficiências;
II - ao desenvolvimento tecnológico orientado à produção de ajudas técnicas para as
pessoas portadoras de deficiência;
III - à especialização de recursos humanos em acessibilidade.

CAPÍTULO IX
DAS MEDIDAS DE FOMENTO À ELIMINAÇÃO DE BARREIRAS

Art. 22. É instituído, no âmbito da Secretaria de Estado de Direitos Humanos do

Ministério da Justiça, o Programa Nacional de Acessibilidade, com dotação
orçamentária específica, cuja execução será disciplinada em regulamento.

CAPÍTULO X
DISPOSIÇÕES FINAIS

Art. 23. A Administração Pública federal direta e indireta destinará, anualmente,

dotação orçamentária para as adaptações, eliminações e supressões de barreiras
arquitetônicas existentes nos edifícios de uso público de sua propriedade e naqueles
que estejam sob sua administração ou uso.Parágrafo único. A implementação das
adaptações, eliminações e supressões de barreiras arquitetônicas referidas no caput
deste artigo deverá ser iniciada a partir do primeiro ano de vigência desta Lei.
 47

Art. 24. O Poder Público promoverá campanhas informativas e educativas dirigidas

à população em geral, com a finalidade de conscientizá-la e sensibilizá-la quanto à
acessibilidade e à integração social da pessoa portadora de deficiência ou com
mobilidade reduzida.
Art. 25. As disposições desta Lei aplicam-se aos edifícios ou imóveis declarados
bens de interesse cultural ou de valor histórico-artístico, desde que as modificações
necessárias observem as normas específicas reguladoras destes bens.
Art. 26. As organizações representativas de pessoas portadoras de deficiência terão
legitimidade para acompanhar o cumprimento dos requisitos de acessibilidade
estabelecidos nesta Lei.
Art. 27. Esta Lei entra em vigor na data de sua publicação.
Brasília, 19 de dezembro de 2000; 179o da Independência e 112o da República
 48

ANEXO III

O briefing é um documento utilizado sempre que uma informação passa de

um ponto para outro, com o propósito de organizá-la corretamente e de assegurar a
passagem da informação certa – da pessoa certa para a pessoa certa – na hora
certa, da maneira certa com o custo certo. O sucesso ou fracasso desta operação
depende, é claro, de saber o que é certo no contexto, pois o que é certo para uma
situação pode não ser certo para outra. Em seu termo mais simples, briefing significa
a passagem de informação de uma pessoa para outra.

Briefing

Nome do Cliente:

Plus Design, Tecnologia e Treinamento Ltda.

Endereço:

CLSW 101, Bloco A, Sala 120, Brasília-DF.

Apresentação da Empresa:

A Plus Design, Tecnologia e Treinamento, é uma empresa que

focaliza seu campo de atuação no desenho e no desenvolvimento
aplicacional baseado em tecnologias Web. Há três anos no mercado de
Brasília, presta uma ampla gama de serviços que inclui consultoria,
integração, implementação e manutenção de soluções internet, intranet,
comercio eletrônico, sistema de gestão do conhecimento, outsourcing e
marketing digital. Com a mesma categoria profissional, desenvolve
projetos na área de programação visual, adotando sempre soluções
criativas e inovadoras, buscando assim atender as necessidades de
marketing de seus clientes.

Visando compartilhar seu know-how aos profissionais da área e

aspirantes, e aproveitando a experiência didática de seus sócios, que
ministram com competência e qualidade cursos e palestras na área, a
empresa procura disseminar teoria e prática por meio de cursos inéditos
no mercado de Brasília. Já foram ministrados mais de seis cursos, e 10
palestras nas áreas de design e tecnologia.
 49

Serviços oferecidos:

• Sites corporativos

• Portais

• Hotsites

• Sites de produtos

• Consultoria, implementação e manutenção de soluções em tecnologia e

design.

• E-mail marketing

• Newsletter

• Design gráfico

• Design editorial

• Sinalização

• Treinamentos Especializados nas áreas de Design e tecnologia.

Produtos oferecidos:

• Plus Content Manager : Gerenciador de Conteúdo Web que permite a

inserção de conteúdos no site pelo próprio cliente, de qualquer lugar. Oferece
maior dinamismo e eficiência na atualização do conteúdo do site.

• Plus Manager:Gerenciador de fluxo de trabalho de projetos, que controla a

qualidade, os prazos, a equipe e as finanças de cada projeto.

• PlusMailling:Envio automático de mala direta por meio de mailing (banco de

dados). Gerenciamento de conteúdo (inserção de imagens e textos) pelo
próprio cliente).Cadastro de usuários (formação do mailing da empresa).

• Manutenção de usuários (incluir, excluir, alterar e pesquisar).

Principais Clientes

• Asbraer – Associação Brasileira de ATER.

• BRB

• Brisa – Tecnologia da Informação.

 50

• Correio Web

• CTIS

• E-sec Tecnologia em Segurança de Dados.

• Governo do Estado da Bahia.

• Inep – Instituto Nacional de Estudos e Pesquisas Educacionais.

• Infraero

• INSS

• MedLabor - Medicina Laboratorial.

• Ministério da Educação

• Ministério da Integração

• Ministério da Justiça

• Ministério da Justiça

• Ministério das Relações Exteriores – Itamarati.

• Ministério do Desenvolvimento Agrário.

• Ministério do Desenvolvimento Indústria e Comércio Exterior.

• Ministério do Desenvolvimento Social e Combate à Fome.

• Politec.

• Radiobras

• Senac

• Senado Federal

• Sesc

• Sesi

• Sistema CNI|SESI|SENAI|IEL.

• Site Candango

• STF
 51

• STM

• UNB

Público-alvo Primário e Secundário:

• Área de Tecnologia: Empresas Públicas e privadas.

• Área de Treinamento: Estudantes e profissionais das áreas de design,

publicidade, artes plásticas, informática e comunicação.

PROBLEMA:

• Descrição dos Problemas: Reformulação do site Plus Design, Tecnologia e

Treinamentos Ltda, dentro da Identidade Visual já estabelecida pela empresa.

• Definição do Problema: A empresa está com um novo conceito e uma nova

filosofia. Mas não deseja modificar sua identidade visual no momento, em
virtude dela já está consolidada no mercado.

• Componentes do Problema: Criar um novo layout e estrutura para o site da

empresa, aplicando o novo conceito e filosofia da empresa, aproveitando a
identidade visual da empresa, já existente.

PONTOS FORTES E FRACOS:

• Excelentes profissionais todos atuantes na área e renomados,

• Atualização de mercado em tecnologia e informações,

• Expertise,

• Material didático de excelente qualidade (material e impressão),

• Prêmios na área.

DEADLINE (Prazo de Entrega):

• 60 dias

ELEMENTOS DA IDENTIDADE VISUAL:

• Cartão de visita

• Papel de carta

• Envelope
 52

• Pasta A4

• Sinalização

• Folder

• Cartaz

• Website

• Manual de identidade visual

IDENTIDADE VISUAL, CORES E ALFABETO INSTITUCIONAL.

Identidade Visual

Cores:

• Verde: CMYK: 1/0/68/23 e RGB: 195/197/23

• Laranja: CMYK: 0/46/96/5 e RGB: 244/128/0

• Azul: CMYK: 77/9/0/24 e RGB: 0/174/196

Tipografia:

Base 5
53