Centro Universitrio Estcio do Cear

Construo do Website Delcias de

Brownie
Robson Gomes da Silva

Ruth Lopes Ramos Vieira

RESUMO

Neste Trabalho de Concluso de Curso ser apresentado os processos

de construo de um website da empresa Delcias de Brownie, na
introduo ser feito um breve histrico sobre a origem do brownie,
suas histrias e lendas registradas. Alm de citar os avanos que de
modo geral ocorreram nas empresas aps o uso da internet para
divulgao de seus produtos e o papel da internet como principal
veculo de publicidade. Este projeto tem como principal objetivo
lanar esta homepage que servir de vitrine dos produtos a serem
visualizados pelos consumidores e potenciais clientes. Atravs de
pesquisas e tcnicas de usabilidade foram contruidas as interfaces
adotando tipologias, alinhamentos, cores e grids que fortaleam a
identidade visual da empresa, para construo de um layout
visualmente agradvel e com contedo informativo sobre os
produtos, dessa forma o usurio deste website poder se sentir a
vontade em interagir, conhecer os produtos e ter controle no uso de
todas as ferramentas oferecidas pelo website.

Palavra chave: Design, webdesign e diagramao

INTRODUO
A internet modernizou-se e tornou-se popular em todos os nveis de classe social, com
ela surgiram novas possibilidades com imensas formas de mostragem. O que antes era
restrito a determinado segmento, hoje no h limitao. Sempre em busca de novas
formas de publicidade, a internet emergiu com um grande potencial de
empreendimento.

A liberao da internet para fins comerciais provocou uma revoluo inesperada

em diversos setores, como o comercial, publicitrio, o industrial e, obviamente
o tecnolgico. Confiando no poder e na fora da rede, grandes empresas
adquiriram seus domnios pontocom e colocaram na internet seus servios
para l de conhecidos. (DAMASCENO, 2003,p.147).

Um website mas do que um carto de visita virtual, uma loja virtual que no
fecha e pode ser acessado em qualquer lugar e a qualquer momento. Tornou-se um
instrumento de publicidade muito eficiente.

Para se ter um website de sucesso preciso atender aquilo a que se destina, ou

seja, satisfazer o usurio na busca da informao ou aquilo que ele deseja. Um site deve
ser harmonioso, ter forma, funo e equilbrio entre os elementos sem perder a atrao e
simplicidade na composio.

O estudo da concepo visual da internet chamou a ateno dos designers

grficos, que descobriram e aperfeioaram o uso de ferramentas avanadas de
criao grfica. (DAMASCENO, 2003, p.7).

Estes so conhecimentos pertinentes ao desenvolvimento de um website que

divulgue, o Brownie Delcias de Brownie, que uma empresa registrada e que
comercializa produtos feitos a partir do chocolate.

O Brownie, assim que qualquer pessoa fala ao lembrar-se desse bolo, que
foi criado nos Estados Unidos, e que aos poucos se tornou uma adorao mundial
(Histria da Gastronomia, by Pedro Frade, 2012). O Brownie um bolo que no
cresce, contem muito chocolate, tem nozes em sua massa, e marrom escuro assim
como seu nome relata.
 Ele o favorito baked treats (bolinhos assados) dos americanos, e
conquistou o Brasileiro rapidamente. Assim como outras receitas, o Brownie
tambm no possui origem certa, mas sabemos que ele apareceu para o mundo no
inicio do sculo 20.

A criao do Brownie cercada de lendas e mitos, e por isso no existe uma

confirmao sobre qual regio ele nasceu. Mas muitos dados histricos apontam
para a regio deNew England, no nordeste dos EUA.

Das vrias lendas que existem sobre a origem do Brownie, muitas contam de
cozinheiros que se esqueceram de acrescentar fermento, farinha e etc. Porem, a mais
famosa conta de uma dona de casa que estava fazendo bolo de chocolate, e
esqueceu-se de colocar fermento em p na receita. Aps assar e perceber que no
tinha crescido, a dona de casa serviu assim mesmo as fatias planas.

