linda

de bonita
WEBSITE E IDENTIDADE VISUAL
 DECLARAO DE DIREITO AUTORAL

Eu, Jlia Figueiredo de Lima, portadora do RG 49.976.062-1 e CPF

467.087.728-33, matriculada no 4 semestre do curso tecnolgico de
Produo Multimdia da Universidade Santa Ceclia (UNISANTA),
conforme a Lei n 9.610 de 19 de fevereiro de 1998 (Lei de Direitos
Autorais) por meio deste documento, declaro que o Trabalho Final de
Curso Linda de Bonita de minha autoria e no possui existncia de
plgio. Onde qualquer material extrado possui referncia
bibliogrfica citada no final deste relatrio. Tenho cincia de que caso
seja constatado a existncia de plgio, eu serei penalizada.

Santos, ____ de _______________ de 2017.

__________________________________
Jlia Figueiredo de Lima
 NDICE

APRESENTAO 09

OBJETIVO 11

PBLICO 13

MERCADO 15

JUSTIFICATIVA 17

DEFINIES 19

PESQUISA 23
COMPREENDENDO O PBLICO ALVO E SEU MERCADO 23
ANLISE DE MERCADO 24
CONHECENDO A CLIENTE 29
AS REFERNCIAS 30

DESENVOLVIMENTO E CRIAO 35
DISCIPLINAS RELACIONADAS 36

WEBSITE 39
TCNICAS E TECNOLOGIAS UTILIZADAS 40
DISCIPLINAS RELACIONADAS 44
DIAGRAMA DE ARQUITETURA DA INFORMAO 44
WIREFRAMES 45
PALETA DE CORES 52
TIPOGRAFIAS UTILIZADAS 53
RESOLUES E BROWSERS COMPATVEIS 53
PGINA INICIAL 54
PGINA SOBRE NS 56
PGINA PRODUTOS 59
PGINA INTERNA DE PRODUTOS 62
PGINA COMPRAR 65
COMENTRIOS FINAIS 67

IDENTIDADE VISUAL 69
TCNICAS E TECNOLOGIAS UTILIZADAS 69
DISCIPLINAS RELACIONADAS 71
CRIAO 71
PALETA DE CORES 72
 NDICE
TIPOGRAFIAS UTILIZADAS 72
COMENTRIOS FINAIS 73

CONCLUSO 75

BIBLIOGRAFIAS 77

REFERNCIAS 79

ANEXOS 81

AGRADECIMENTOS 83
 APRESENTAO
O Trabalho Final de Curso - Linda de Bonita, um projeto que
consiste na criao de um website e a reformulao da identidade
visual atual da marca.

Criado em novembro de 2013 e administrado por Dandara

Mello, o Linda de Bonita um empreendimento materno de
acessrios para bebs e crianas feitos artesanalmente sob
encomenda. Todo o processo de recebimento dos pedidos,
confeco e divulgao da loja feita pela mesma.

Tendo em vista isto, foi feita uma proposta de criao de um

site e um novo logotipo, o que a auxiliaria no gerenciamento de seu
negcio.

06
 OBJETIVO
O projeto tem como objetivo principal promover uma nova
identidade visual para o logotipo j existente e a criao um website, o
que ser uma grande ferramenta de trabalho, pois alm de auxiliar na
divulgao da loja tambm facilitar o atendimento e a comunicao
com seus clientes.

Com visual simples e funcional, o site contar com alguns

atributos essenciais para o seu desenvolvimento. Entre eles est uma
galeria de imagens que servir como uma espcie de vitrine virtual
com especificaes e detalhes de cada produto, com uma interface
responsiva para dispositivos mveis e tablets, alm disso, contar
com uma interao com suas mais importantes ferramentas de
divulgao e trabalho, so elas: Facebook, Instagram e WhatsApp.

07
 PBLICO
Este projeto direcionado a mulheres que gostam de
acessrios para cabelos. Estas mulheres podem ser tanto mes que
buscam acessrios diferenciados, que so feitos de forma artesanal
para seus filhos, quanto para seu prprio uso.

Embora a faixa etria de um modo geral seja entre 0 e 30 anos

de idade, o projeto possui um pblico ativo mais voltado para crianas
de 0 a 12 anos.

Por possuir uma linha de produtos femininos e masculinos,

seu pblico infantil varia entre os dois gneros, entretanto, o pblico
feminino est presente em maior nmero e por isso possui mais
destaque. Alm disso, existe uma grande demanda dos produtos em
geral, pois servem como uma tima lembrancinha em chs de beb,
aniversrios ou outras comemoraes.

08
 linda
MERCADO
dedebonita
Ao desenvolver uma pesquisa mercado, foi concludo que
este ramo de produtos artesanais, ou, produtos feitos mo est em
constante evoluo e vem sido muito procurado ultimamente. O
pblico reconhece este novo mercado e o valoriza cada vez mais.

Desta forma, deixa de consumir grandes marcas e passa a

consumir produtos de qualidade feitos com carinho e dedicao.

Durante a anlise de mercado, foram apontadas cinco

marcas tambm com a mesma proposta do Linda de Bonita, so
estas: Frida Laos, Laaroty, Menina de Lao, Dona Florzinha e
Dumdum Laos.

Todas estas cinco empresas possuem a mesma concepo

do Linda de Bonita e tratam-se de empreendimentos de mes e
artistas que sentiram necessidade em inovar o mercado.

09
 JUSTIFICATIVA
Aps dois anos de faculdade, natural desenvolver certa
facilidade e afinidade em uma rea ou disciplina especfica, na qual
gostaramos de nos aprofundar e apresentar um trabalho final de
curso que tenha a cara daquilo que mais gostamos.

Desde o incio do curso, identifiquei quais as reas nas quais

mais me interessava e que gostaria de trabalhar nele e aps ele. Hoje
me realizo, pois vejo que consegui reunir em um nico trabalho a rea
que foi o pontap inicial para que eu ingressasse no curso, fotografia,
e as duas outras reas que conheci durante o decorrer das aulas e que
tambm me apaixonaram: web design e design grfico.

