PONTIFÍCIA UNIVERSIDADE CATÓLICA DE CAMPINAS

CENTRO DE LINGUAGENS E COMUNICAÇÃO

DESIGN DIGITAL
LABORATÓRIO DE PROGRAMAÇÃO WEB

REDESIGN DE WEBSITE

GIULIA CERRUTI, RA: 20106894

GABRIELA FORMENTI, RA: 20006623
HELOISA FURQUIM, RA: 20628871
ISABELLA NISTA, RA: 20093019
JOÃO MARTIN, RA: 20119467

Campinas
2022

1
 RESUMO

O projeto tem como objetivo desenvolver o redesign do website “Água Frescca”,

uma marca produtora de água mineral, sediada em Cotia – São Paulo. A fim de
solucionarmos os problemas do website atual para otimizar a experiencia na
navegação dos usuários de uma maneira mais simples, foi realizado uma análise
de toda estrutura para a remodelação. A partir daí, ultilizamos ferramentas para
auxiliar nesse processo, como o wireframe e o mapa do site, além de
desenvolver todo o projeto através da linguagem de marcação HTML, estilização
do documento no mecanismo CSS e a linguagem de programação JavaScript.

Palavras-chave: Website, Redesign, HTML, CSS e JavaScript.

2
 ABSTRACT

The project aims to develop the redesign of the website "Água Frescca", a
brand that produces mineral water, based in Cotia - São Paulo. In order to solve
the problems of the current site to optimize the users' browsing experience in a
simpler way, an analysis of the entire structure was carried out for the
remodeling. From there, we used tools to assist in this process, such as the
wireframe and the site map, in addition to developing the entire project through
the HTML markup language, document styling in the CSS engine and the
JavaScript programming language.

Keywords: Website, Redesign, HTML, CSS and JavaScript.

3
 SUMÁRIO

INTRODUÇÃO................................................................................................................ 5

PROBLEMÁTICA E OBJETIVOS ........................................................................................... 5

PROCEDIMENTOS METODOLÓGICOS .............................................................................. 5

RESULTADOS ........................................................................................................................... 6

DISCUSSÃO ............................................................................................................................. 12

CONCLUSÃO ........................................................................................................................... 12

REFERÊNCIAS ........................................................................................................................ 13

4
 INTRODUÇÃO

A marca Frescca produz água mineral natural, composta de sais minerais

e baixo teor de sódio, contribuindo para uma melhor digestão. A produtora de
água mineral, está situada entre as mais modernas fontes do mundo, assim o
processo de envase garante que a água chegue ao consumidor com a mesma
pureza da fonte.
A função do design é melhorar a vida das pessoas através da forma e da
função. Nesse trabalho fizemos um redesign do website Água Frescca, o qual
foi encontrado alguns problemas de usabilidade, a fim de tornar a experiência
que o usuário tem ao usar a plataforma em uma experiência boa

PROBLEMÁTICA E OBJETIVOS

O site “Frescca” foi escolhido para o redesign, pois, fazendo a verificação

das suas concorrentes, ela não transpassava segurança e confiabilidade que
uma empresa de Água Mineral precisa ter. Nos elementos do Design ela não
possuía alinhamento em suas leituras, tirando o foco do usuário diversas vezes.
O design do website, em vários momentos, não concordava com os princípios
de Nielsen, que preza pelo alto nível de usabilidade de uma interface, justificando
a necessidade de um retrabalho.

PROCEDIMENTOS METODOLÓGICOS

Os métodos utilizados para o desenvolvimento do site, foi através da

linguagem de marcação HTML, linguagem de estilização CSS e a linguagem de
promagramação JavaScript para algumas interações dentro do website,
juntamente com o Bootstrap que é um frimework web com Open Source para o
desenvolvimento Frontend e a facilitação em deixá-lo responsivo.

5
 RESULTADOS

Para o desenvolvimento do website, fizemos um wireframe das páginas

para representarmos as ideias e, ao longo do processo, chegarmos a melhor
solução na versão final.
Além disso, foi feito um mapa do site, que auxiliou como uma ferramenta
para ajudar a organizar a estrutura do website.
Após essas etapas, chegamos ao redesign do website Água Frescca.

• Wireframe
1. Página Home

6
2. Página Empresa

3. Página Embalagens

7
 4. Página Contato

• Mapa do Site

8
• Versão final

(Página Inicial)

9
 (Página Inicial)

(Página “A Empresa”)

10
(Página “Embalagens”)

(Página “Contato”)

11
 DISCUSSÃO

Na página Inicial, foi inserido um menu com a tag “nav” em seu

cabeçalho que direciona os usuários para as principais páginas do website. As
informações foram reestruturadas, porém, sempre pensando na sua versão
inicial, com sua paleta de cores, e foi adicionada a tipografia Poppins para uma
visualização e leitura confortável do site.

CONCLUSÃO

A partir dos resultados mostrados, concluímos que o redesign das páginas

Home, Empresa, Embalagens e Contato, otimizou estrategicamente a
usabilidade do usuário ao utilizar o site.
Há uma melhora na navegação entre as páginas, além do design,
condizer com a identidade da Frescca através das suas formas que remetem a
movimentação da água.
A união desses fatores, fez com que o resultado cumprisse os seus
objetivos. O redesign trouxe uma melhora na experiência dos usuários,
deixando-o mais dinâmico, com uma interface agradável, uma boa usabilidade e
um design intuitivo.

12
 REFERÊNCIAS

Água Mineral Frescca, Fonte de Vida. Água Mineral Frescca, Fonte de Vida.
Disponível em: <https://aguafrescca.com.br/>. Acesso em: 21 nov. 2022.

PATEL, Neil. Usabilidade Na Web: O Que É e Como Evitar Problemas em

2022. Neil Patel. Disponível em: <https://neilpatel.com/br/blog/usabilidade-na-
web/>. Acesso em: 21 nov. 2022.

FELIPE MELO GUIMARÃES. 10 Lições Incríveis de Usabilidade de “Não Me

Faça Pensar”. Medium. Disponível em: <https://medium.com/aela/10-
li%C3%A7%C3%B5es-incr%C3%ADveis-de-usabilidade-de-n%C3%A3o-me-
fa%C3%A7a-pensar-4a8bcaf1ccac>. Acesso em: 21 nov. 2022.

13