O primeiro registro de uma receita de Brownie, apareceu para o mundo

em1896. Mas alguns historiadores de culinria, afirmam que o primeiro registro foi
em1909, em uma verso com menos chocolate do que o atual (Larousse
gastronomique, Prosper Montagn, 1938).

No sabemos uma origem certa para o Brownie, e provavelmente jamais

iremos saber quem o inventou, mas possvel perceber que ao longo dos anos o
Brownie passou por algumas evolues, principalmente na quantidade de chocolate
que aumentou a cada nova receita.

Palavras chave: Farinha, manteiga, chocolate, acar, ovos, brownie.

2. OBJETIVO

Este projeto tem como principal objetivo criar um website para difundir os
produtos da empresa Delcias de Brownie atravs de propaganda, torn-lo conhecido,
coletar sugestes, receber pedidos e consequentemente alcanar o maior nmero de
consumidores. Haver exposio de produtos e da produo dos produtos atravs de
fotos e mostragem de tipos e sabores.

3. METODOLOGIA

A metodologia para o desenvolvimento do projeto do website ser realizada a

partir de pesquisas em livros cujos assuntos sejam relacionados com interfaces grficas,
construo e usabilidade em web sites, livros de receitas com entrevistas de chefs cuja
gastronomia seja prxima ao principal produto do website que ser desenvolvido, o
brownie.

4. JUSTIFICATIVA

O projeto a ser apresentado trata-se da construo de um website, construdo no

software Adobe Muse CC verso 2014.3 em um notebook Sony Vaio com processador
Intel Core I5. Usado aspectos presentes neste software, onde possvel fazer a
construo baseado nas caractersticas e formas de um homepage tradicional sem o uso
de programao HTML. Conforme abaixo, que mostra o mapa geral do site.
 Nos dias atuais o uso das mdias digitais so de grande importncia para
divulgao de servios e produtos, estas mesmas mdias se adaptam aos ambientes de
acesso dos usurios, e estes as adaptam s suas necessidades.

Dessa forma, ser feito um breve relato sobre as configuraes e mtodos

utilizados na construo do site www.deliciasdebrownie.com.br, estas configuraes
so:

Tipografias: O estilo de fontes utilizadas so Helvetica e Swis 721 Ll Bt

Linght que conforme o autor Jakob Nielsen do livro usabilidade ressalta que esta uma
tipografia de boa visualizao e fcil entendimento, j a tipografia utilizada no nome da
marca Alex Brush Regular uma fonte com estilo e despojada, que ressalta uma
desenvoltura. Ambas as fontes so boa interpretao e fcil leitura em monitores, rtulos
e material grfico.

Alinhamento dos textos: Textos longos esto justificados e textos curtos esto
centralizados para facilitar a leitura e haver ligao com as respectivas imagens
relacionadas. Quanto ao tamanho, foram utilizadas entre 12pts e 18pts. Entrelinha de
1,5 equivalente a 50% o tamanho da fonte para que haja boa legibilidade.
 Cores: As cores utilizadas tem como referncia os tons de chocolate e seus
derivados, que tem elementos que buscam d sentido de identidade e valorizar o
conceito e fortalecer o ramo que est direcionado, os brownies.

O ideal que os sites, programas e emails tenham fundos em tons

pastis, mais reflexivas e sobre os quais mais fcil de enxergar. (O Globo,
Info Etc., 19.3.2007)

Grids: Os grids inseridos na pgina mestre e se mantm consistentes em todas as

pginas, permitindo a criao de ambientes visualmente harmoniosos e com rigor
conceitual.
 Os grids serviram como base para estruturar o layout, mantendo uma
organizao no ambiente virtual mantendo o posicionamento dos elementos para que o
usurio tenha facilidade de controlar as funcionalidades e possa ter controle no uso das
ferramentas

Em relao ao layout, este possui uma estrutura visual e informaes

padronizadas para manter a orientao do usurio. Os ttulos, barras, links e formulrios
de endereos ou correspondncia possuem facilidade de uso, que conforme as tcnicas
da usabilidade e interatividade com usurio tem o potencial de automanipulao, ou
seja, funcionalidade e facilidade de uso.

