{"id":261186,"date":"2024-01-11T07:12:00","date_gmt":"2024-01-11T04:12:00","guid":{"rendered":"https:\/\/inform.click\/contacao-de-historias-interativas-e-sua-aplicacao-na-industria-de-web-design\/"},"modified":"2024-01-11T08:06:00","modified_gmt":"2024-01-11T05:06:00","slug":"contacao-de-historias-interativas-e-sua-aplicacao-na-industria-de-web-design","status":"publish","type":"post","link":"https:\/\/inform.click\/pt-pt\/contacao-de-historias-interativas-e-sua-aplicacao-na-industria-de-web-design\/","title":{"rendered":"Conta\u00e7\u00e3o de hist\u00f3rias interativas e sua aplica\u00e7\u00e3o na ind\u00fastria de web design"},"content":{"rendered":"

\n Ter o elemento gr\u00e1fico \u00e9 a necessidade de todo site hoje em dia. Sem o uso adequado de recursos visuais, voc\u00ea simplesmente n\u00e3o pode transmitir sua mensagem ao visitante, melhor ainda, fazer com que ele abandone seu site.\n<\/p>\n

\n Os recursos visuais t\u00eam o potencial de atingir a mente do espectador e atra\u00ed-lo para qualquer coisa que voc\u00ea esteja tentando introduzir, vender ou investir. Para usar os recursos visuais a seu favor e obter tr\u00e1fego da maneira mais r\u00e1pida poss\u00edvel, o melhor m\u00e9todo para envolver e converter o visitante \u00e9 por meio da narrativa interativa.\n<\/p>\n

\n Por que contar hist\u00f3rias?\n<\/p>\n

\n Eu sei o que deve estar passando pela sua cabe\u00e7a agora. O que Cinderela ou Rapunzal tem a ver com a experi\u00eancia visual de um site? Bem, contar hist\u00f3rias n\u00e3o se limita apenas a contos de fadas e franquias da Disney, mas contar hist\u00f3rias \u00e9 uma maneira eficaz no mix de marketing de qualquer site que pretenda se colocar no topo da competi\u00e7\u00e3o.\n<\/p>\n

\n Como criar uma hist\u00f3ria interativa
\n<\/h5>\n

\n \u00c9 preciso muito planejamento e teste para conectar o design com a hist\u00f3ria, ent\u00e3o, quando voc\u00ea o mostra na p\u00e1gina de destino do seu site, n\u00e3o o faz de bobo. Seus visuais n\u00e3o precisam ser uma obra-prima de v\u00e1rios designers e um CGI caro. Voc\u00ea pode contar sua hist\u00f3ria com um \u00fanico banner de imagem bem articulado. Por\u00e9m, o desafio se apresenta quando sua narrativa se cruza com o objetivo do seu site. Sobre o que \u00e9 o seu site? Qual \u00e9 o logotipo da sua marca e por que ela est\u00e1 vendendo o que vende? Tudo o que voc\u00ea explica atrav\u00e9s do visual deve ser \u00fanico, sem um cent\u00edmetro de pl\u00e1gio. Deve se tornar t\u00e3o atraente que, depois de visitar seu site uma vez, as pessoas comecem a compartilh\u00e1-lo, falar sobre ele e revisit\u00e1-lo novamente.\n<\/p>\n

\n Como funciona
\n<\/h3>\n

\n Existe uma grande disparidade entre um site que tem imagens, gr\u00e1ficos e anima\u00e7\u00e3o versus uma plataforma centralizada em texto que voc\u00ea chama de site. \u00c9 imposs\u00edvel julgar as pessoas e antes que voc\u00ea possa ter uma conversa adequada, elas se foram. Elementos multim\u00eddia s\u00e3o injetados para evitar isso. Quando um cliente v\u00ea um texto simples descrevendo um produto, h\u00e1 um sentimento de compuls\u00e3o para ler o alfabeto e as palavras da declara\u00e7\u00e3o, enquanto uma imagem, v\u00eddeo ou anima\u00e7\u00e3o gr\u00e1fica \u00e9 t\u00e3o f\u00e1cil de ver quanto de compreender.\n<\/p>\n

\n Vendendo um grande produto com uma hist\u00f3ria curta
\n<\/h5>\n

\n Uma empresa que vende autom\u00f3veis tem muito a preencher antes de poder fazer qualquer venda por meio de sua plataforma online. Comprar carros online exige muita coragem do cliente porque grandes somas est\u00e3o envolvidas. Se o site n\u00e3o chamar a aten\u00e7\u00e3o do cliente, n\u00e3o passar\u00e1 de lixo flutuando na Internet. Vender carros, caminh\u00f5es ou maquin\u00e1rio pesado on-line certos \u00e2ngulos de marketing para expor os USPs (pontos de venda exclusivos) do produto. Conhe\u00e7o um site de carros que usou a t\u00e9cnica perfeita de contar hist\u00f3rias para mostrar seu toque especial na tela do cliente.\n<\/p>\n

\n Exemplo<\/strong> :\n<\/p>\n

\n Lexusls.asia<\/a> \u00e9 uma ramifica\u00e7\u00e3o da Toyota que vende carros de luxo. No site, os designers utilizaram de forma brilhante a rolagem parallax para apresentar o carro com texto suficiente para atrair o visitante. Ent\u00e3o, de repente, um pneu rola da direita e mostra algumas outras caracter\u00edsticas interessantes do carro. \u00c0 medida que voc\u00ea rola para baixo, o site n\u00e3o o solta e, com alguns gr\u00e1ficos interessantes, descreve o objetivo e os benef\u00edcios do carro.\n<\/p>\n

\n linguagem visual
\n<\/h5>\n

\n A linguagem visual tem a capacidade de explorar a pr\u00f3pria base do design centrado no ser humano. A linguagem visual remonta e mesmo antes de qualquer alfabeto ser inventado, pois as pinturas rupestres eram o meio b\u00e1sico de comunica\u00e7\u00e3o. As pinturas rupestres funcionavam como fonte de narrativa, guia para sobreviver e evitar perigos potenciais que faziam parte daquele per\u00edodo. Mais ou menos, os desenhos rupestres s\u00e3o a forma mais antiga de dados visuais.\n<\/p>\n

\n Sabemos que imagens e v\u00eddeos possuem um grande poder comunicativo, como aproveitar esse poder atrav\u00e9s dos pixels?\n<\/p>\n

\n Exemplo<\/strong> :\n<\/p>\n

\n \u00c9 quando sua pr\u00f3pria imagina\u00e7\u00e3o vem para jogar. Adicionar imagens e v\u00eddeos com o texto de mistura certo para que seu site fale por si.\n<\/p>\n

\"\"<\/a><\/p>\n

\n A Bellroy.com<\/a> vende suas carteiras de couro com a garantia de maior espa\u00e7o com designs mais finos. Como eles mostram isso \u00e9 atrav\u00e9s de um elegante controle deslizante com imagens HD de uma de suas carteiras contra a outra. \u00c0 medida que o controle deslizante se move, a hist\u00f3ria tamb\u00e9m se move e em 10 imagens a mesma quantidade de cart\u00f5es \u00e9 colocada em sua carteira de marca, enquanto deforma a outra carteira mais do que realmente \u00e9. Aqui a conclus\u00e3o \u00e9 marcante e com moral de sobra.\n<\/p>\n

\n Projete a hist\u00f3ria
\n<\/h5>\n

\n \u00c9 bem parecido com escrever uma pe\u00e7a quando voc\u00ea cria uma hist\u00f3ria visual. Todos os aspectos e elementos da pe\u00e7a est\u00e3o presentes em seu site e se misturam com tanta intimidade que se fundem completamente com a hist\u00f3ria que voc\u00ea apresentou. Sua hist\u00f3ria come\u00e7a com a configura\u00e7\u00e3o que voc\u00ea arranjou, depois avan\u00e7a para o conflito e termina com uma resolu\u00e7\u00e3o.\n<\/p>\n

\n Este site, por exemplo, tem um jeito \u00fanico de pegar o visitante pelo bra\u00e7o e convidar para um baile repleto de emo\u00e7\u00f5es e mimos visuais.\n<\/p>\n

\n Os usu\u00e1rios devem estar bem cientes da hist\u00f3ria, pois ela os leva ao seu destino. E \u00e9 a\u00ed que o visitante se torna o lead e o lead se torna o cliente. \u00c9 justo que o produto ou servi\u00e7o que voc\u00ea planeja apresentar por meio do processo de contar hist\u00f3rias tenha algo que o usu\u00e1rio precise, uma funcionalidade \u00fanica ou uma margem de pre\u00e7o que o cliente esteja procurando.\n<\/p>\n

\n Exemplo<\/strong> :\n<\/p>\n

\"\"<\/a><\/p>\n

\n Bagigia.com<\/a> primeiro oferece ao visitante uma introdu\u00e7\u00e3o do varejista, seguida por uma imagem 3D simples, por\u00e9m profunda, do pr\u00f3prio produto com texto emocional para manter a hist\u00f3ria fluindo. O amplo espa\u00e7amento em branco no design ajuda o usu\u00e1rio a se concentrar, pois o produto se destaca no centro, trazendo a hist\u00f3ria para a a\u00e7\u00e3o e para a resolu\u00e7\u00e3o.\n<\/p>\n

\n Usando hist\u00f3rias animadas a seu favor
\n<\/h5>\n

\n \u00c9 verdade. A anima\u00e7\u00e3o do site foi v\u00edtima de uso excessivo sem qualquer considera\u00e7\u00e3o por conven\u00e7\u00f5es ou padr\u00f5es e essa \u00e9 a principal raz\u00e3o por tr\u00e1s de sua queda nos \u00faltimos 5 anos. Ironicamente, muito poucos designers sabem como o uso de anima\u00e7\u00e3o inteligente e pontual pode transformar sua hist\u00f3ria em um filme do Cavaleiro das Trevas. A anima\u00e7\u00e3o \u00e9 constru\u00edda para cobrir o que as imagens est\u00e1ticas n\u00e3o podem completar e, ao mesmo tempo, adicionar divers\u00e3o ao pr\u00f3prio design.\n<\/p>\n

\n Exemplo<\/strong> :\n<\/p>\n

\"\"<\/a><\/p>\n

\n Falando em DarkKnight, este aplicativo para iOS em benthebodyguard.com<\/a> permite que voc\u00ea proteja e criptografe informa\u00e7\u00f5es em seu site que apresenta uma anima\u00e7\u00e3o passo a passo (literalmente) enquanto voc\u00ea desce com ‘Ben' no meio, o guarda-costas que jurou proteger suas informa\u00e7\u00f5es com uma reputa\u00e7\u00e3o formid\u00e1vel. Este site exemplificou como a anima\u00e7\u00e3o pode ser usada da melhor forma poss\u00edvel para produzir a hist\u00f3ria de prop\u00f3sito ideal para um produto.\n<\/p>\n

\n Traduzindo mensagem de design
\n<\/h5>\n

\n N\u00e3o \u00e9 uma surpresa para voc\u00ea como um design que \u00e9 simplesmente uma mistura de artes visuais e gr\u00e1ficos pode produzir empatia dentro de voc\u00ea? Eu sei que tenho. N\u00f3s, como humanos, reagimos aos nossos sentidos animais tanto quanto qualquer outro organismo que seja fiel \u00e0 sua natureza. Quando vemos um gal\u00e3 \u2013 fazemos como programado. Aproveitando essa caracter\u00edstica do comportamento humano, sua hist\u00f3ria nem sempre precisa ser um buzz kill sobre seu manifesto e produtos, porque provavelmente \u00e9 isso que todos os outros propriet\u00e1rios de sites t\u00eam em mente atualmente. Quando voc\u00ea adiciona um senso de sentimento, esp\u00edrito e moral, sua hist\u00f3ria se transforma em uma mensagem.\n<\/p>\n

\n Exemplo<\/strong> :\n<\/p>\n

\"\"<\/a><\/p>\n

\n Este site everylastdrop.co.uk<\/a> leva voc\u00ea a uma jornada de uso di\u00e1rio da \u00e1gua em sua casa e arredores. Ler sobre os fatos de quanta \u00e1gua \u00e9 desperdi\u00e7ada todos os dias \u00e9 muito comum e muitas vezes nunca \u00e9 levado a s\u00e9rio. Este carinha inocente que usa \u00e1gua indiscriminadamente em sua rotina di\u00e1ria n\u00e3o apenas destaca a import\u00e2ncia da \u00e1gua, mas tamb\u00e9m a coloca em contraste com aqueles que mais precisam dela em partes dif\u00edceis do mundo. Cresce tanto na mente do espectador que ele provavelmente pensaria duas vezes antes de desperdi\u00e7ar outra gota de \u00e1gua na pr\u00f3xima vez.\n<\/p>\n

\n Usando elementos escuros
\n<\/h5>\n

\n Os romances s\u00e3o divertidos de ler e, com as recentes escaladas tecnol\u00f3gicas, agora \u00e9 necess\u00e1rio que sejam lidos nos livros. At\u00e9 hoje, a grande maioria dos usu\u00e1rios online ainda prefere julgar o livro pela capa do que realmente ler o pr\u00f3logo. Para lidar com esses usu\u00e1rios on-line e atra\u00ed-los para o produto, muitos escritores costumam contratar desenvolvedores para criar sites dedicados a seus romances. Um ensaio passo a passo do romance com sequ\u00eancias animadas n\u00e3o apenas dar\u00e1 \u00e0 hist\u00f3ria os fogos de artif\u00edcio de que ela precisa, mas tamb\u00e9m atrair\u00e1 o usu\u00e1rio online para a leitura.\n<\/p>\n

\n Exemplo<\/strong> :\n<\/p>\n

\"\"<\/a><\/p>\n

\n Usando o mesmo princ\u00edpio e estrutura, o aclamado conto de Nam Le, ‘The Boat', foi convertido em uma hist\u00f3ria em quadrinhos interativa, criando um mundo de tempestades devastando o oceano, for\u00e7ando um barco dos terrores da Guerra do Vietn\u00e3. A melhor coisa que qualquer um pode fazer em sua festa de contar hist\u00f3rias \u00e9 adicionar som ao seu design. Esse \u00e9 o superlativo de contar hist\u00f3rias animadas para adquirir UX. Veja aqui<\/a>.\n<\/p>\n

\n Envolvente e cheio de ilustra\u00e7\u00f5es, \u00e9 realmente a prova de qu\u00e3o bem voc\u00ea pode gerenciar um produto criando um design que se move conforme voc\u00ea interage com ele.\n<\/p>\n

\n Unifica\u00e7\u00e3o da rolagem
\n<\/h5>\n

\n No setor de com\u00e9rcio eletr\u00f4nico, as pessoas geralmente est\u00e3o interessadas em obter os benef\u00edcios de um produto que pode ser usado em v\u00e1rias inst\u00e2ncias, mas pelo mesmo motivo. Por um lado, torna a vida deles muito mais f\u00e1cil e, por outro, faz parte da era tecnol\u00f3gica. Mas com tanto a aprender e reconhecer sobre um empreendimento como este, \u00e9 muito menos prov\u00e1vel que os clientes arrisquem algo que tem implica\u00e7\u00f5es futur\u00edsticas e serve ao seu prop\u00f3sito com muita facilidade, tornando-o bom demais para ser verdade. J\u00e1 vi empresas que tentaram vender tais produtos com muito a concordar e o resultado foi um abandono tr\u00e1gico.\n<\/p>\n

\n Exemplo<\/strong> :\n<\/p>\n

\"\"<\/a><\/p>\n

\n No entanto, este produto n\u00e3o s\u00f3 consegue vender, como tamb\u00e9m cumpre o que promete aos seus clientes. Este produto em onlycoin.com<\/a> \u00e9 um cart\u00e3o \u00fanico que cont\u00e9m todos os seus cart\u00f5es de cr\u00e9dito. O processo de contar hist\u00f3rias ajuda o espectador a entender a complica\u00e7\u00e3o de carregar muitos cart\u00f5es em sua carteira com racioc\u00ednio, mas com a exibi\u00e7\u00e3o gr\u00e1fica da otimiza\u00e7\u00e3o passo a passo do cart\u00e3o e transporte compacto, torna-se dif\u00edcil discordar das aplica\u00e7\u00f5es prometidas do produto.\n<\/p>\n

\n Conclus\u00e3o
\n<\/h3>\n

\n Contar hist\u00f3rias n\u00e3o se limita apenas a qualquer produto ou objetivo; est\u00e1 aberto a todos os tipos de exerc\u00edcios de com\u00e9rcio eletr\u00f4nico que ajudam os visitantes a obter o UX ideal sem comprometer a funcionalidade do design. Aprender a dominar isso para seus pr\u00f3prios produtos e servi\u00e7os por meio de sites de com\u00e9rcio eletr\u00f4nico \u00e9 fundamental nesta era do marketing eletr\u00f4nico. Sem ler a mentalidade do consumidor, voc\u00ea simplesmente n\u00e3o pode lan\u00e7ar seu produto e, sem demanda, n\u00e3o h\u00e1 produ\u00e7\u00e3o. Como diz Tim O'brien, “Contar hist\u00f3rias \u00e9 a atividade humana essencial, quanto mais dif\u00edcil a situa\u00e7\u00e3o, mais essencial ela \u00e9”, e confie em mim, amigo, a situa\u00e7\u00e3o nunca fica mais f\u00e1cil.\n<\/p>\n<\/p>\n

\n Fonte de grava\u00e7\u00e3o: instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Ter o elemento gr\u00e1fico \u00e9 a necessidade de todo site hoje em dia. Sem o uso adequado de recursos visuais, voc\u00ea simplesmente n\u00e3o pode transmitir sua mensagem ao visitante, melhor ainda, fazer com que ele abandone seu site. Os recursos visuais t\u00eam o potencial de atingir a mente do espectador e atra\u00ed-lo para qualquer coisa que voc\u00ea esteja tentando introduzir, vender ou investir. Para usar os recursos visuais a seu favor e obter tr\u00e1fego da maneira mais r\u00e1pida poss\u00edvel, o melhor m\u00e9todo para envolver e converter o visitante \u00e9 por meio da narrativa interativa. Por que contar hist\u00f3rias? Eu sei o que deve estar passando pela sua cabe\u00e7a agora. \u2026<\/p>\n","protected":false},"author":1,"featured_media":149254,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[358,397,59],"tags":[],"class_list":["post-261186","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-entretenimento","category-projeto","category-web-e-wordpress-2"],"_links":{"self":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/261186","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/comments?post=261186"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/261186\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/149254"}],"wp:attachment":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=261186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=261186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=261186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}