Trabalho de Concluso de Curso

desenvolvimento do site da marca

artesanal simples assim

Giovanna Pereira de Napoli

2017
 A Simples Assim surgiu com a proposta de
fazer arte com tecidos e papis de forma simples,
prtica e com muito amor.
Eu, Giovanna Pereira de Napoli, portadora do RG 39.227.153-9 e do CPF
416.410.898-30, declaro, segundo a lei 9.610 de 19 de Fevereiro de 1998
(Lei de Direitos Autorais), que este Trabalho de Final de Curso de
minha autoria e no possui apropriaes indevidas, totais ou parciais,
de contedos disponibilizados por terceiros, e que todos os recursos
utilizados para o desenvolvimento deste projeto so atribudos para
domnio pblico e foram devidamente citados e creditados ao final
deste relatrio. Estou ciente, no entanto, que caso seja constatada a
existncia destas violaes, ocorrero penalizaes.

...................................................................................
Giovanna Pereira de Napoli
RG: 39.227.153-9 / CPF: 416.410.898.30
 sumrio
APRESENTAO.............................................................................................................9
Objetivo..............................................................................................................................11
JustificativaS................................................................................................................13
VIABILIDADE......................................................................................................13
PESQUISA DE PBLICO................................................................................................15
PBLICO E MERCADO....................................................................................................19
pblico direito...............................................................................................19
pblico indireto...........................................................................................19
mercado direto............................................................................................20
mercado indireto........................................................................................21
definies........................................................................................................................23
A INTERNET............................................................................................................23
A INTERNET E O EMPREENDEDORISMO..........................................24
O ARTESANATO...................................................................................................24
A COSTURA............................................................................................................25
Desenvolvimento.............................................................................................27
diagrama de ai...............................................................................................27
wireframes....................................................................................................29
linguagens empregadas.......................................................................33
softwares utilizados.............................................................................34
evoluo..........................................................................................................35
incio................................................................................................35
continuidade................................................................................39
AVANANDO A CONCLUSO......................................................42
RECURSOS APLICADOS.................................................................................46
padres grficos.......................................................................................50
requisitos PARA visualizao........................................................50
manuteno e atualizao do site..........................................51
CONCEITOS DE CRIAO ESTTICA.....................................................51
COMPOSIO DE CORES...............................................................51
COMPOSIO DE FONTES............................................................52
interdisciplinaridade.....................................................................54
O Logotipo.........................................................................................................................57
O futuro do site.........................................................................................................59
CONCLUSO.........................................................................................................61
Bibliografia....................................................................................................63
ANEXOS...................................................................................................................65
 apresentao
Este Trabalho de Final de Curso do curso de Produo
Multimdia, referente especialmente disciplina de Web Design e
denominado Simples Assim, a projeo e o desenvolvimento de
um site para a marca artesanal de costuras homnima criada pela
minha irm, Gabriela Pereira de Napoli.
A Simples Assim nasceu em Outubro de 2015, segundo a dona
da marca, depois de ser encorajada por uma amiga a mostrar ao
mundo a minha paixo pela costura e pelos trabalhos manuais.
Aps dois anos de crescimento, com constantes otimizaes
e ampliao da quantidade de seus produtos, conquistando novos
clientes diariamente com eficcia somente atravs do Facebook e do
Instagram, a marca ter um espao personalizado de acordo com sua
identidade e inteiramente exclusivo na internet, pronto para atrair
mais pblico que se interesse e valorize no somente as peas da
Simples Assim, mas o trabalho artesanal no geral.
O site ter a principal funo de servir como uma vitrine
virtual de seus produtos. Os clientes no podero realizar compras
diretamente no site, uma vez que no uma loja virtual, porm
tero acesso inmeras imagens das peas disponveis e todas as
informaes de composio de cada uma destas. Tambm vero todas
as formas de contato disponveis, podero conhecer um pouco mais a
fundo a histria da Simples Assim e de sua criadora, e, acima de tudo,
se aproximar da marca e de seu ideal. Neste ambiente diferente das
limitaes das redes sociais, o pblico poder se familiarizar com a
marca ainda mais e enxerg-la com novo olhar.
A Simples Assim ir se renovar e expandir a visibilidade do
trabalho com costura na internet com ainda mais graa, praticidade e
modernidade, assim como todos os seus belos produtos.

9
10
 objetivo
Com uma pgina exclusiva da Simples Assim na internet, alm
da sua presena j marcante em redes sociais como o Facebook, onde
a marca deu incio suas atividades e, desde ento, o principal meio
de divulgao dos produtos, alm do Instagram tambm, a marca
ir demarcar um novo espao na internet, adquirir mais visibilidade
online, despertar o interesse de potenciais novos clientes e, portanto,
conquistar cada vez mais pblico.
A finalizade do site promover a marca para os clientes j
existentes e para aqueles que iro chegar. Independente se o visitante
acompanha a Simples Assim nas redes sociais e j realizou compras
ou no, ele ter a oportunidade de visualiz-la de um novo jeito,
observando as singularidades da marca com mais ateno e tendo
acesso todos os detalhes e aspectos nicos dos produtos disponveis.
Com pginas especiais, onde os contedos so bem distribudos
e h atalhos para que o visitante possa ter acesso rpido e prtico
todas estas sees, o site agrega de forma agradvel e inovadora
presena da Simples Assim na internet mais uma forma de se inteirar
sobre a marca, o seu trabalho, a importncia e o valor que o artesanato
possui e que pode contagiar o pblico, demonstrando a relevncia do
trabalho manual com todas as suas complexidades e caprichos.
E, claro, principalmente para a marca tambm conquistar e
fidelizar novos clientes que apreciem belas peas utilitrias produzidas
cuidadosamente com diversos tecidos e costura.

11
12
 justificativas
As redes sociais de alguns anos para c ganharam peso,
tornando-se meios mais influentes e autossuficientes para promover
com eficincia qualquer tipo de trabalho, desde aqueles que j
possuem um negcio e pblico consolidados at quem ainda est
dando seus primeiros passos no empreendedorismo e aprimorando
suas formas de divulgao.
Contudo, ter para a sua marca uma pgina prpria na internet
uma tima oportunidade de se evidenciar com personalidade.
Contando com um amplo acervo de recursos para uma estrutura
bonita e viva ao seu site e divulgar seus produtos de acordo com a
sua identidade e essncia, de uma forma que pode transmitir maior
autenticidade e credibilidade, tambm , acima de tudo, mais um meio
de se comunicar com seu pblico e de se promover. E para a Simples
Assim (e todas as marcas no geral), se estabelecer em diversos
ambientes a mais estratgica opo para ganhar mais destaque.

VIABILIDADE

Ainda que muitos tenham aderido s redes sociais e descoberto