Apesar de meu trabalho no estar diretamente ligado

fotografia, ela torna-se um elemento essencial, pois a partir dela
possvel transmitir sentimentos, mensagens e apresentar imagens
dos produtos da marca.

Como este o trabalho mais importante que faremos at

aqui, tive em mente que gostaria de fazer algo que fosse concreto e
real. No estava em meus planos concluir este projeto e deix-lo
dentro de uma caixa.

Tendo em mente isto, comecei a procurar algum micro

negcio que talvez no tivesse condies para arcar com o custo de
um site ou uma identidade visual para sua marca. Foi a que conheci o
Linda de Bonita e sua idealizadora, Dandara.

Uma das partes de meu trabalho final a criao de um

website, no qual funcionar como uma espcie de vitrine virtual, que
disponibilizar fotos e importantes informaes para a efetuao dos
pedidos. Tendo como propsito agilizar o atendimento dos clientes e
a divulgao da marca em outra plataforma digital.

10
 Aproveitando o clima de mudanas, a segunda parte do
trabalho consiste na criao de uma identidade visual completa para
o projeto.

Como o objetivo inicial sempre foi desenvolver algo slido,

incorporando as ferramentas necessrias e os conhecimentos
adquiridos ao longo do curso, por se tratar de um trabalho
desenvolvido para a web, ele possui alta viabilidade, pois possui um
baixo custo para sua produo, onde os gastos estariam focalizados
na hospedagem e servidor do mesmo. Portanto, torna-se possvel a
sua efetivao.

11
 DEFINIES

O QUE UM WEBSITE?

Um website, ou somente site, um conjunto de pginas ou

uma nica pgina que possuem relao entre si, nas quais podem ser
acessadas na internet atravs de um endereo URL. Em suas
pginas, possvel adicionar textos, imagens, vdeos, entre outros.

O QUE URL?

a abreviatura de Uniform Resource Locator e indica um

endereo virtual no qual disponibilizado um mecanismo em uma
rede. Este mecanismo pode ser um website, uma pgina, ou outro
acessrio acessvel da internet.

O QUE INTERNET?

uma rede mundial de computadores, que possui redes

interligadas. Estas redes permitem o acesso e troca de informaes
em qualquer lugar do planeta.

O QUE HTML?

O HTML uma das linguagens utilizadas para o

desenvolvimento de sites. Sua palavra de origem vem do ingls e
significa Hypertext Markup Language, seu significado em portugus
Linguagem de Marcao de Hipertexto. O HTML a linguagem base
da internet.

12
 O QUE CSS?

O CSS uma folha de estilo composta por diversas

camadas e utilizada para definir a aparncia em pginas da internet.
Sua denominao vem do ingls Cascading Style Sheets e significa
Folha de Estilos em Cascata.

O QUE JQUERY?

jQuery um framework do JavaScript. Framework uma

srie de mtodos e classes prontos e compilados.

Tem como lema a frase Write less, do more (escreva menos,

faa mais). O jQuery revolucionou o desenvolvimento web e
atualmente est presente em inmeros projetos.

O QUE JAVASCRIPT?

Javascript uma linguagem de programao executada no

computador do prprio usurio. Ela utilizada para controlar o HTML
e o CSS e manipular comportamentos na pgina.

O QUE UM SITE RESPONSIVO?

Sites responsivos so aqueles que adaptam o tamanho das

suas pginas (alterao do layout) ao tamanho das telas que esto
sendo exibidos, como as telas de celulares e tablets.

Suas vantagens derivam da adaptao a qualquer

ferramenta que os usurios estejam usando para facilitar a sua
visualizao. Alm disso, os sites responsivos tambm podem
expandir para visualizaes de detalhes da pgina dando um zoom.

13
 O QUE SO MEDIA QUERIES?

uma tcnica que define condies para que um

determinado estilo seja aplicado a uma resoluo estabelecidas
anteriormente. So utilizados para criar sites responsivos.

O QUE BRIEFING?

Briefing um conjunto de informaes, uma coleta de dados

para o desenvolvimento de um trabalho. Palavra inglesa que significa
resumo em portugus.

um documento que contm a descrio da situao de

uma marca ou empresa, seus problemas, oportunidades, objetivos e
recursos para atingi-los. O briefing a base de um processo de
planejamento.

O QUE IDENTIDADE VISUAL?

A identidade visual pode ser definida como um conjunto de

elementos que representam visualmente uma instituio, nome,
produto ou servio. Este conjunto de elementos tem como base um
smbolo visual, que, em conjunto com paletas de cores, tipografias,
personagens, layouts e outros componentes, reforam esta
representao visual.

O processo de criao de uma identidade visual bastante

detalhado e criterioso. Para que a elaborao da identidade visual no
se perca, foi criado um documento tcnico que estabelece normas e
critrios para criao e reproduo da marca. Este documento chama-
se Manual de Identidade Visual.

14
 O QUE MINIMALISMO?

O minimalismo tem como principal caracterstica a criao

de obras com o mnimo de recursos e elementos possvel. Com um
nmero limitado de cores, o minimalismo privilegia formas
geomtricas simples e o uso de simetria.

O minimalismo surgiu nos anos 60 nos Estados Unidos. J a

palavra minimalismo, reporta-se a um conjunto de movimentos
artsticos e culturais que percorreram vrios momentos do sculo XX.

Com manifestos atravs de seus fundamentais elementos,

especialmente nas artes visuais, no design e na msica.

O QUE EMPREENDEDORISMO MATERNO?

Pode-se dizer que o empreendedorismo materno toda

atividade empreendedora causada ou relacionada diretamente a
maternidade. Ele possibilita uma jornada de trabalho flexvel,
garantindo um contato mais prximo entre me e filho.

15
 PESQUISA

COMPREENDENDO O PBLICO-ALVO E SEU

MERCADO

Aps reconhecer seu mercado e pblico-alvo, iniciei uma

