O documento descreve a análise da evolução do layout e conteúdo do site da empresa Xerox entre 1997 e 2004. Durante esse período, o site passou por diversas mudanças em sua estrutura, com o objetivo de torná-lo mais organizado, navegável e alinhado à identidade visual da marca. As principais alterações foram a adição de cores, menus e seções, além de simplificar o layout para torná-lo mais clean e direto.

1. Trabalho de Design de Interface
Taís Malheiros
Bianca Phaeton
Lívia Neves
Walison Santana
.com.br

2. • ATIVIDADE 01
DISCIPLINA DESIGN DE INTERFACE
ANÁLISE DO SITE DA EMPRESA NORTE-AMERICANA
XÉROX
WEBARCHIVE
LOGO ATUAL

3. Imprimir imagens com alta definição. Escanear com qualidade. Digitalizar com perfeição.
“Xerocar”. Copiar com cores vivas e muita nitidez. Quando o assunto é imagens não existe
especialista maior no mundo que a XEROX, uma empresa líder em processos de negócios e
gestão de documentos, oferece tecnologias, especialidades e serviços que permitem que
negócios operem com maior precisão e eficiência, em qualquer situação.
Chester Carlson, o criador do processo de cópia por fotocondutividade (futuramente
conhecido como “xérox”) faz a primeira cópia da história em 1938. Já em 1942 consegue a
patente para o seu invento. Em 1947, uma pequena empresa chamada Haloid compra o
direito de produzir as primeiras máquinas xerográficas. Em 1948 a empresa inventa o nome
Xerox e registra a marca. A empresa tornou-se XEROX CORPORATION oficialmente em
18 de abril de 1961 após ampla aceitação da XEROX 914, a primeira copiadora automática
para escritório que utilizava papel comum.
Em todo o mundo a XEROX amargou, desde 2001, uma forte queda em suas vendas,
associada a uma enorme crise de liquidez, causada pela necessidade de pagar nos Estados
Unidos uma multa de US$ 10 milhões por erros contábeis, a maior da história por violação
aos informes financeiros. A XEROX que saiu da crise está mais sólida, mas ainda luta para
não ser uma cópia pálida de si mesma. Em 2009, a empresa adquiriu a Affiliated Computer
Services (ACS) por US$ 6.4 bilhões, operação que colocou a XEROX como líder mundial,
além de permitir uma ampliação dos mercados.

4. Evolução da Marca

5. Análise da Evolução do layout e conteúdo do Site
1997
- Site sem margens e
diagramação organizada,
hierarquia de conteúdo ou
cor.
- Utilização de ícones para
alguns links importantes.
Banners publicitários em
gif animado.
Presença do logo em
tamanho pequeno e do “X”
como um logotipo.
Apresentação da empresa
na Home.
Formulário grande de
“Fale conosco” com o
nome de “Linha Direta”.

6. 1997
• Site sem margens e diagramação organizada, hierarquia de conteúdo ou
cor.
• Utilização de ícones para alguns links importantes.
• Banners publicitários em gif animado.
• Presença do logo em tamanho pequeno e do “X” como um logotipo.
• Apresentação da empresa na Home.
• Formulário grande de “Fale conosco” com o nome de “Linha Direta”.

7. 1998
- Utiliza o logo criado em
1994 com o novo slogan
“The Document
Company”, porém
pequeno, com pouca
visibilidade.
-Uso frequente de gif
animado para dar
movimento ao site
- No meio da página estão
os dois principais setores
do site: produtos &
serviços (catálogo) e
softwares & drivers e na
coluna direita estão os
“trending topics”
- No topo está o menu de
apoio, com itens como
“mapa do site” e abaixo um
banner do principal
lançamento da época, no
caso a máquina Document
WorkCentre Pro 745
- Layout simples e básico,
utilizando fontes do padrão
da época (não segue uma
identidade visual própria da
marca.) Faz uso do
vermelho do logo no design
do site.

8. 1998
• Layout simples e básico, utilizando fontes do padrão da época (não
segue uma identidade visual própria da marca.) Faz uso do vermelho do
logo no design do site.
• Utiliza o logo criado em 1994 com o novo slogan “The Document
Company”, porém pequeno, com pouca visibilidade.
• Uso frequente de gif animado para dar movimento ao site
• Apresenta como menu principal o lateral contendo os ícones: planeta
XEROX (história da marca), drivers & softwares, atendimento ao
cliente, aqui tem Xerox (localização de pontos de venda) e novidade
(feed de notícias da marca).
• No meio da página estão os dois principais setores do site: produtos &
serviços (catálogo) e softwares & drivers e na coluna direita estão os
“trending topics”
• No topo está o menu de apoio, com itens como “mapa do site” e abaixo
um banner do principal lançamento da época, no caso a máquina
Document WorkCentre Pro 745