certo conforto em manter a divulgao de seu negcio l, sem se
arriscar a firmar ainda mais seu territrio online, a alternativa de
obter um site para a sua marca, alm de assegurar maior visibilidade
para o negcio, vivel em diferentes aspectos.
Por ser um trabalho inteiramente digital, h o benefcio de no
ter um custo alto. Os gastos que podero ocorrer so simplesmente
com a futura compra de um domnio e a hospedagem do site, que
possui um valor comumente baixo e muito acessvel.

13
 H tambm outros tipos de vantagens que beneficiaro todas
as partes envolvidas. Para mim, a desenvolvedora, foi uma forma
de obter aprendizado e amadurecimento no processo de criao, e
mais tarde ainda poder expor este trabalho da forma mais eficaz e
conveniente possvel: com o crescimento e a disseminao do nome
da marca, h a ajuda direta na divulgao do site e de quem o criou.
Para a dona, a garantia de que sua marca ter este novo meio
para atingir eventuais novos clientes e alavancar sua audincia
transmite confiana. Ademais, haver a facilidade de entrar em contato
constante comigo para que se possa realizar alteraes e atualizaes
no site sempre que necessrio e sem a preocupao com cobranas
altas, ao contrrio se fosse contratado um servio terceirizado que j
tenha certa notoriedade e uma mdia de preo mais elevada.

14
 pesquisa de pblico
Uma pesquisa de pblico foi realizada durante alguns dias com
os clientes da Simples Assim. Com um formulrio criado no Google
Forms disponibilizado no perfil de uma rede social da dona da marca,
o resultado at mesmo surpreendeu: alguns formulrios foram
enviados por parte de pessoas que nem mesmo conheciam a marca
antes de terem acesso ao questionrio.
Alm destas, claro, muitas outras que j so clientes, desde as
mais assduas s mais recentes, gentilmente enviaram suas opinies a
respeito da Simples Assim e o resultado obtido foi muito satisfatrio,
tanto para a dona da marca ter uma noo ainda maior de seu pblico
e o que pensam acerca da qualidade de seus produtos quanto para
a utilizao dos dados da pesquisa na complementao do contedo
informativo deste trabalho.
Vamos conferir todas as questes e opes de resposta
disponveis no formulrio junto do percentual de cada resposta
enviada e, ento, observar os dados, principalmente a predominncia
de opinies positivas do pblico.

15
16
* PESQUISA REALIZADA COM 96 RESPONDENTES.

17
 Podemos notar que, apesar de ter sim sua parcela masculina,
o pblico se mostrou majoritariamente feminino e com uma grande
variao de idades. Porm, os outros pontos ainda mais importantes e
vantajosos so as opinies positivas dos seguidores da Simples Assim,
sejam eles clientes que consomem a marca ou no.
Ainda que uma parte significativa que respondeu ao questionrio
no tenha feito uma compra na marca, eles tiveram acesso aos
produtos de outra forma: recebendo-os de presente, o que muito
interessante, j que as peas da Simples Assim verdadeiramente do
timas lembranas. E tambm, independente daqueles que tm em
mos ou no algum produto da marca, eles possuem o interesse em
adquirir um futuramente.
O recebimento de opinies mais razoveis tambm
fundamental para a marca observar que importante melhorar; no
se tornar perfeita e livre de falhas, uma vez que isso impossvel e
crticas so inevitveis, mas sim poder otimizar seu trabalho cada vez
mais para agradar a maioria dos clientes na medida do possvel.
At o momento, a Simples Assim tem em sua maioria clientes
que esto satisfeitos, apreciam a qualidade do trabalho, a beleza das
peas e sua habilidade de produo, esto de acordo com os preos
e, impressionantemente, esperavam at que fosse cobrado um valor
mais alto para equivaler inteiramente ao trabalho, e que recomendam
a marca para outros que ainda no a conhecem. E analisando todos
esses dados, pode-se concluir que a Simples Assim est no caminho
certo, pronta para crescer ainda mais e expandir seu pblico com
facilidade e disposio.

18
 pblico e mercado
PBLICO DIRETO

O pblico direto da Simples Assim foi determinado com mais

preciso aps a pesquisa de pblico: a predominncia feminina, mas
no se descarta a pequena quantidade de clientes/seguidores do sexo
masculino. A variao de idade do pblico marcante, realmente indo
desde os 18 anos at as pessoas que j tem mais de 60. E , claro, um
pblico que claramente aprecia e apoia a arte dos trabalhos manuais,
ainda que no necessariamente o consuma. A quantidade de respostas
pesquisa, exibindo a grande parcela que comprou uma ou mais de
uma vez os produtos da Simples Assim e a restante que no comprou,
porm possui algum produto da marca que foi ganho de presente ou
que tem o interesse de adquirir alguma pea futuramente, expressa
isso: h uma atrao pelo servio e a sua qualidade, que consumido,
valorizado e, segundo os dados, tambm muito recomendado pelos
clientes para outras pessoas.

PBLICO INDIRETO

O pblico indireto do site acaba sendo, em sua maioria,

pessoas que j apreciam o trabalho artesanal ou vendem produtos
feitos manualmente, mas de diversos tipos de mercado e mtodos de
produo, sem ser exclusivamente de costura.
De certa forma, a Simples Assim tambm pode atingir
indivduos que no tm interesse pelo mercado artesanal ou que nem
mesmo o conhecem, e poderiam, quem sabe, despertar a curiosidade
daqueles que esto alm do nicho da marca.

19
 MERCADO DIRETO

O mercado direto da Simples Assim foi definido de acordo com

o seu servio: a venda de peas artesanais variadas produzidas com
costura, desde ecobags e ncessaires at produtos para bebs.
A busca por concorrentes diretos da Simples Assim, entretanto,
fora um pouco desafiadora j que no se encontrou com facilidade nem
em abundncia outras marcas artesanais especificamente de costura.
Aps certa procura, encontrou-se pelo menos uma representante
desta concorrncia: uma marca chamada Coisas de Lu, que tambm
desenvolve produtos feitos com tecidos e costura. A marca, porm,
no possui um site, e sim uma loja virtual.

20
 Olhando por uma outra perspectiva, no entanto, essa ausncia
de grandes concorrentes e a quase inexistncia de sites ou lojas
virtuais desse tipo de negcio j traz a Simples Assim uma enorme
vantagem e diferencial. A marca certamente se tornar uma das
pioneiras a integrar o mundo digital e at mesmo colaborar com o
aumento da visibilidade e ampliao do mercado artesanal de costuras
na internet.

MERCADO INDIRETO

J as marcas de produtos artesanais pertencentes ao mercado

indireto da Simples Assim foram encontradas facilmente. Hoje em
dia, com a facilidade de se ter uma pgina na internet e a praticidade
que as redes sociais oferecem para se promover, todos os tipos de
negcios esto disponveis para serem vistos e consumidos. E as
mais distintas marcas artesanais com diversidade de produtos esto
marcando presena. Viu-se desde fabricantes de bolsas de diferentes
tipos de couro at de croch; de produo de mochilas at sapatos,
tanto para o pblico feminino quanto masculino; marcas veganas
(que no utilizam qualquer matria que tenham origem animal) e
tambm marcas que desenvolvem seus produtos com a reutilizao
de tecidos, e entre outras variedades artesanais interessantes e cheias
de personalidade.