pesquisa e constatei que este setor de produtos artesanais se
consolida no mercado cada vez mais. Apesar de abranger um pblico
direcionado, suas possibilidades e nichos so diversos.

A procura para este novo mercado crescente e a

comercializao de artigos para bebs um dos ramos promissores
dentro do varejo da moda.

As mes esto se unindo e tm ajudado mulheres com

objetivos e filosofia de vida semelhante. Este apoio, inclui consumir
produtos e servios elaborados pelas mesmas, alm da preferncia
em comprar produtos nos quais so exclusivos e customizveis.

Segundo o site Negcios RPC (afiliada Globo), em 2015:

O segmento de roupas infantis apresentou

resultados positivos recentemente, segundo dados do TGI
(Target Group Index).
A pesquisa mostra que, em Curitiba, o setor infantil
teve um ligeiro aumento em relao ao perodo anterior: de
16,3% para 17,8%.
Os nmeros no so grande surpresa para o setor,
que encontra seu pblico alvo dentro de uma faixa etria que
est em fase de crescimento, trocando de guarda-roupa com
certa freqncia e fazendo com que a demanda seja
constante. No entanto, o mercado acirrado e a conquista
pela preferncia dos consumidores fundamental.

16
 ANLISE DE MERCADO

Como mencionado anteriormente, foram apontadas cinco

marcas especializadas no mesmo setor do Linda de Bonita.

Todas elas possuem website, onde quatro das cinco lojas

possuem opo de compra online. Nem todos os sites possuem
adaptao para dispositivos mveis.

Alm do mais, possvel observar que a maioria dos sites em

questo apresenta um excesso de informaes apresentadas.

FRIDA LAOS

O website da Frida Laos o mais clean dos cinco, possui

elementos bem posicionados, embora haja pginas conflitantes em
relao ao design. possvel efetuar compras atravs do mesmo.

O site apresenta um pequeno erro de posicionamento de divs

na index e no possui adaptaes para dispositivos mveis.

LAAROTY

Laaroty possui uma loja online dentro do site e um dos

maiores sites desta seleo. adaptvel dispositivos mveis.

Apesar de apresentar design clean, o site possui um excesso

de informaes. Muitas imagens aparecem em conjunto, o que acaba
deixando o visitante confuso.

MENINA DE LAO

Embora possua um design chamativo, sua estrutura se

mantm simples e de bom entendimento. Alm de apresentar
responsividade, o site dispe de uma loja online com suporte ao
cliente.

17
 DONA FLORZINHA

Tambm se trata de uma loja online com suporte para

dispositivos mveis. Possui um menu e informaes importantes
posicionadas verticalmente, alm de conter uma seo com laos em
destaque.

DUMDUM LAOS

Apresenta uma estrutura simples, porm com design

extravagante.

Assim como o Linda de Bonita, seu site funciona como uma

vitrine virtual onde os produtos e suas informaes so expostas.

Suas escolhas de fonte no se adaptam a diversos tamanhos

de texto, o que causa certa dificuldade de leitura. O site no possui
suporte responsivo.

Abaixo, possvel observar algumas capturas de tela da

pgina inicial de cada site.

Pgina inicial Frida Laos

18
 Pgina inicial Laaroty

19
Pgina inicial Menina de Lao

20
 Pgina inicial Dona Florzinha

21
 Pgina inicial Dumdum Laos

CONHECENDO A CLIENTE

Foi desenvolvido um briefing com uma srie de perguntas

pertinentes ao assunto e dado cliente. Com ele, foi possvel sanar
algumas dvidas e definir uma linha a ser traada.

Este documento foi dividido em seis assuntos, nos quais

foram feitos questionamentos relevantes para o projeto. Este
material completo estar disponvel nos anexos deste livro.

Aps este breve briefing tambm realizamos um encontro,

nele definimos outros aspectos importantes para o projeto, como a
realizao dos wireframes e textos que compem o site: texto sobre a
histria do Linda de Bonita, descrio para os produtos, poltica de
vendas, entre outros.

22
 AS REFERNCIAS

As referncias esto divididas entre referncias web, que so

os sites nos quais me inspirei. E referncias de design, que so
logotipos j existentes nos quais serviram como inspirao para a
preparao do logotipo Linda de Bonita.

Nas referncias web, tive como refrencia trs sites, so

estes: Stebenev, Gaze Eyewear e Brooklyn Navy Yard, tendo os dois
ltimos atualmente um novo layout.

Todos estes sites so bem simples e possuem fcil

navegao e entendimento. Por mais que priorizem o visual, no
deixam de dar importncia s informaes.

Stebenev

23
Gaze Eyewear

24
 Brooklyn Navy Yard

Quanto s referncias de design grfico, tive como base

alguns logos de marcas j existentes e figuras retiradas da web.
Minha inteno era procurar algo minimalista, sem muitas
informaes e que tivesse uma boa legibilidade, pois o novo logo do
Linda de Bonita teria que seguir padres semelhantes.

A seguir, possvel analisar algumas destas imagens.

25
26
 DESENVOLVIMENTO E CRIAO
Para simplificar o entendimento do leitor, foi definido que
existir uma juno entre os captulos desenvolvimento e criao,
assim, possvel unir os assuntos e apresent-los da seguinte forma:

Web design: onde ser apresentada toda a estrutura do site. A

forma que o design que compe cada pgina foi pensado, a maneira
em que os itens esto posicionados e as engenharias aplicadas ao
site.

Design Grfico: mostrar a realizao e idealizao da nova

identidade visual. Como foram desenvolvidas as ideias, rascunhos e
conceitos por trs do logotipo.

Logo, possvel explicar detalhadamente cada parte do

processo de criao de cada rea especfica. Ao final, com este
conjunto possvel abranger e relacionar os dois temas de forma
minuciosa.

Apesar de no ser a opo mais recomendada, dei

preferncia em utilizar o software Corel Draw em suas verses x3 e
2017 para a realizao do relatrio e identidade visual. Onde nos dois
produtos foi feita uma padronizao de fontes, numerao de
pginas e tamanhos das fontes.