9. 1999
- Ainda é usado o mesmo layout
de 1998: simples e básico (não
segue uma identidade visual
própria da marca. Porém, agora já
faz uso de fontes coloridas como
forma de diagramação para
diferentes conteúdos
- Ainda se utiliza o logo criado em
1994 com o novo slogan “The
Document Company”.
- A parte do meio do site agora
contém um texto como uma
chamada de um grande
acontecimento para a marca, junto
de uma imagem ilustrativa (espaço
destinado para propaganda
própria)
- No topo está o menu de apoio,
com itens como “mapa do site” e
abaixo um banner com propaganda
própria
- O menu principal continua na
lateral esquerda, mas agora foram
adicionados os itens “compre aqui
– loja Xerox”, “novidades” e
“Xerox no ano 2000” (ano
seguinte).

10. 1999
• Ainda é usado o mesmo layout de 1998: simples e básico (não segue
uma identidade visual própria da marca. Porém, agora já faz uso de
fontes coloridas como forma de diagramação para diferentes
conteúdos
• Ainda se utiliza o logo criado em 1994 com o novo slogan “The
Document Company”.
• A parte do meio do site agora contém um texto como uma chamada
de um grande acontecimento para a marca, junto de uma imagem
ilustrativa (espaço destinado para propaganda própria)
• O menu principal continua na lateral esquerda, mas agora foram
adicionados os itens “compre aqui – loja Xerox”, “novidades” e
“Xerox no ano 2000” (ano seguinte).
• A parte da lateral direita ainda é destinada aos “trending topics”
• No topo está o menu de apoio, com itens como “mapa do site” e
abaixo um banner com propaganda própria

11. 2000
- Não foi possível analisar bem
o layout, pois pelo fato do site
ser construído principalmente
por links sobre imagens sem
tags de acessibilidade, uma vez
que estas imagens não estão
mais disponíveis nas redes, não
é possível ver o que estava
naquele espaço do site. Logo,
apesar de perceber mudanças
no posicionamento do
conteúdo, não é possível
analisar os grafismos em si.
- A página principal perde seus
cantos arredondados, passando
a ter um visual mais sério e
menos colorido.
- O menu de apoio continua no
topo, mas agora encontra-se
abaixo do banner de propaganda
própria.
- A parte do meio da página
agora é dividida entre duas
chamadas para grandes
acontecimentos da marca,
cada um associado a uma
imagem ilustrativa.
- A parte da lateral direita agora
contém além dos trending
topics, o botão para se inscrever
na mailling list da marca.

12. 2000
• Não foi possível analisar bem o layout, pois pelo fato do site ser
construído principalmente por links sobre imagens sem tags de
acessibilidade, uma vez que estas imagens não estão mais disponíveis
nas redes, não é possível ver o que estava naquele espaço do site.
Logo, apesar de perceber mudanças no posicionamento do conteúdo,
não é possível analisar os grafismos em si.
• A página principal perde seus cantos arredondados, passando a ter
um visual mais sério e menos colorido.
• O menu de apoio continua no topo, mas agora encontra-se abaixo do
banner de propaganda própria.
• A parte do meio da página agora é dividida entre duas chamadas para
grandes acontecimentos da marca, cada um associado a uma imagem
ilustrativa.
• A parte da lateral direita agora contém além dos trending topics, o
botão para se inscrever na mailling list da marca.

13. 2002
- Grande mudança no
layout. Agora este já utiliza
cores e grafismos
institucionais e o wireframe
mudou completamente.
- O header ficou maior e
assim foi possível colocar
uma imagem grande em
destaque junto com o logo
da empresa (mesmo
posicionamento que as
versões anteriores), com um
campo de busca ao lado e o
botão para encontrar os
pontos de venda. Abaixo
está um banner institucional.
- O menu agora é um só e
encontra-se abaixo do
banner (ainda no topo).
- A parte de conteúdo do
site foi dividida em três
colunas de larguras iguais.
- O menu de apoio virou o
rodapé do site e fica junto
do símbolo da marca (antes
não utilizado).
-Agora o site possui
ferramenta de filtro interna.

14. 2002
• A partir deste ano percebe-se uma grande mudança no layout do site. Agora este já utiliza cores
e grafismos institucionais e o wireframe do site mudou completamente.
• O header ficou maior e assim foi possível colocar uma imagem grande em destaque junto com o
logo da empresa (mesmo posicionamento que as versões anteriores), porém em maior tamanho e
em destaque no topo da página, com um campo de busca ao lado e o botão para encontrar os
pontos de venda. Abaixo está um banner institucional.
• O menu agora é um só e encontra-se abaixo do banner (ainda no topo) contendo os itens:
produtos (antigo produtos & serviços), Suprimentos, Soluções por indústria, Serviços para
Empresas, Suportes & Drivers e Minha Xerox.
• A parte de conteúdo do site foi dividida em três colunas de larguras iguais: a da esquerda
destinada para atalhos dos setores principais do site e considerada uma das melhores evoluções
deste novo formato de site - hiperlink para navegação dentro do conteúdo do site - (drivers para
download, como comprar, portal dos fornecedores, recursos humanos, instituto Xerox e portal
Sophya), a coluna do meio destinada a imagens de propaganda própria e a da direita, ainda
destinada aos “trending topics”, mas que agora não tem mais o botão para se inscrever na
mailling list e sim o Planeta Xerox (que saiu do menu principal e dos principais atalhos).
• O menu de apoio virou o rodapé do site e fica junto do símbolo da marca (antes não utilizado).
• Agora o site possui ferramenta de filtro interna.

15. 2003
- Continua-se utilizando as
novas cores e novos
grafismos institucionais e o
wireframe do site mantém
as mesmas mudanças.
No topo que foi adicionada
uma notificação de que
alguma páginas só poderiam
ser exibidas em inglês;
mudaram os botões do menu
principal e dos atalhos da
coluna esquerda da parte de
conteúdo. Mudanças
realizadas após o feedback
dos clientes e
provavelmente devido a
testes.
- Nas imagens de apoio da
área central, foi retirada a
opção de link de texto da
imagem, mantendo somente
a imagem como um link.
- Ausência de gif, troca pelo
flash , porém a quantidade
de textos continua grande.

16. 2003
• Este ano mantém as grandes mudança no layout do site iniciadas em 2002.
Continua-se utilizando as novas cores e novos grafismos institucionais e o
wireframe do site mantém as mesmas mudanças.
• As únicas mudanças que podem ser percebidas em relação a versão de
2002 é no topo que foi adicionada uma notificação de que alguma páginas
só poderiam ser exibidas em inglês; mudaram os botões do menu principal
e dos atalhos da coluna esquerda da parte de conteúdo. Mudanças
realizadas após o feedback dos clientes e provavelmente devido a testes.
• Nas imagens de apoio da área central, foi retirada a opção de link de texto
da imagem, mantendo somente a imagem como um link.
• Ausência de gif, troca pelo flash , porém a quantidade de textos continua
grande.

17. 2004
- Os grafismos utilizados
anteriormente são
substituídos por um
layout mais simples e
clean, priorizando as
cores institucionais
(vermelho, azul e branco,
nesta ordem de
importância).
- O topo agora contém o
logo no canto esquerdo,
acima o campo de
seleção do país (sinaliza
que o site já é adaptável
para diferentes idiomas
na mesma página),
campo de busca ao lado
e no canto direito dois
botões com as tags
“como comprar” e “loja
Xerox”. Agora o banner
institucional é animado.
Menu principal teve os
seus ícones mudados e
agora está menor,
apresentando somente
quatro botões. ou seja,
uma estrutura mais direta
e simples para o acesso
ao conteúdo do site.
- O conteúdo agora
apresenta uma estrutura
mais harmônica e tem
somente duas colunas,
uma da esquerda menor,
um menu com
informações úteis para o
cliente e outro com
informações sobre a
empresa e do lado,
direito, links para os
principais produtos e
para promoções, além de
dois banners com
propaganda de produtos
de lançamento.
- O rodapé do site com o
menu de apoio e o logo
associado a marca das
Olímpiadas e com a
sinalização de marca
registrada e direitos
reservados.
- Chamadas mais
concentrada, menos
conteúdo espalhado pelo
site

18. 2004
• Neste ano o site sofre novamente grandes mudanças. Os grafismos utilizados
anteriormente são substituídos por um layout mais simples e clean, priorizando as
cores institucionais (vermelho, azul e branco, nesta ordem de importância).
• O topo agora contém o logo no canto esquerdo (mesma posição das versões
anteriores), acima o campo de seleção do país (grande melhoria em relação a
versão anterior, pois sinaliza que o site já é adaptável para diferentes idiomas na
mesma página), com o campo de busca ao lado e no canto direito dois botões com
as tags “como comprar” e “loja Xerox”. Agora o banner institucional é animado e
fica abaixo do menu principal e este teve os seus ícones mudados novamente e
agora está menor, agora apresenta somente quatro botões, ou seja, uma estrutura
mais direta e simples para o acesso ao conteúdo do site.
• A parte do conteúdo agora apresenta uma estrutura mais harmônica e tem somente
duas colunas, uma da esquerda menor com um menu com informações úteis para o
cliente e outro com informações sobre a empresa e uma maior do lado direito com
links para os principais produtos do momento, links para promoções e dois banners
de propaganda de produtos de lançamento.
• O rodapé do site continua com o menu de apoio, mas agora apresenta o logo
associado a marca das Olímpiadas e também com a sinalização de marca registrada
e direitos reservados.
• Chamadas mais concentrada, menos conteúdo espalhado pelo site

19. 2005
- O botão "home" volta
para o menu principal
em primeira posição.
- Destaques para
produtos recomendados
na Home.

20. 2005
• O botão "home" volta para o menu principal em primeira posição.
• Destaques para produtos recomendados na Home.

21. 2006
- Cor da logo menos
explorada no site. Menu
passa a ser azul e a cor
laranja é usada para
destacar categorias nos
links laterais.
- Aparece mais um menu
horizontal com três
informações
possivelmente
consideradas mais
importantes: HOME,
Como Comprar, Fale
Conosco.
- Menu horizontal de
produtos ganha
dropdown.
- Rodapé ganha cor mais
neutra. Cores são usadas
para hierarquizar
destaque de informações.

22. 2006
• Cor da logo menos explorada no site. Menu passa a ser azul e a cor
laranja é usada para destacar categorias nos links laterais.
• Rodapé ganha cor mais neutra. Cores são usadas para hierarquizar
destaque de informações.
• Aparece mais um menu horizontal com três informações possivelmente
consideradas mais importantes: HOME, Como Comprar, Fale Conosco.
• Menu horizontal de produtos, ganha dropdown.

23. 2008
- Neste ano houve a
maior reformulação do
site, inclusive no logo da
empresa. Site maior,
mas amplo.
- Dispensa do botão
"Home" no menu
principal, utilização de
link na logo
- Destaque de notícias,
momento em que o
conteúdo começa a
ganhar importância
- Site clean, sem muitas
bordas e linhas e com
maior organização de
conteúdo. Utilização de
cores e imagens no
dropdown do menu.
- Utilização de fontes
pequenas em quase
toda a Home, para
melhor organização e
entendimento.
- Mouseover padrão
para o links.
- Maior destaque para
banner em flash com
informações de
responsabilidades e
sustentabilidade da
empresa. Empresa se
preocupa mais com
responsabilidade sócio
ambiental.

24. 2008
• Neste ano houve a maior reformulação do site, inclusive no logo da empresa.
Site maior, mas amplo.
• Dispensa do botão "Home" no menu principal, utilização de link na logo.
• Maior destaque para banner em flash com informações de responsabilidades e
sustentabilidade da empresa. Empresa se preocupa mais com responsabilidade
sócio ambiental.
• Destaque de notícias, momento em que o conteúdo começa a ganhar importância
• Site clean, sem muitas bordas e linhas e com maior organização de conteúdo.
Utilização de cores e imagens no dropdown do menu.
• Utilização de fontes pequenas em quase toda a Home, para melhor organização e
entendimento.
• Mouseover padrão para o links.

25. 2010
- Aparecimento do Blog,
como canal de novidades
da Xerox

26. 2010
• Aparecimento do Blog, como canal de novidades da Xerox.

27. 2011
- Mudança de Menu para
um formato que destaca
dois itens importantes:
Produtos e Serviços.
- Home mais estática,
apenas com a
movimentação do
banner, mas sem
utilização de Flash.
- Banner ocupa a maior
parte da Home.
- Diminuição de
informações em
destaques. Muitas
passaram para o rodapé
como link.
- Utilização de
bordas, como box e
links em imagens e
"call to action".
- Divulgação da
loja Virtual, o que
leva a crer que é
por esse motivo
que possui menos
informação em
destaque.
- Utilização do
termo "contato" no
menu.

28. 2011
• Mudança de Menu para um formato que destaca dois itens importantes:
Produtos e Serviços.
• Home mais estática, apenas com a movimentação do banner, mas sem
utilização de Flash.
• Banner ocupa a maior parte da Home.
• Diminuição de informações em destaques. Muitas informações passaram
para o rodapé como link.
• Utilização de bordas, como box e links em imagens e "call to action".
• Divulgação da loja Virtual, o que leva a crer que é por esse motivo que
possui menos informação em destaque.
• Utilização do termo "contato" no menu.
• Divisão do site em parte branca e barra cinza, causa a impressão de
termino da Home.

29. 2012
- Integração com redes
sociais e blog .
- Nota-se uma inversão
de “produtos” por
“serviços” na posição do
menu do site,
provavelmente por
algum resultado de teste.

30. 2012
• Site passa a ser Integrado com redes sociais.

31. 2013
- O site não foi
mais reformulado
este ano, mas
nota-se a inclusão
de imagem dos
produtos e
serviços no
menu, além de
links e botões
que levam direto
para a loja online
ou para busca de
loja física.

32. 2013
• O site não foi mais reformulado este ano, mas nota-se a inclusão de
imagem dos produtos e serviços no menu, além de links e botões que
levam direto para a loja online ou para busca de loja física.

33. OBRIGADO!