21
22
 definies
A INTERNET

A Internet surgiu em meio as ameaas da Guerra Fria em

1969 nos Estados Unidos, criada com objetivos militares para que
as foras armadas norte-americanas mantivessem contato em caso
de ataques inimigos que destrussem os meios convencionais de
telecomunicao. Em 1970 e 1980, no entanto, a Internet tambm se
tornou um importante meio de comunicao acadmico. Estudantes e
professores universitrios, principalmente dos EUA, trocavam ideias,
mensagens e descobertas pelas linhas da rede mundial.
Foi somente em 1990 que a Internet alcanou o pblico em
geral. Neste ano, o engenheiro ingls Tim Bernes-Lee desenvolveu
a World Wide Web e, a partir deste momento, a Internet cresceu em
ritmo acelerado e foi considerada a maior criao tecnolgica logo
depois da televiso, feita na dcada de 1950.
A dcada de 1990 tornou-se a era de expanso da Internet, com
a criao de vrios navegadores, como o Internet Explorer da Microsoft
e o Netscape Navigator da Netscape. O surgimento acelerado de
provedores de acesso e portais de servios online contribuiu para este
crescimento e a Internet passou a ser utilizada por vrios segmentos
sociais. Estudantes passaram a buscar informaes para pesquisas
escolares, enquanto jovens utilizavam para puro lazer em sites de
jogos. Salas de bate-papo virtual tornaram-se pontos de encontro.
Muitos que estavam desempregados iniciaram a busca por trabalho
atravs de sites de agncias de empregos ou enviando currculos
por e-mail. As empresas descobriram na Internet um excelente
caminho para melhorar seus lucros e as vendas online dispararam,
transformando-a em verdadeiros shoppings virtuais.

23
 Nos dias atuais, impossvel pensar no cotidiano sem a Internet.
Ela conquistou o mundo inteiro, e estar conectado rede mundial
passou a ser uma necessidade de extrema importncia.

A INTERNET E O EMPREENDEDORISMO

Atualmente, com a crescente informatizao e os avanos

tecnolgicos, a internet se tornou uma plataforma fundamental para
ajudar no desenvolvimento de atividades de trabalho. Buscar auxlio
virtual e at mesmo trabalhar online passou a ser uma necessidade
bsica de empresas de todos os ramos e tamanhos.
Uma das principais consequncias do crescimento da internet
foi o aumento do nmero de empreendedores digitais. De uma forma
geral, o empreendedorismo digital se caracteriza pelo olhar do
empreendedor para as oportunidades do ambiente virtual e como as
grandes mdias podem ajudar no avano do seu negcio.
Com cada vez mais pessoas inseridas no mundo digital, as
empresas fsicas obtiveram maior visibilidade no mercado, gerando
tambm mais credibilidade e confiana diante dos clientes e do
pblico-alvo, j que a interatividade com estes realizada de maneira
muito mais fcil e direta pelas mdias sociais ou pelo seu site ou blog.
Os negcios digitais esto em constante crescimento, e para
conquistar os internautas preciso, antes de mais nada, ter a noo
do que mais atrai a ateno de um pblico especfico.

O ARTESANATO

Independente da matria-prima utilizada natural, reciclada

ou industrializada e da tcnica empregada, o produto artesanal
fruto da criatividade do artista-arteso e da influncia do seu meio, e
ressaltam a identidade de um povo.

24
 As matrias, ao receberem a marca do artista, tornam-se
produtos culturais que se prestam a mltiplo uso, transformando-se
em objetos por meio dos quais ele se expressa.
Alm de materializar a alma de uma cultura individual ou
coletiva, o artesanato um setor da economia cujo crescimento
possui alto potencial de gerao de trabalho e renda, merecendo
uma poltica de desenvolvimento sustentvel voltada para o setor e
associada a projetos sociais e de desenvolvimento turstico.
Dessa forma, necessrio a adoo de uma cultura
empreendedora e empresarial, caracterizando o estmulo a atividade
artesanal e a valorizao do arteso, atravs de iniciativas que
impulsionem o seu desenvolvimento e insira verdadeiramente o
artesanato na economia real.

A COSTURA

Comprar um tecido, escolher a modelagem e dar asas

imaginao: a arte de costurar ainda conquista muitos adeptos at
hoje, seja por necessidade, hobby ou trabalho.
A profisso de costureiro ou alfaiate existe desde o incio da
civilizao. H relatos que afirmam que as agulhas mais antigas, feitas
de osso e marfim, foram fabricadas h mais de 30 mil anos.
Esta arte manual acompanha a histria dos hbitos humanos, j
que, de acordo com a tecnologia disponvel em cada poca da histria,
os trajes ganham novos recursos e sofisticao.
O ofcio permaneceu como uma arte de especialista, passada
de gerao em gerao para homens e mulheres, at a Revoluo
Industrial. Nesta fase, como em diversos outros ofcios, a costura
ganhou padronizao e produo em srie, mais rpida e adequada
ao crescente mercado consumidor.
A inveno da mquina de costura domstica, em meados
do sculo XIX, proporcionou muita praticidade para os adeptos

25
realizarem seus trabalhos com mais rapidez e eficincia.
Nos dias de hoje, possvel encontrar modelos portteis que
executam trabalhos bem detalhados com qualidade profissional, j
que as marcas oferecem equipamentos sofisticados e dotados dos
mais diferentes recursos.
A costura, apesar da industrializao e de todas as mudanas
que sofreu aps sculos, no foi esquecida, e dificilmente perder sua
importncia e seu valor artstico e criativo.

26
 desenvolvimento
A ideia de criar um site para a Simples Assim como TFC surgiu
por razes promissoras: primeiramente pela rea do Web Design ser
uma que me interessa bastante e com a qual descobri no decorrer
do curso possuir facilidade e aptido para trabalhar, ento, alm de
adquirir ainda mais prtica, o desenvolvimento e concluso deste
projeto ter grande peso em um portflio. E outro motivo favorvel
por conta da cliente e dona da marca ser uma familiar e algum
prximo, um fator que facilitou muito o contato, tendo a troca de
informaes e feedbacks da cliente sempre que quaisquer atualizaes
no projeto eram realizadas e enviadas ela.
E ento, aps partirmos da etapa da idealizao do trabalho
e primeiras pesquisas e briefings realizados com a cliente para
prosseguir com o processo criativo, chegamos parte da projeo e
incio do desenvolvimento do site.

DIAGRAMA DE AI

O DIAGRAMA DE AI uma ferramenta essencial para

comunicar a estrutura e a interao das pginas de um site. Serve
para distribuir e definir bem as sees e contedo de um site de
modo que sejam facilmente identificveis, com navegao prtica, e
posteriormente localizadas por quem as procura nesse campo imenso
que a internet.
O Diagrama de AI do site da Simples Assim foi desenhado
logo aps todas as pginas serem estipuladas e qual caminho o
visitante teria de percorrer para ter acesso algumas delas, que so
ramificaes particulares de uma das pginas principais.