A fonte utilizada para os ttulos e subttulos das duas peas

a Raleway Light, seu tamanho varia conforme necessrio.

J a fonte utilizada para os textos em geral a Roboto Lt no

tamanho 10.

27
 Raleway
Ttulos e subttulos

Lorem ipsum dolor it amet.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijlkmnopqrstuvwxyz
123456789

Roboto Lt
Textos em geral

Lorem ipsum dolor sit amet.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijlkmnopqrstuvwxyz
123456789

DISCIPLINAS RELACIONADAS

De um modo geral, as disciplinas relacionadas com o Projeto

Linda de Bonita so:

Web Design: para o desenvolvimento da parte tcnica do site,

j que suas aulas e trabalhos de final de semestre foram de extrema
importncia. Neles, aprendi todo o conhecimento necessrio para
compor este trabalho. Desde o contedo das primeiras aulas at os
mais complexos.

Design Grfico e Criatividade/Tecnologia: essencial para a

elaborao da identidade visual do logotipo e todo o site, a disciplina
de design grfico em suas duas verses foi fundamental para o
desenvolvimento de um bom material grfico.

Laboratrio de Representao Eletrnica: estas aulas foram

indispensveis, pois com elas foi possvel aprender a manusear
diferentes softwares, alm de rever assuntos vistos em disciplinas
passadas. A reviso destes programas foi essencial para obter um

28
passadas e conseguir um bom desempenho na execuo das
tarefas.

tica e Gesto: estas aulas foram essenciais para que eu

compreendesse como funciona o processo criativo dentro de uma
empresa e quais so as melhores maneiras de se trabalhar. Tendo em
mente isto, busquei gerenciar meu trabalho de forma similar.

29
 WEBSITE
Nas conversas que tive com minha cliente, pude enxergar a
dificuldade que ela encontra diariamente por ser uma me que
trabalha sozinha em casa e possui a necessidade de se desdobrar
para cumprir cada tarefa do dia a dia, seja ela pessoal ou profissional.

Observando isto, encontrei motivao para desenvolver este

site, que tem como objetivo principal auxiliar na divulgao e
atendimento dos clientes da marca.

O processo de atendimento aos clientes atual funciona da

seguinte maneira:

As fotos do seu trabalho so divulgadas nas redes sociais

(Facebook e Instagram), onde ela disponibiliza seu nmero de contato
para comunicao via WhatsApp.

L, ela envia ao cliente uma srie de fotos. Estas fotos

funcionam como tabelas para os modelos de laos e cores
disponveis. Onde a cliente tem a opo de escolher o modelo de lao,
material a ser utilizado, tamanho do lao, cor ou estampa a ser
encomendada.

Desta forma, ela mantm uma conversa direta com sua

cliente e est tambm a disposta a sanar dvidas e realizar perguntas.

Por possuir um grande nmero de clientes e pedidos, este

procedimento em atender clientes um a um acaba tomando muito de
seu tempo e a impossibilita de montar um estoque de laos, o que
tambm facilitaria seu negcio.

Ento, foi sugerida a ideia de desenvolver um site que serviria

como uma vitrine virtual, expondo fotos dos produtos e suas
informaes.

30
 Nesta primeira verso, haveria uma pgina na qual seria
possvel enviar um formulrio. Nele, a cliente informaria os tipos de
laos que a interessam, com cores e tamanhos esclarecidos. No
entanto, esta ideia foi descartada.

Logo, foi combinado que o site teria a mesma funo de

vitrine, com exceo da existncia de um formulrio. Onde o processo
de compra estaria explicado na pgina comprar como uma espcie
de passo a passo. Para ele, foram definidas cinco etapas:

Escolha o produto: escolha o modelo desejado e o material

dos laos;

Escolha o tamanho: escolha o tamanho do seu lao;

Escolha a cor ou estampa do seu lao;

Escolha se seu lao ser feito com bico de pato ou em faixa de

seda;

Finalizao e efetivao do pedido: entre em contato pelo

WhatsApp para finalizar seu pedido.

Aps decidirmos sua funcionalidade, passamos a

estabelecer e pensar em outros tpicos importantes para o site.

TCNICAS E TECNOLOGIAS UTILIZADAS

Para a criao e desenvolvimento do site, optei por utilizar o

software Adobe Brackets, no qual tenho maior afinidade e tambm o
recomendado para este tipo de trabalho. Tive preferncia em oper-lo
visto que sua interface bem mais simples e clean com relao ao
Adobe Dreamweaver.

Para sua estrutura no geral, foram utilizadas as linguagens de

programao HTML e CSS, respectivamente, em suas verses 5 e 3.
Alm de utilizar algumas bibliotecas jQuery.

31
 Por se tratar de frameworks para aes especficas, estas
bibliotecas sero explicadas em um tpico detalhado de cada pgina
do site.

Tendo somente o menu hambrguer utilizado em todas as

pginas, que est intitulado como Minimalist Hamburguer
Dropdown Menu". Ele serve para aplicar adaptaes em pequenos
tamanhos de tela, onde no agradvel exibir o menu original nestes
dispositivos compactos.

Verso demo disponvel online

Outro software bastante usado nesta etapa do

desenvolvimento foi o Adobe Photoshop, na qual foi utilizada sua
verso CC 2017. Este programa me proporcionou grande
aproveitamento de tempo, pois todo o processo de edio de imagens
foi feito a partir do mesmo.

Por fim, uma tcnica que foi bastante aplicada no

desenvolvimento do site foi o costume de anotar em listas as tarefas
que precisavam ser feitas. Desta forma, eu obtinha controle sobre
meu trabalho e com isso, mais organizao. Pois nada que precisava
ser feito era deixado para trs e medida que novas tarefas iam
surgindo, eu as anotava.

A seguir, esto algumas anotaes retiradas do caderno:

32
33
34
 DISCIPLINAS RELACIONADAS

Como mencionado anteriormente, duas disciplinas