A interface uma das partes mais importantes de um website, pois concentra a relao
visitante-sistema. o que apresenta informaes e estmulos e recebe respostas, colocando a
manipulao nas mos do usurio. Por isso, muito mais que um visual bonitinho, deve ser o
elemento de transio entre o mundo real e o digital. O ideal que ela seja transparente,
invisvel, natural, sinttica, intuitiva, prtica (RADFAHRE, 1998. p. 106).
 Todas as interfaces possuem o mesmo templates, ajudando a reforar a
identidade visual no site, dando ritmo e continuidade, dando consistncia entre as
pginas aos elementos que se repetem, como fontes, imagens cabealho e rodap,
fazendo com que o usurio tenha uma adaptao e manipulao mais acessvel ao site,
evitando que no seja possvel encontrar algo que se esteja procurando.

Segundo MARTIM (1992), estar perdido em um site, como em qualquer outro

sistema de hipertexto, a situao na qual o usurio no compreende a sua organizao,
no encontra o que procura ou at se a informao desejada est disponvel. uma
situao bastante comum de se observar, at entre os fluentes na linguagem da web.

Os usurios inexperientes se sentem oprimidos por homepages que no os

ajudam a entender claramente suas opes. Quando no conseguem entender um
website, os usurios podem ficar confusos ou envergonhados, e dificilmente eles
voltaro novamente. Eles simplesmente abandonaro o site e procuraro outros em que
se sintam mais bem acolhidos. Os usurios mais experientes costumam no esquecer da
primeira experincia. Se suas necessidades atuais no forem atendidas, eles lembraro
dessa ocorrncia.
Seria difcil estimar quantas vendas on-line so perdidas por causa de informaes sobre
produtos confusas No catlogo de produtos de um website , no h um produto
tangvel para segurar, nem vitrines de produtos para inspecionar, nenhum vendedor ao
qual pedir ajuda. Os Websites devem preencher essa lacuna tornando o processo de
busca o menos indolor possvel.

As descries de produtos precisam ser detalhadas o suficiente para dar uma boa
ideia do produto ou servio para as pessoas e ajud-los a diferenciar as opes, caso
contrrio no ser possvel ganhar a confiana do cliente. Permita que os usurios
aumentem as fotos para uma visualizao detalhada dos produtos. Ver um detalhe
especfico ou avaliar uma textura pode dar aos compradores a confiana de que
precisam para fazer um pedido on-line. Disponha informaes em camadas revelando os
pontos-chave primeiro e facilite o trabalho dos compradores de obter informaes
especficas

De acordo com Jakob Nielsen para que o usurio possua uma melhor aceitao e
interatividade com a interface, ele deve saber o caminho percorrido e deve receber um
retorno, ou seja, deve ser sinalizado por uma resposta da tela, mudando uma cor ou
posicionamento de um link ou cursor.

Jakob Nielsen, em estudo com objetivos semelhantes, afirma que os usurios de

modo geral leem as pginas de acordo com um padro de movimentos que desenha um
F: duas linhas horizontais da esquerda para a direita, e uma linha vertical, de cima
para baixo, esquerda.
 Neste estudo, afirma que os usurios raramente leem os textos linearmente,
normalmente pulam palavras e frases, capturando os elementos de modo a editar um
texto fragmentado, a partir de seu interesse. Como a leitura irregular, os dois primeiros
pargrafos de cada tela sinalizam a informao mais importante, e o leitor sabe de
imediato se o texto o interessa ou no.

A importncia do alto da pgina pode parecer evidente, mas no . comum

encontramos informaes importantes na base de pginas, sendo que a maioria dos
usurios, no encontrando de imediato o que procura, vai em busca outros sites. Por
essa razo, evitou-se usar barra de rolagem e informaes de extrema relevncia ficaram
em locais estratgicos no layout.