27
 So as pginas principais a INCIO, SOBRE, GALERIA DE
PRODUTOS e CONTATO. H tambm outras duas pginas internas,
consideradas secundrias, e esto listadas no rodap do site. So elas
a POLTICA DE PRIVACIDADE e PERGUNTAS FREQUENTES.

As pginas principais conseguem ser bastante autoexplicativas,

porm as restantes so sempre vlidas esclarecer: a POLTICA
DE PRIVACIDADE servir para garantir ao cliente que qualquer
informao pessoal que ele possa ceder (ao entrar em contato, por
exemplo) ser mantida em segurana e no ser divulgada. J a
PERGUNTAS FREQUENTES conter uma lista das dvidas mais
questionadas pelos clientes, todas respondidas nesta pgina para que
seja consultada sempre que necessrio.

28
 WIREFRAMES

Os WIREFRAMES so uma representao visual da estrutura

e funcionalidade de cada pgina de um site (seja no modo desktop
ou mobile). So indispensveis para oferecer uma visualizao mais
concreta e compreensvel do site, e estabelecer a estrutura bsica de
uma pgina antes de elaborar o design e as codificaes.
Vamos conferir o Wireframe das pginas listadas no tpico
anterior: INCIO, SOBRE, GALERIA DE PRODUTOS, CONTATO,
POLTICA DE PRIVACIDADE e PERGUNTAS FREQUENTES.

29
30
31
32
 LINGUAGENS EMPREGADAS

O site da Simples Assim foi desenvolvido com base nos

conhecimentos adquiridos grande parte atravs do curso, e uma
mnima parte por pesquisas na internet, das trs linguagens principais
usadas na criao de websites: HTML, CSS e a Javascript.
O HTML5 (abreviao de HyperText Markup Language, a
Linguagem de Marcao de Hipertexto) a linguagem utilizada para
a construo de pginas web e a mais importante, j que onde se
realiza toda a estruturao, desde a demarcao de cada parcela de
uma pgina (como o cabealho, a rea onde todo o contedo textual e
visual ser exibido, o rodap etc.) at o que estas armazenaro (links,

33
imagens, vdeos, formulrios etc.), as quais posteriormente sero
reproduzidas no navegador.
O CSS (Cascading Style Sheets ou Folhas de Estilo em Cascata) e
fundamental para se personalizar uma pgina na web e determinar as
caractersticas visuais de um site, definindo cores, fontes, tamanhos,
espaamentos, margens e entre inmeras outras propriedades a
todos os elementos do HTML.
JAVASCRIPT a linguagem de programao mais popular no
desenvolvimento web. responsvel por configurar praticamente
qualquer tipo de dinamismo que possa ser includo em um site.
Constitudas por estas trs linguagens, existem trs camadas
bsicas na criao web: a informao fica com o HTML, a formatao
por parte do CSS e o comportamento de tudo definido no Javascript.
O JavaScript a terceira camada, visto que ele manipula
as duas primeiras. Como no caso do site da Simples Assim, por
exemplo, que dispe de um slider de imagens. Toda a movimentao,
o efeito da transio das imagens, as aes de cliques nas setas de
avano e retorno o JavaScript que configura e torna funcional.
Ao site tambm foram incorporados recursos JQUERY, que
uma biblioteca de funes JavaScript que interage com o HTML,
desenvolvida para simplificar os scripts interpretados no navegador.
Foi desenvolvido para tornar mais simples a navegao do documento
HTML. Sua principal caracterstica o encurtamento do cdigo, mas
tambm possui outros benefcios, como a maior compatibilidade entre
navegadores e a possibilidade de usufruir de uma vasta quantidade de
plugins criados por outros desenvolvedores publicados na internet.

SOFTWARES UTILIZADOS

Para o desenvolvimento do site da Simples Assim foi feito o

uso de trs programas, os quais conheci (alguns em diferentes verses)
e obtive prtica em disciplinas do curso de Produo Multimdia.

34
 BRACKETS - Software utilizado para a programao das
linguagens de cdigo HTML, CSS e Javascript de todo o site.
ADOBE PHOTOSHOP CS6 - Usado para a edio e tratamento
de todas as fotografias adicionadas s pginas.
CORELDRAW X8 - Aplicado para a criao do novo logotipo da
marca e de recursos visuais aplicados nas pginas.

EVOLUO

Para se ter uma perspectiva do andamento da construo do

site, desde a montagem de seu esqueleto bsico at a aplicao
dos recursos visuais, imagens, efeitos CSS e etc., vamos observar
um conjunto de screenshots do site da Simples Assim junto de
comentrios respeito do progresso da codificao e concepo
visual de todas as pginas.

O INCIO

Inicialmente, esta era a ideia da pgina INCIO. Com o

logotipo da marca ao topo e o menu de navegao logo abaixo, ambos

35
centralizados, um grande slider que ocupasse a tela inteira e exibisse
imagens atrativas dos produtos da marca. Na imagem acima ainda
no havia sido empregado, mas abaixo do slider seria mostrada uma
prvia do texto que conta a histria do surgimento da marca disponvel
completo na pgina SOBRE em um espao que ocupasse 50% da tela.
Seguindo um ritmo, viria mais uma vez uma grande imagem ocupando
toda a largura convidando especialmente para acessar a GALERIA
DE PRODUTOS e depois outro bloco de texto (at o momento sem
definio de contedo) tambm usando metade do espao da tela.
Para finalizar, seria adicionado somente nessa pgina um widget do
Instagram para promover o perfil da marca na rede social. E o footer
viria em seguida, contendo links para as pginas secundrias do site e
cones de acesso s redes sociais da Simples Assim.

Com a rea do cabealho, menu e rodap fixados, somente o

miolo do site sofreu adaptaes para o contedo.

A SOBRE contm, no entanto, a definio de um novo padro

para as pginas internas: um ttulo grande e um bloco colorido que

36
ocupa a tela inteira para indicar a incluso de uma imagem de fundo.
Abaixo, apenas um simples container para acomodar o texto sobre a
marca e sua criadora.

A GALERIA a mais elaborada, visto que se subdivide em

muitas outras pginas para promover os produtos da Simples Assim
de forma bem organizada. No haviam sido criadas at o momento,
porm podemos ter uma ideia de sua diagramao no tpico de
WIREFRAMES. Ela armazenaria grandes blocos com imagens de

37
produtos no background, que iriam expor ao visitante as categorias
dos produtos da marca e seriam clicveis para redirecion-lo as
pginas seguintes que, por sua vez, mostrariam subcategorias dos
itens relativos a essas categorias. Estas funcionariam da mesma forma
e enviariam o cliente pgina especfica de cada pea da Simples
Assim quando clicadas.
As pginas de cada produto tambm so padronizadas, onde
exibem um slider de fotos das peas e seus detalhes de diversos
ngulos e logo abaixo um espao para a sua descrio.