essenciais para esta rea de web foi a prpria disciplina de Web
Design, pois nestas aulas foi aprendido desde o contedo mais bsico
at tcnicas de aprimoramento de sites como SEO e Analytics, que no
futuro sero extremamente teis para o site.

E a disciplina Laboratrio de Representao Grfica, na qual

pude aprender novas propriedades do Photoshop e revisar as que j
foram vistas.

DIAGRAMA DE ARQUITETURA DA INFORMAO

incio sobre ns produtos comprar

pgina
interna de
cada lao

Na pgina inicial possvel visualizar um menu, voc capaz

de acessar todas as pginas atravs dele.

A pgina sobre ns contm um texto que conta um pouco

mais da histria do Linda de Bonita e sua criadora.

Na pgina produtos, caso deseje visualizar mais detalhes do

produto, permitido clicar nos links disponveis. Ao clicar em um link,
voc redirecionado para a pgina interna do produto, onde so
exibidas fotos e informaes separadamente sobre cada um deles.

Ao final, na pgina comprar, possvel obter informaes

sobre a poltica de vendas e um passo a passo do processo inteiro.

35
 WIREFRAMES

Na pgina inicial so exibidos links nos botes, atravs

destes botes possvel acessar todas as pginas do site.
Centralizado neste menu, encontra-se o logotipo da pgina.

Alm disso, exibido um carrossel de imagens com largura

referente pgina inteira, nas laterais e abaixo da pgina, localizam-
se botes, que podem ser utilizados para alterar as imagens.

O menu na pgina sobre ns exibido da mesma forma que

na pgina inicial, com exceo da aplicao de uma cor slida para
dar destaque ao mesmo.

Contm uma caixa simples de texto junto uma imagem

localizada a direita, esta caixa ocupa aproximadamente 90% da tela.

Abaixo, est situado o rodap da pgina, onde alinhados ao

centro possvel observar os links para as redes sociais.

A pgina produtos contm a mesma estrutura de cabealho

e rodap de pgina que a pgina sobre ns tem. Na rea do contedo
no canto superior esquerdo, possvel observar a categoria do lao
em destaque. A seguir, so apresentadas trs div's onde nelas so
contidas informaes importantes sobre cada lao, como por
exemplo: seu nome, pequena descrio (se o lao vendido
separadamente ou em kits), preo e um boto que d acesso pgina
interna deste produto. L, possvel obter informaes mais
detalhadas sobre o lao.

Ao entrar na pgina interna, na parte esquerda possvel

observar um lightbox que contm uma srie de imagens sobre este
lao. Seu nmero de fotos disponveis varia conforme modelo.

J direita, uma caixa de textos explica ao cliente mais

informaes sobre aquele item.

Por fim, a pgina comprar apresenta a mesma estrutura de

36
 cabealho e rodap j vistas aqui.

Na rea do contedo existe uma imagem alinhada

esquerda que explica o processo de passo a passo, ao seu lado,
encontra-se um texto que informa o cliente sobre a poltica de vendas.

< <

Pgina inicial

Pgina sobre ns

37
 Pgina produtos

Pgina interna de produtos

38
 Pgina comprar

Nos dispositivos mveis, optei por poucas modificaes, assim, a

pgina atual possui mesma navegao comparado sua verso desktop.

Na pgina inicial possvel notar uma aproximao da imagem do

carrossel e a substituio do menu inteiro por um hambrguer.

A seguir, perceptvel que o padro para as diversas pginas em

relao ao cabealho e rodap continua o mesmo.

O texto sobre ns continua alinhado esquerda, quando seu

tamanho de tela reduzido, a imagem se encontra acima e o texto logo
abaixo.

A pgina produtos passa a exibir somente uma div e seus

elementos. Tais itens, como tamanhos de fonte e imagem so aumentados.
Quanto pgina de produtos interna, o nome do produto seguido de sua
descrio aparece primeiro. Logo aps a ela, as fotos dos produtos
detalhadamente so exibidas num tamanho maior.

Ao final, acontece o mesmo na pgina comprar. O texto sobre a

poltica de compras leva mais destaque e aparece acima da imagem de passo
a passo.

39
< <

Pgina inicial e pgina sobre ns

Pgina produtos e pgina interna de produtos

Pgina comprar

40
 Vale a pena lembrar que estes so os wireframes das pginas
aps a finalizao, existem tambm os wireframes feitos junto
cliente durante o processo de criao. Estes wireframes encontram-
se logo abaixo:

Pgina inicial

Pgina produtos

41
Pgina interna de produtos

Pgina dvidas

Pgina contato

42
 PALETA DE CORES

componentes A paleta de cores do site

C:0 R:255
segue o mesmo padro do
M:0 G:255
Y:0 B:255 logotipo. A seguir, foi feita uma
K:0 ordem que parte do branco ao
HEX: #FFFFFF cinza.

O branco foi utilizado nos

componentes
links do menu e o rosa claro para
C:0 R:244
M:0 G:244 o seu efeito hover. A cor do menu
Y:0 B:244 est representada pelo tom de
K:4 rosa mais escuro, que bem
HEX: #F4F4F4 semelhante ao rosa usado no
centro da flor, sendo o do site o
tom mais escuro.
componentes
C:0 R:253
Embora o background
M:10 G:228
Y:9 B:229 seja uma textura, ele contm
K:1 nuances de cinza claro. Ento
HEX: #FDE4E5 para se ter uma noo, foi
utilizado o conta-gotas do
Photoshop para retirar um tom da
componentes
textura, o tom retirado est
C:0 R:240
M:47 G:128 apresentado ao lado esquerdo.
Y:47 B:128
K:6 A ltima cor desta paleta
HEX: #F08080 representa a cor usada nos
cabealhos de nvel da pgina.

componentes importante salientar

C:0 R:79 que todos os demais textos do
M:0 G:79 site possuem cor preta.
Y:0 B:79
K:69
HEX: #4F4F4F

43
 TIPOGRAFIAS UTILIZADAS