O alto da tela o lugar onde muitos sites apresentam suas barras de navegao,
posicionando a as informaes importantes, porque mais visualizado imediatamente
quando aps o acesso. Podemos acrescentar ainda que, independentemente da sua
localizao, os elementos mais importantes ou os comandos mais teis, devem ser
claramente destacados, para que seja mais fcil encontr-los. Quanto mais comandos e
botes houver na tela, mais difcil para o usurio encontrar o que procura.

O equilbrio de espaos preenchidos e espaos em branco ajuda a realar os

elementos mais importantes, para que fique mais fcil localiz-los. Os usurios gastam
em mdia 27 segundos em cada pgina da Web 66% dos usurios completaram as
tarefas com sucesso. (NILSEN, Usabilidade na Web: Projetando Websites com
qualidade. 2007)

4.1. Problemas mais significativos da usabilidade

Links que no mudam de cor quando visitados;

Alterar a funo do boto Voltar;

Abrir novas janelas de navegador;

Janelas pop-up;

Elementos de design que parecem anncios;

 Violao das convenes da Web;

Contedo vago e modismo vazio e

Contedo denso e texto no-escanevel.

4.2. Quatro razes para apresentar textos informativos:

Aumentam a credibilidade mostrando sua experincia no assunto e motivao

genuna em ajudar

Ajudam os clientes a diferenciar entre produtos alternativos

Fornecem informaes para dar suporte s decises de compra do cliente

Contm palavras-chave que aprimoram a visibilidade do sistema de pesquisa e

aumentam o trfego no seu site

muito importante praticar a simplicidade antes de adicionar um elemento de

design ao site, pergunte a si mesmo: Isso simplifica a tarefa do usurio? Agrega valor ao
usurio? Se a resposta for no, elimine-o. (NILSEN, Usabilidade na Web: Projetando
Websites com qualidade. 2007)

5. CONCLUSO:
 Aps a realizao da pesquisa bibliogrfica, seguindo as referncias de Jakob
Nielsen foi possvel construir um site atendendo os objetivos que foram mostrar todas
os produtos produzidos por Delcias de Brownie de forma que eles possam se tornar os
produtos conhecidos pelos atuais consumidores e futuros clientes, desta forma conclui-
se que o site apresenta boa usabilidade e interatividade entre as interfaces.

O site de uma empresa sua representao na web, que atinge cada vez mais
pessoas com cobertura mundial. Pequenos problemas que prejudiquem a experincia do
usurio podem se transformar em um grande problema para a empresa, influenciando
suas vendas e sua imagem. As empresas tm pouco tempo para prender a ateno de
seus usurios e mostrar que vale a pena navegar em seu site. Se ele se sentir satisfeito,
sua visita pode valer vendas, credibilidade e fidelidade de seus clientes ou resultar em
descontentamento, insatisfao e irritao de um usurio que poderia ter se tornado um
cliente lucrativo. Por essa razo o site Delcias de Brownie, procurou atender a todos
estes requisitos mantendo um site prtico, sem ser cansativo e com contedo necessrio
e esclarecedor aos usurios.

BIBLIOGRAFIA

MEMRIA, Felipe. Design para Internet: Projetando a experincia perfeita. Rio de

Janeiro: Elsevier, 2005.
 NILSEN, Jakob. Usabilidade na Web: Projetando Websites com qualidade. Rio de
Janeiro: Elsevier, 2007.

DAMASCENO, Anielle. Webdesign Teoria e Prtica. Rio de Janeiro: E. Visual

Books, 2003.

http://www.petitgastro.com.br/historia-da-gastronomia/brownie/. Acesso em 14 de
maro de 2015.

NIELSEN, Jakob; TAHIR, Marie. Homepage: USABILIDADE - 50 Websites

Desconstrudos. Campus, 2002. 315p.

FERREIRA, Simone Bacellar Leal; NUNES, Ricardo Rodrigues. e-Usabilidade. Rio de

Janeiro: LTC. 192p.

KRUG, Steve. No me faa pensar. So Paulo. Market Books, 2001.

RADFAHRE, L. Design web design. So Paulo: Market Press, 1998.