A pgina CONTATO foi a que menos sofreu modificaes

durante o andamento do trabalho. Desde o incio ela foi desenhada
para abrigar um formulrio de contato e, ao seu lado, uma listagem
de todos os outros meios acessveis para se entrar em contato com a
Simples Assim, com links de redes sociais e nmero de telefone.

As pginas secundrias do site tambm seguem o modelo do

ttulo das pginas internas principais.

38
 A PERGUNTAS FREQUENTES foi pensada para ter uma
forma de ocultar parte do seu contedo textual para que no fosse
muito extensa ao visitante. Este mecanismo ser explanado no tpico
posterior a este (RECURSOS APLICADOS), porm seu dinamismo
fora designado desde o princpio.

J a pgina POLTICAS DE PRIVACIDADE, mais formal e

informativa, teria um visual bsico mantido e seria similar SOBRE,
porm com menos acessrios visuais.
Ambas tambm no haviam sido criadas ainda na poca, porm
graas ao Wireframe e a estas descries, podemos visualiz-las.

CONTINUIDADE

Com o avano da implementao do cdigo, no entanto,

inevitvel que melhores ideias surjam e algumas mudanas ocorram
para garantir o melhor visual do site. Desse modo, as pginas foram
adquirindo novas caractersticas e tomando mais forma.

A primeira fonte que havia sido escolhida para os textos do

site chama-se Merriweather. Mais tarde, ela foi substituda pela atual
Playfair Display.

Uma primeira verso em escala de cinza do novo logotipo da

marca fora inclusa ao site.
Na pgina INCIO, quase todo o desenho inicial se manteve; as

39
nicas mudanas que ocorreram foi o reposicionamento dos links do
menu (mostrada na imagem anterior tambm), sendo incorporados
rea do logotipo, deixando-os todos alinhados, e a reposio da ideia
do slider por uma imagem esttica.

Nas pginas internas, desde a SOBRE at a POLTICAS DE

PRIVACIDADE, iniciaram-se as primeiras tentativas da estilizao da
imagem de fundo dos ttulos.

Foi aplicado uma transio degrad que criava sobre a imagem

um efeito de fade out, desfazendo-a em transparncia. Essa ideia,
princpio, parecia uma tima opo para adornar a pgina e no deixar
os ttulos soltos, porm o visual mostrou-se um pouco incmodo e
no to bonito e suavizado quanto se esperava. A cor do ttulo, at
ento preto, tambm destoava com desarmonia em relao aos outros

40
elementos da pgina, ento foram necessrias mudanas e a ideia foi
posteriormente substituda.

O contedo textual da maioria das pginas neste estgio ainda

no tinha sido includo, mas imagens sim. Alm do fundo dos ttulos,
os destaques do Incio, as categorias dos produtos e o slider tambm
ganharam mais vida e cor com as imagens das diversas estampas da
marca, alm de movimento e interatividade com os primeiros efeitos
de hover. Tambm foram criados os primeiros botes.

Nas pginas das subcategorias e na de cada pea foram

includos os breadcrumbs, uma demarcao do trajeto percorrido
pelo visitante com link as pginas antecedentes a qual ele se encontra.

41
 Textos nesta etapa foram adicionados somente pgina
PERGUNTAS FREQUENTES.

AVANANDO A CONCLUSO

Chegando perto do trmino definitivo do trabalho, agora a

estruturao do site encontra-se quase pronta, faltando apenas
alguns ajustes na interface e no cdigo, este ltimo para manter a
sintaxe da codificao muito bem organizada e coerente.

Aos botes e as abas de perguntas na pgina PERGUNTAS

FREQUENTES foram incorporados pequenos cones de setas que
deslizam para diferentes direes e criam uma ligeira impresso de
movimento, alm de incrementar esses elementos de forma divertida.

42
 No INCIO, os contedos que restavam entre as duas grandes
imagens de destaque foram inseridos; o primeiro contendo a mesma
ideia da prvia do texto a respeito da marca e o convite ao leitor a
conhecer mais sobre a histria com um clique no boto. J na rea
antes pendente fora decidido acrescentar pequenos blocos com
breves depoimentos de clientes sobre a Simples Assim que foram
publicados na pgina do Facebook, uma ideia interessante visto
que compartilhar a opinio daqueles que j realizaram compras e
aprovaram o servio da marca dessa forma atrativo e uma tima
oportunidade de reafirmar a credibilidade da marca, principalmente
aos novos clientes que podero surgir futuramente.

Em todas as pginas foi acrescentado o cdigo de um balo

pop-up para exibir o nmero do celular da dona da marca (com sua
permisso) quando o mouse sobreposto ao cone do Whatsapp.

43
 O fundo dos ttulos das pginas internas finalmente teve seu
visual estabelecido. O efeito degrad da etapa anterior foi removido,
tornando-se um largo bloco de imagem convencional sem transies,
alm da sua altura ter sido diminuda. A esttica, que poderia aparentar
ser simples demais e pouco inovadora, na verdade surpreendeu,
mostrando-se muito agradvel visualmente. Ela no invade o espao
do container, no polui visualmente, no impede a boa leitura do seu
ttulo e traz o colorido ideal que as fotografias devem oferecer s
pginas, sempre exibindo belos detalhes de algum produto, tecido ou
estampa trabalhada pela Simples Assim.

As configuraes de todo o site para diversos tipos de resolues

de computadores e dispositivos mveis tambm tiveram progresso e
o site agora est inteiramente responsivo.

44
 As imagens de todos os produtos que estavam para serem
inclusas nas suas respectivas pginas foram adicionadas. E com elas
tambm a sua descrio, breve, porm suficientemente detalhada da
composio de tecidos e todas as medidas disponveis de cada item.

O contedo da pgina SOBRE (fornecido pela cliente e dona da

marca) e POLTICAS DO SITE tambm foram acrescentadas s suas
determinadas pginas.

O formulrio na pgina CONTATO foi visualmente aprimorado

e simplificado tambm, exibindo a identificao de cada campo dentro
de seu prprio corpo ao invs do lado externo.

Ao footer foi integrado um mecanismo de busca para se realizar

pesquisas de qualquer termo por todo o site. Provisoriamente, este
elemento (e o formulrio de contato tambm) no so funcionais
(consideraes no tpico RECURSOS APLICADOS seguir), mas
futuramente se tornaro totalmente efetivos.

45
 O logotipo colorido e algumas das cores selecionadas para a
paleta de cores oficial do site foram aplicadas nos links.

reCursos aPliCados

EFEITO JQUERY SLIDETOGGLE() - Para haver a praticidade

de todas as perguntas e respostas estarem em uma nica pgina sem
ocupar um espao extenso, de forma organizada e sintetizada, foi
aplicado este jQuery de deslizamento de contedo. Com a aparncia
de bloquinhos que abrigam e comprimem o contedo inserido em si,
eles se adequam e no atrapalham o visual do site. Com a facilidade de
exibir e guardar o contedo apenas com um clique em cada questo,
o cliente pode visualizar uma resposta de cada vez ou vrias ao mesmo
tempo, da forma como preferir.