So duas as tipografias presentes no site: Grand Hotel para

ttulos que necessitam de maior destaque e Source Sans Pro para os
textos em geral.

Grand Hotel
Alfabeto complementar
Lorem ipsum dolor sit amet.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
123456789

Source Sans Pro Light

Alfabeto complementar
Lorem ipsum dolor sit amet.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
123456789

RESOLUES E BROWSERS COMPATVEIS

Com o avano das tecnologias, onde grande parte das

pessoas navega pela internet a partir de dispositivos e resolues
diversas, necessrio desenvolver um site que se adapte a essas
mudanas.

O site Linda de Bonita se adequa desde resolues como

1920x1080 at 360x640, sendo sua resoluo ideal 1366x768.

44
 Os browsers compatveis so:

Internet Explorer v11.674.15063.0

Microsoft Edge: v40.15063.674.0
Google Chrome: 61.0.3163.100
Mozilla Firefox: v56.0.2
Apple Safari: v10.0.1

J para mobile, as especificaes so:

Android v5.0+
iOS 10
Windows Phone 10

PGINA INICIAL

A pgina inicial apresentada com um carrossel de imagens

fullscreen retirado de uma biblioteca jQuery.

O nome deste plugin se chama Minimal Fullscreen

Responsive Carousel Plugin With jQuery, e pode ser encontrado no
site jqueryscript.net.

Adicionei trs fotos de diferentes produtos para dar

diversidade pgina. Os links do menu encontram-se na cor branca e
a div do menu, transparente.

Meu propsito para esta pgina que o cliente se encante

pelo visual dos produtos, portanto, decidi no adicionar mais
informaes a ela.

Um exemplo da sua pgina demo estar a seguir.

45
 Pgina slider demo

Aps alguns testes, constatei que a imagem e a cor branca do

texto do menu conflitavam e havia certa dificuldade de leitura do
menu. Minha primeira alternativa foi colocar um text-shadow a fim de
destac-lo, porm esta opo no me agradou.

Posteriormente, tentei adicionar uma div que tivesse um

gradiente do cinza para o transparente, porm seu efeito no ficou
totalmente natural e era possvel observar uma faixa que indicava o
limite desta div.

Ao final, decidi realizar um pequeno tratamento nas imagens

no Photoshop dando este efeito de gradiente imagem de maneira
que o resultado permanecesse natural.

Primeira verso, sem ajustes

46
 Segunda verso, ajustes realizados

Aparncia mobile na resoluo 432x767

PGINA SOBRE NS

Sua estrutura simples, possui o mesmo menu que a pgina

anterior dispe, porm este contm cor. Seu rodap apresenta cor
idntica cor de fundo do menu e seus links para redes sociais
encontram-se ao centro.

47
 Seu cabealho de nvel dois est alinhado ao menu, seguido
da div que contm o texto da pgina, ela apresenta um tamanho
menor em relao ele.

Existe uma imagem que flutua direita da pgina e o texto a

abraa. Ela apresenta pequenas bordas arredondadas para dar
delicadeza ao junto total.

Pgina sobre ns finalizada

48
 Pgina sobre ns na resoluo 415x2054

49
 PGINA PRODUTOS

A pgina produtos contm trs div's alinhadas ao centro com

cada uma medindo aproximadamente 31% de largura do espao
disponvel para o contedo. Possui algumas informaes teis ao
cliente e um boto que direciona a uma pgina que contm mais
detalhes sobre o produto em questo.

Sua pgina dividida por sees, onde cada setor dedicado

a um tipo de lao.

A verso principal do site contar com uma simulao de

promoo de lao, esta funo est em desenvolvimento e ser
aplicada nesta pgina de produtos e na pgina interna de produtos.

Obs.: devido altura da pgina mobile, retirei grande parte da

imagem de sua simulao, a fim de possibilitar ao leitor uma melhor
visualizao da imagem.

50
 Pgina produtos

51
Pgina de produtos interna na resoluo 415x2456

52
 PGINA INTERNA DE PRODUTOS

Esta pgina conta com um framework de jQuery chamado

Lightslider. Este plugin apresenta um pequeno lightbox e suas
imagens rodam automaticamente, seu formato original possui uma
imagem em destaque e 9 thumbnails localizadas logo abaixo.

Verso lightslider demo

53
 Para meu tipo de utilizao, vi necessidade em adapt-lo.
Portanto, retirei sua opo de rotacionar automaticamente, diminui o
nmero de thumbnails aparentes para 4 e as aumentei, de forma a
deixar ele ideal para meu uso.

Alm disso, para dar maior destaque aos controles direita e

esquerda, achei necessrio trocar suas cores para um cinza gelo, a
fim de dar mais relevncia e visibilidade ao mesmo.

Sua estrutura de pgina simples, contendo o lightslider

alinhado esquerda e uma caixa de texto contendo informaes
importantes direita. Esta pgina contm uma frase abaixo ao preo
e aponta para a pgina vizinha, onde l possvel conhecer a poltica
de compras e compreender seu processo de venda.

Pgina de interna de produtos

54
 Pgina de interna de produtos resoluo 415x1096

55
 PGINA COMPRAR

Sua estrutura tambm simples, existe uma imagem que

detalha o passo a passo de como comprar alinhada esquerda e uma
caixa de texto direita, neste texto, esclarecida a forma de como so
feitas as encomendas no Linda de Bonita.

Tanto esta pgina quanto as outras, com exceo da pgina

inicial possuem uma imagem de fundo de papel amassado. Ela foi
editada no Photoshop com a inteno de torn-la uma imagem
infinita, de forma que no haja percepo do limite entre suas
repeties. Ela foi escolhida para dar um pequeno toque ao site em
conjunto das linhas tracejadas que aparecem casualmente e a
tipografia cursiva.

Sua verso mobile tambm no recebe grandes alteraes.

Pgina comprar finalizada

56
 Pgina comprar resoluo 415x1817

57
 COMENTRIOS FINAIS

extremamente importante lembrar que este s o comeo

