Você está na página 1de 71

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