SLIDER DE IMAGENS - Um slider simples, porm muito eficaz

para expor e promover intensamente todos os produtos da Simples
Assim. De fcil manuseio, totalmente adaptvel para dispositivos
menores, mantm a boa visibilidade e o visitante pode analisar cada
item disponvel para compra com imagens bem detalhadas somente
com alguns cliques nas setas de avano e retorno.

46
 CAMPO DE BUSCA - Um recurso j adicionado ao site, ainda
que se tornar funcional somente aps a hospedagem, j que
necessrio a vinculao um servidor e codificaes mais complexas
para tornar o mecanismo de busca utilizvel.

CONES MVEIS - cones de setas foram adicionados e

configurados para ter um pequeno movimento e indicar ao, alm
de dar mais uma graa ao site. Incorporados aos botes e nos blocos
de perguntas e respostas da pgina Perguntas Frequentes.

EFEITOS HOVER - Ao site foram incorporadas algumas

variaes de efeitos de sobreposio, que ocorrem quando se passa
o mouse sobre algum elemento visual ou textual e uma mudana
visual acontece. Nos botes, por exemplo, h uma alterao no
preenchimento e na cor de fundo em uma breve transio. Nas
divises e subdivises dos produtos, dado um zoom na imagem de
fundo quando h a sobreposio do mouse. J os links textuais do site
simplesmente mudam de cor, e somente os links contidos no menu
principal exibem um sublinhado por baixo das palavras no hover.

47
 POP-UP E LINK AO WHATSAPP - No rodap h uma lista de
cones de redes sociais, nas quais a Simples Assim est presente,
para que os visitantes tenham acesso e possam entrar em contato
com a marca atravs delas. O cone do Whatsapp teve um pequeno
balo pop-up integrado exclusivamente ele para exibir o nmero
do telefone da dona da marca e informar os clientes que queiram
contat-la pela rede social ao mesmo tempo que linkvel para a
verso do Whatsapp no desktop (Web Whatsapp).

48
 Uma adaptao automtica desta linkagem ocorre na
visualizao pelo celular, a qual redireciona o usurio diretamente
para uma conversa com a dona da marca no prprio aplicativo.

FAVICON - Foi includo este pequeno cone com o desenho

de uma agulha e linha (elementos do novo logotipo da marca) que
exibido na aba do navegador, no canto esquerdo, ao lado do ttulo da
pgina que personaliza e auxilia a identificao do site.

MENU RESPONSIVO - Uma das adaptaes mais cruciais

para dispositivos mveis. No site da Simples Assim no poderia
ser diferente, e foi integrado a ele um menu responsivo que, em
smartphones, mantm os links das pginas ocultas e surgem somente
quando o visitante clica no cone no canto superior direito da pgina,
surgindo em uma lista suspensa de links totalmente moldada tela.

49
 PADRES GRFICOS

O site da Simples Assim pode ser visualizado em diversas

resolues sem que haja distores no site, j que, desde o princpio, ele
foi configurado para se adaptar tamanhos variados de computadores
e dispositivos mveis, como smartphones e tablets. Todos os textos,
imagens e reas das pginas se ajustam a todos os tipos de telas para
o maior conforto possvel do visitante.
Todas as imagens contidas no site esto no formato .jpg com
180 dpi, com excesso do logotipo que foi salvo em .png com 300 dpi.
Acerca das fotografias, o formato de compresso e a
quantidade de dpis intermediria e no oferece a maior e melhor
qualidade em comparao com o .png e seus dpis elevados. Porm,
o comprometimento da qualidade das imagens, quando salvas na
opo mxima que o .jpg oferece, so nfimas e dificilmente visveis,
ento no houve perda de qualidade notvel. Alm disso, um ponto
importante que se deve sempre levar em conta que a compresso
(salvamento) dos arquivos de imagens com o formato .jpg os deixa mais
leves e com o carregamento mais acelerado se comparado ao .png,
e um site com carregamento rpido de todos os seus componentes
visuais e contedo torna a visita do cliente muito mais satisfatria.
As fontes optadas para complementar a identidade tipogrfica
do site foram todas obtidas no Google Fonts, que oferece uma grande
quantidade de fontes de estilos variados para domnio pblico.
Quanto ao padro de cores empregado no site, seja de imagens
ou textos e hiperlinks, o RGB. Para estes dois ltimos, utilizou-se o
sistema hexadecimal de cores na codificao.

REQUISITOS PARA VISUALIZAO

O site da marca pode ser muito bem visualizado e navegado

nos browsers mais populares, como o Google Chrome, Mozilla Firefox,
Internet Explorer e pera, tanto em computadores como notebooks e

50
dispositivos mveis. Para a melhor experincia do visitante, contudo,
recomendado o uso das verses mais recentes disponveis destes
navegadores, de preferncia.

MANUTENO E ATUALIZAO DO SITE

O site da Simples Assim um modelo de site que no sofre

nem exige atualizaes constantes, como, por exemplo, um blog. Ele
ter uma frequncia de atualizaes suficiente somente para no
haver o comprometimento do dinamismo do site e tambm do seu
posicionamento em mecanismos de busca quando estiver hospedado
e disponvel para todos.
A frequncia de atualizao estimada mensal para se realizar
simples ajustes, como a troca de alguma imagem de fundo, a edio da
descrio de um ou mais produtos, o acrscimo de um ou vrios novos
itens na GALERIA DE PRODUTOS, a incluso de fotos inditas, etc.

CONCEITOS DE CRIAO ESTTICA

COMPOSIO DE CORES

A composio de cores para o site da Simples Assim foi

construda primeiro utilizando referncias de diversas paletas de cores
disponveis na internet. Depois com experimentaes, adaptando
os tons e criando combinaes. Em seguida, enviando as sugestes
destas para a cliente, que optou pela sua preferida que, portanto,
complementou o visual do site e da nova identidade da marca.

#b99ca4 #f4e3e8 #d65464 #b1dfdb #f2acb6

51
 O tom de verde-gua e a variedade de rosas formam uma
combinao charmosa e alegre, que remetem diversidade de
estampas usadas pela marca e variedade de cores to presentes no
trabalho artesanal.
Os tons mais claros foram includos na paleta para serem
utilizados exclusivamente no site para que no tivesse cores que
fossem fortes demais e incomodassem a visualizao. Elas combinam
mais com o visual clean do site sem atrapalhar o principal colorido
das pginas, que ficou por parte das fotografias.

COMPOSIO DE FONTES

O site composto por uma seleo de fontes incrivelmente