deste projeto. Aps a entrega do trabalho final, ajustes e testes sero
feitos ao site a fim de deix-lo da melhor maneira possvel. Novos
produtos sero adicionados ao site e possivelmente outras
ferramentas tambm.

O objetivo para este projeto que ele aos poucos se torne de

fato uma loja virtual e auxilie minha cliente com suas vendas.

As tcnicas aprendidas de SEO e Analytics sero postas em

prtica e modificadas conforme for preciso aps a hospedagem do
mesmo.

58
 IDENTIDADE VISUAL
Creio que necessria uma mudana e penso que a poca
ideal para a divulgao do novo logotipo justamente no lanamento
de seu site.

O logo atual do Linda de Bonita consiste em um corao com

as letras LB. Conversei com minha cliente sobre a possibilidade de
desenvolver um novo logotipo para sua marca e ela se mostrou bem
insegura e relutante isto, pois teme que sua marca se prejudique
com uma mudana drstica.

Ento, propus a reformulao de seu logotipo existente, onde

duas propostas sero feitas: uma totalmente diferente de seu
logotipo atual e outra atualizao de seu logotipo presente.

Aps minha proposta ser aceita, comecei a pensar e

desenvolver sua nova identidade visual, que ser entregue junto ao
manual de identidade da marca.

Apesar de expor neste documento as duas verses

desenvolvidas, a principal verso continuar sendo a nova proposta
de design feita por mim.

TCNICAS E TECNOLOGIAS UTILIZADAS

Para a criao da identidade visual, foi utilizado o software

Corel Draw nas verses X3 e 2017 e Adobe Photoshop, para pequenos
ajustes de cor e detalhes.

Assim como na criao do website, tambm utilizei a mesma

tcnica para a criao do manual de identidade visual.

59
 Em primeiro lugar, fiz um levantamento de todos os tpicos
que eu gostaria que o manual houvesse e anotei, conforme a evoluo
do trabalho, eu marcava o item j feito para iniciar o prximo.

A seguir, esto algumas destas anotaes:

60
 DISCIPLINAS RELACIONADAS

Especificamente para o manual de identidade visual, a

disciplina de Design Grfico e Criatividade/Tecnologia foram
essenciais, pois alm de desenvolver facilidade em utilizar softwares
de vetor, tambm aprimorei minhas tcnicas.

J a disciplina Laboratrio de Representao Grfica me

concedeu a oportunidade de revisar algumas tcnicas interessantes
que tambm foram usadas nesta fase.

CRIAO

Aps buscar referncias e definir um estilo a ser utilizado,

iniciei alguns rascunhos num sulfite. Como no possuo prtica em
desenho, passei minha ideia at ento vaga para o Corel Draw, onde l
eu pude concluir o desenho e realizar ajustes conforme necessrio.

Finalizado este processo, passei a escolher a tipografia a ser

utilizada no logotipo. Selecionei cerca de 10 fontes diferentes e decidi
como tipografia final a fonte Raleway.

Tive como influncia para a minha criao um estilo

minimalista, onde o uso das formas geomtricas e pouca utilizao
de elementos bem presente.

Gostaria de criar uma composio bem simples e de fcil

entendimento. E apesar de haver certa assimetria no logotipo, me
empenhar ao mximo para definir um fechamento perfeito entre
smbolo e logotipo.

linda de bonita
Atualizao do logo e nova proposta de logotipo

61
 PALETA DE CORES

Constitudo por uma nuance de trs cores, a proposta

proporcionar movimentao e dinamismo ao logotipo.

A cor mais escura est localizada no centro e as cores mais

claras, respectivamente, da mais clara e mais escura, nas pontas.

componentes
C:0 R:236
M:49 G:139
Y:27 B:143
K:0
componentes
C:0 R:241
M:34 G:166
Y:20 B:165
K:0

componentes
C:0 R:243
M:27 G:181
Y:16 B:178
K:0

TIPOGRAFIA ESCOLHIDA

Optei por utilizar no logotipo a tipografia Raleway, que a

tipografia definida para o alfabeto principal. Sendo uma fonte leve e
sem serifas, possui acabamento extremamente feminino.

Alm disso, foi determinado que a tipografia utilizada para o

alfabeto complementar a Open Sans Condensed, tambm sem
serifas e leve.

Outra tipografia que compe o alfabeto complementar, a

Grand Hotel. Sendo cursiva, expressa bastante feminilidade e
delicadeza.

62
 Elas devero ser utilizadas para aplicaes em anncios,
cartazes, papelaria em geral, etc.

COMENTRIOS FINAIS

Alm deste livro, tambm existe o manual de identidade

visual Linda de Bonita.

Nele, todo o processo criativo explicado mais

detalhadamente. Alm de conter informaes importantes, como por
exemplo: estilo da marca, margem de segurana, usos incorretos do
logotipo, aplicaes em peas grficas, entre outros.

63
 CONCLUSO
Apesar de este ser um trabalho individual, aprendi a lidar com
diferentes opinies e vises, aceitando todas as crticas e extraindo
algo bom delas.

Ao longo do processo, passei por uma srie dificuldades,

adaptaes e mudanas de planos, aprendendo a contornar barreiras
e superar minhas prprias expectativas. Unir duas propostas
diferentes em um nico trabalho foi um desafio pessoal e estou
satisfeita com o progresso feito at este momento.

Este trabalho tem grande importncia pra mim, visto que

desenvolvi pesquisas e dediquei horas para que ele fosse bem
executado e se tornasse algo benfico que fizesse diferena na vida
de algum.

Apesar de no conseguir expressar da melhor maneira

possvel o conhecimento adquirido nestes dois anos de curso, este
trabalho foi essencial para exercitar e aperfeioar todos os meus
conhecimentos prticos conquistados aqui.

O fato de poder desenvolver um projeto que no para por aqui

me inspira e me faz ter certeza da rea que escolhi como profisso.

Este projeto conclui aqui sua etapa primeira etapa.

64
 BIBLIOGRAFIA
WATRALL, Ethan; SIARTO, Jeff. Use a Cabea! Web Design. 1 edio.
Rio de Janeiro. Editora Alta Books, 2013.

FREEMAN, Elisabeth; FREEMAN, Eric. Use a Cabea! HTML e CSS. 2

edio. Rio de Janeiro. Editora Alta Books, 2015.

COMENTRIOS SOBRE A BIBLIOGRAFIA

A leitura de ambos foi indicada no ano passado pelo

Professor Alexandre Sobrino. Reler estes dois livros me auxiliou em
detalhes esquecidos e que passariam despercebidos, alm de
conseguir absorver mais detalhes dos livros, comparado primeira
vez que os li.

65
 REFERNCIAS
Definies:

https://www.significados.com.br/website/

https://www.significados.com.br/url/

https://www.meusdicionarios.com.br/internet

https://tableless.com.br/o-que-html-basico/

https://www.tecmundo.com.br/programacao/2705-o-que-e-css-.
htm

https://www.devmedia.com.br/introducao-ao-jquery/19057

https://www.significados.com.br/briefing/

https://www.significados.com.br/identidade-visual/

http://brasilescola.uol.com.br/artes/minimalismo.htm

https://www.pontorh.com.br/que-empreendedorismo-materno/

https://www.sebrae.com.br/sites/PortalSebrae/artigos/o-que-e-
um-site-
responsivo,4a6ad1eb00ad2410VgnVCM100000b272010aRCRD

http://tableless.github.io/iniciantes/manual/js/o-que-jquery.html

http://tableless.github.io/iniciantes/manual/js/index.html

Referncias:

http://www.des1gnon.com/2013/12/15-manuais-da-marca-
guidelines-para-ter-como-referencias/

https://www.fridalacos.com/

66
 https://www.dumdumlacos.com.br/lacos-1

https://www.donaflorzinha.com.br/

http://www.meninadelaco.com.br/

https://www.lacaroty.com.br/

http://stebenev.eu/digital/

http://gaze-eyewear.com/

https://brooklynnavyyard.org/

Plugins:

https://www.jqueryscript.net/menu/Hamburger-Dropdown-Menu-
jQuery.html

https://www.jqueryscript.net/slider/Minimal-Fullscreen-
Responsive-Carousel-Plugin-With-jQuery.html

https://www.jqueryscript.net/slider/Lightweight-Responsive-
Content-Slider-Plugin-with-jQuery-CSS3-lightslider.html

https://www.origamid.com/codex/diminuir-o-menu-fixo-ao-scroll/

Outros:

http://desenvolvimentoparaweb.com/ux/breadcrumbs-guia-
completo-exemplos-melhores-praticas/

http://www.daniliagoncalves.com/tendencias-para-o-mercado-de-
artesanato/

https://www.negociosrpc.com.br/deolhonomercado/economia/seg
mento-de-vestuario-infantil-e-mercado-crescente/

67
 ANEXOS

BRIEFING
ESTRATGIA

Quais so os principais objetivos do site? Informar, vender, dar suporte, etc.

Informar e dar suporte

Que tipo de site ele ? Coletor de informaes, uma publicao, etc.

Coletor de informaes

Quais so as mensagens mais importantes que o site deve passar aos

visitantes?
Informaes sobre modelos, medidas, como usar, etc

INFORMAES GERAIS

Voc tem concorrentes? Como se diferencia deles?

Possui concorrncia e acredita que se diferencia na qualidade, diversidade e
criatividade

Voc j possui um domnio para o seu site? (Domnio um nome que serve
para localizar e identificar voc ou sua empresa na Internet. Ex.:
www.google.com.br)
No possui site

Me conte mais sobre o Linda de Bonita.

O linda nasceu um ano aps o nascimento de sua filha por sempre fazer laos
para ela e as pessoas se interessarem

Quais so as palavras-chave do Linda?

Handmade, feito a mo

PBLICO-ALVO
Qual seu pblico alvo?
Mes, gestantes, tias

Qual a faixa etria de seus clientes?

Crianas de 0 4 anos

68
 CONTEDO

Qual o seu material disponvel? Possui fotos para implementar no projeto?

Deseja continuar com o logo atual?

Descreva os produtos e servios que voc vende.

Voc precisa de um redator? Quem elaborar os textos do site?

Quais so as sees e funcionalidades que precisam existir?

APARNCIA (DESIGN)

Quais so as cores que mais lhe agradam? Gosta de tons pastis ou

vibrantes?

Quais so as cores que voc no quer utilizar?

Existe um modelo de site que deseja seguir?

Existem padres existentes, como logotipos e cores que devem estar

presentes?

OUTROS

Com que freqncia voc gostaria de receber atualizaes sobre seu projeto?

Quais so os sites da internet que voc gosta? O que gosta a respeito deles?

Qual a sua particularidade para este projeto? Alguma observao em

especial que gostaria que tivesse em seu site?

Seu logo est em vetor? (Adobe Illustrator, Corel Draw, etc). Se no, voc
possui os arquivos originais ao menos em .PSD?

*estas partes no foram respondidas*

69
 AGRADECIMENTOS
Gostaria de agradecer especialmente minha me e irm,
que me possibilitaram estar aqui concluindo este curso.

Aos meus familiares e amigos, gostaria de agradecer pela

pacincia, compreenso e ajuda.

Ao meu grande amigo Felipe Kanashiro, que me apoiou e

tirou um pouco do seu tempo pra me auxiliar nesse projeto.

E por ltimo, aos meus professores, pois todo o

conhecimento que obtive aqui foi graas a todos eles.

Obrigada!

70
 linda
de
lindabonita
de bonita
W E B SW
I TE BES IET EI D
E IE
D ENNT
T IIDD
ADAEDV E
I S UVAILS U A L

FEITO POR
FEITO POR JLIA
JLIA FIGUEIREDO
FIGUEIREDO DE
DE LIMA
LIMA
NOVEMBRO DE
NOVEMBRO DE 2017
2017