distintas umas das outras, e que, no entanto, formam uma combinao
harmnica e que funcionam muito bem juntas.
As fontes elegidas para constituir a identidade visual do site,
deste relatrio e, no caso de uma delas, tambm para o logotipo
chamam-se Cookie, Montserrat e Playfair Display, e todas foram
adquiridas no Google Fonts gratuitamente.
Abaixo vamos conferir o visual de cada uma das fontes, usando
como exemplo suas prprias denominaes e tambm o nome da
marca com a formatao que ganharam para o site.

Cookie
simples assim
A Cookie uma fonte cursiva de espessura nica e aparncia
graciosa. Tem um aspecto ligeiramente sofisticado, porm tambm
descontrada e muito legvel. Fora utilizada nos ttulos de destaque

52
da pgina INCIO e dos ttulos das pginas internas alm de estar de
acordo com o logotipo, cuja nova verso tambm faz o uso da Cookie,
que transformou significativamente a identidade visual da marca e fez
a escrita Simples Assim ganhar destaque e uma nova fora.
No site, a Cookie foi configurada para ser exibida inteiramente
em caixa baixa e com um espaamento entre as letras de 2 pixels.

Montserrat
SIMPLES ASSIM
A Montserrat uma fonte no-serifada que tem um visual muito
agradvel e vrias espessuras disponveis. Possui um visual moderno
e com uma famlia de espessuras muito contrastante, com fontes
desde as mais finas e delicadas at as mais grossas e realadas.
A fonte no site foi usada no menu principal e secundrio (no
rodap), em ttulos de menor peso, em subttulos, botes, no link para
retornar ao topo do site encontrado no rodap e na categorizao e
subcategorizao dos produtos nas pginas GALERIA DE PRODUTOS
e seguidamente na BOLSAS, NCESSAIRES E CARTEIRAS, KIT
BEB e VARIADOS. Teve diversos tamanhos aplicados para cada um
desses elementos citados, porm teve tambm a configurao fixa de
um espaamento de letras de 0.6 pixels e para sempre ser exibida em
caixa alta.

Playfair Display
Simples Assim
Por ltimo, mas no menos importante, a Playfair Display.
serifada, delicada e com um ar elegante. Tm uma variao mais
bsica de espessuras, se contentando com uma regular e dois nveis

53
de negrito, todas contando tambm com a formatao itlica, mas que
so suficientes.
Ela foi usada em todo o site para o contedo textual, nos
formulrios, na legenda das imagens de destaque do INCIO e
categorias na GALERIA, na descrio dos produtos e no rodap
para o campo de busca e a exibio do Copyright. Foi adicionado um
espaamento entre letras de 0.1 pixels e um espaamento de linhas de
26 pixels para os pargrafos de texto, este ltimo sendo adaptado e
encurtado somente na verso mobile. Quanto variao de tamanho,
foi mnima, se distinguindo somente no footer, nos destaques do
NCIO, na descrio das categorias na GALERIA e no quadro de
listagem das formas de contato na pgina contato.

INTERDISCIPLINARIDADE

Este Trabalho de Final de Curso foi construdo graas aos

aprendizados e capacitaes adquiridos em diversas disciplinas
do curso de e a oportunidade de poder interlig-las e produzir um
trabalho completo com caractersticas de diferentes reas multimdia.

WEB DESIGN - A base primordial para a criao deste site,

onde foi aprendido desde a programao mais bsica dos cdigos
HTML e CSS at tcnicas e ferramentas valiosas para a otimizao e o
crescimento da visibilidade de uma pgina na internet.
DESIGN GRFICO - Aulas fundamentais para se desenvolver e
exercitar uma viso mais ampla respeito de design, cores, tipografias
e diagramaes com estudos tericos e atividades prticas, inclusive
com alguns dos softwares utilizados para a criao desse trabalho.
LABORATRIO DE REPRESENTAO ELETRNICA -
Disciplina importante na qual houve o conhecimento de novos softwares
bsicos para a prtica do design e, principalmente, adequados para a
construo deste relatrio tambm.

54
 DESIGN EDITORIAL - Matria no somente importante, mas
muito necessria, onde aprendemos os padres bsicos da criao de
peas editoriais, sobretudo como deve ser feita a construo de livros,
regras as quais foram aplicadas precisamente neste relatrio do TFC.
TICA E GESTO - Uma srie de contedos teis para se
compreender e definir melhor as etapas do processo de qualquer
trabalho, alm de se criar uma perspectiva mais ampla a respeito da
comunicao, do profissionalismo e da forma tica de se trabalhar.

55
56
 o logotipo
A Simples Assim originalmente possua um logotipo
desenvolvido pela prpria dona desde o surgimento da marca. No
entanto, no incio do projeto, quando ainda estavam sendo feitos
os primeiros planejamentos do site, foi observado que a identidade
visual da marca poderia ser renovada.
E desde alguns ajustes em pequenos detalhes at mudanas
um pouco mais significativas, cujas razes sero explicadas a seguir,
nasceu a nova verso do logotipo da Simples Assim.

57
 A primeira mudana que se nota imediatamente a alterao
da fonte do logotipo. A principal razo desta troca a que o formato
dessa fonte com aspecto manuscrito, apesar de seu charme, no
to legvel, o que torna a sua leitura menos facilitada, principalmente
quando o logotipo aplicado em uma proporo menor, como nas
pequenas etiquetas de tecido costuradas aos produtos da marca
(exemplos em anexos, pg. 65). A fonte do logotipo original, chamada
Notera Personal, foi substituda pela fonte Cookie, que mais robusta,
ntida e se evidencia por si s, com uma tima leitura e legibilidade
independente do seu tamanho.
A segunda maior mudana no logotipo foram as suas cores.
Removendo o preenchimento colorido e substituindo os tons
monocromticos em todo o desenho e na escrita por uma combinao
de duas cores distintas mais suaves e somente na moldura, a
identidade ganhou um aspecto um pouco mais clean. Juntamente com
a mudana da fonte, a escrita da Simples Assim agora com uma cor
prpria, no seguindo os tons coloridos, se destaca ainda mais.
Alguns pequenos detalhes do logotipo original tiveram
mudanas sutis. A segunda borda do logotipo, que fica na parte
interna, teve o um mnimo ajuste em seu desenho. Os tracejados, a
princpio com formato retangular e bordas retas, foram adaptados
para um formato arredondado e que remetesse mais um desenho
de uma linha costurada.
E para incrementar a ltima mudana citada e todo o logotipo
no geral, salientando as caractersticas do servio da marca (a costura
e a produo artesanal) e, definitivamente, estabelecendo a nova
identidade, foi acrescentado um simples desenho de uma linha e agulha
de costura logo abaixo da moldura. Conectada borda tracejada, este
detalhe gracioso d a impresso do arremate da costura do logotipo
onde quer que ele esteja.
A identidade da Simples Assim, a partir de agora, tem uma
personalidade muito mais nica e sua.

58
 o futuro do site
Este Trabalho de Final de Curso foi concludo, porm o site
continua e sempre h o que fazer para melhorar cada vez mais. Para
o futuro da pgina da Simples Assim h algumas metas bsicas
para que, quando estiver online, se mantenha no caminho certo,
prosperando e conquistando o pblico da melhor forma. So estas:

A criao e vinculao de um blog ao site, onde novidades

sobre a marca podero ser publicadas pela prpria dona.
A compra de domnio e hospedagem do site para tornar-se
disponvel para todos.
A configurao dos recursos que so funcionais somente
vinculados um servidor, como o formulrio de contato, o mecanismo
de busca e uma pgina de Erro 404.
A aplicao de todas as tcnicas conhecidas de SEO (Search
Engine Optimization ou Otimizao para Mecanismos de Busca) ao
site para garantir que ele tenha todos os requisitos necessrios ao
ser analisado por sites de busca para se tornar uma pgina de peso,
relevante e muito bem posicionada em mecanismos de pesquisa.
Incorporar o Google Analytics ao site para que se comece a
fazer um monitoramento do trfego no site e analisar quais as pginas
mais acessadas, as menos acessadas, detalhes sobre o pblico que o
acessa, aspectos positivos e negativos observados e o que pode se
fazer para aprimorar a experincia da navegao dos clientes a partir
destes dados.
Realizar atualizaes peridicas e otimizar o site sempre que
possvel para que permanea crescendo, adquirindo cada vez mais
prestgio e clientes, e que o nome Simples Assim conquiste ainda
mais espao e admiradores na internet e por todo o pas.

59
60
 concluso
Criar este trabalho de Web Design, mas tambm com o
englobamento de aprendizados de outras reas, como o Design
Grfico, foi uma experincia importante e que certamente me fez
amadurecer quanto criao, programao e ao compromisso e
responsabilidade de realizar grandes projetos. E as consequncias
disso sero tambm boas recompensas.
Para a Simples Assim e sua criadora, o crescimento do nome
da marca e o aumento da sua popularidade online ser vantajoso e
lucrativo para o negcio, e sua visibilidade trar ainda mais ateno
para o trabalho artesanal e sua comercializao na internet.
Para os clientes, a experincia ser agradvel e proveitosa. O
site possui um visual limpo, com cores suaves, porm contrastantes
com as grandes imagens de produtos dispostas pelas pginas para
que, desde o primeiro momento em que o visitante o acessa, ele possa
imediatamente visualizar o que a marca tem a oferecer. Conforme
transitar pelo site, o cliente pode adquirir mais interesse e compreender
a relevncia do trabalho e o que a aquisio de um ou alguns dos itens
poderia trazer para o seu dia-a-dia: utilidade e praticidade, contando
com um trabalho bem feito e esttica caprichosa. Tudo acomodado em
um layout que flui graas a simplicidade da estrutura e distribuio
de pginas, que tm destaque logo ao topo do site. Sem diagramaes
desordenadas, caminhos complexos para se chegar s sees, mau uso
de fontes e cores que muitas vezes dificultam a leitura do contedo e
entre outros defeitos existentes em muitos sites, a Simples Assim
tem o cuidado de promover, informar e dar a seus clientes uma boa
visita, tanto por parte de seu contedo quanto pelo visual. E isto
com os mecanismos capazes de adapt-lo para qualquer tipo de
dispositivo de distintos tamanhos, um conjunto de configuraes que

61
se tornou praticamente indispensvel no desenvolvimento de sites
para carreg-los aonde for de modo ajustvel celulares e tablets.
E o mercado artesanal ganhar uma grande colaborao para a
promoo de seu valor. Um trabalho que incrivelmente diversificado
e que tem esse ponto alto em seu carter: a sua capacidade de se inovar,
de ser verstil e de ter em todo o seu processo de desenvolvimento
verdadeiro apreo, respeito e cuidado pela arte e seu significado. E a
valorizao de todos esses aspectos so importantes, independente
dos diferentes produtos e ideias de cada marca.

62
 bibliografia
LACERDA, Ivan; OLIVEIRA, Ana Liz. Programador Web: Um guia para
programao e manipulao de banco de dados. 1 ed. Rio de Janeiro: Editora
Senac, 2013.
Histria da Internet. Disponvel em: <https://www.suapesquisa.com/internet>.
Acesso em: 29 set. 2017.
A importncia da Internet na vida do empreendedor. Disponvel em: <http://
www.viannavillage.com.br/a-importancia-da-internet-na-vida-do-
empreendedor/>. Acesso em: 29 set. 2017.
Histria da Costura. Disponvel em: <http://www.nobregaconfeccoes.com/
historia-da-costura>. Acesso em: 29 set. 2017.
A Origem e Evoluo da Costura. Disponvel em: <http://www.magazineluiza.
com.br/portaldalu/a-origem-e-evolucao-da-costura/2806/>. Acesso em: 29
set. 2017.
TROMBINI, Ftima. O artesanato e a sua importncia na economia e na cultura
brasileira. Disponvel em: <http://www.webartigos.com/artigos/o-artesanato-
e-a-sua-importancia-na-economia-e-na-cultura-brasileira/15399/>. Acesso
em: 29 set. 2017.
CSS Opacidade / Transparncia. Disponvel em: <https://www.w3schools.com/
css/css_image_transparency.asp>. Acesso em: 27 ago. 2017.
BOROWSKA, Paula. Experimentos CSS com Entrada e Boto de um Formulrio
de Busca. Disponvel em: <https://webdesign.tutsplus.com/tutorials/css-
experiments-with-a-search-form-input-and-button--cms-22069>. Acesso
em: 15 out. 2017.
COYIER, Chris. Consideraes de Design: Texto Sobre Imagens. Disponvel em:
<https://css-tricks.com/design-considerations-text-images/>. Acesso em: 10
out. 2017.
Melhores Blockquotes. Disponvel em: <https://css-tricks.com/examples/
Blockquotes/>. Acesso em: 12 out. 2017.

63
Flexslider 2. Disponvel em: <http://flexslider.woothemes.com/thumbnail-
controlnav.html>. Acesso em: 25 ago. 2017.
CSS Puro de zoom em imagem no hover dentro de uma div. Disponvel em:
<https://codepen.io/Remedy/pen/ZYJrpp>. Acesso em: 12 out. 2017.
Efeitos Criativos de Link. Disponvel em: <https://tympanus.net/Development/
CreativeLinkEffects/>. Acesso em: 12 out. 2017.
LUNN, Ian. Hover.css. Disponvel em: <http://ianlunn.github.io/Hover/>.
Acesso em: 18 out. 2017.
HOLANDA, Claudio. Ballon.css. Disponvel em: <https://kazzkiq.github.io/
balloon.css/>. Acesso em: 18 out. 2017.
Efeitos jQuery - Deslizamento. Disponvel em: <https://www.w3schools.com/
jquery/jquery_slide.asp>. Acesso em: 25 ago. 2017.
CSS Breadcrumbs. Disponvel em: <https://www.w3schools.com/howto/
howto_css_breadcrumbs.asp>. Acesso em: 12 out. 2017.

64
anexos

65
66
67
68
69
70
71