{"id":260981,"date":"2023-03-08T08:33:00","date_gmt":"2023-03-08T05:33:00","guid":{"rendered":"https:\/\/inform.click\/design-em-destaque-fontes-em-servicos-financeiros\/"},"modified":"2023-03-08T09:25:00","modified_gmt":"2023-03-08T06:25:00","slug":"design-em-destaque-fontes-em-servicos-financeiros","status":"publish","type":"post","link":"https:\/\/inform.click\/pt-pt\/design-em-destaque-fontes-em-servicos-financeiros\/","title":{"rendered":"Design em destaque: fontes em servi\u00e7os financeiros"},"content":{"rendered":"<p>\n  A economia global est\u00e1 crescendo rapidamente e os servi\u00e7os financeiros online continuam a conquistar o mundo. A maioria dos usu\u00e1rios de diferentes partes do globo h\u00e1 muito n\u00e3o consegue imaginar sua vida e seus neg\u00f3cios sem a capacidade de fazer transfer\u00eancias de dinheiro remotamente, e o dinheiro est\u00e1 gradualmente se tornando parte do passado.\n<\/p>\n<p>\n  Cada vez mais bancos e outras organiza\u00e7\u00f5es financeiras est\u00e3o criando aplicativos m\u00f3veis para manter contato com seus clientes, e startups est\u00e3o apresentando novas ideias para implementar servi\u00e7os financeiros seguros, mesmo sem representa\u00e7\u00e3o f\u00edsica.\n<\/p>\n<p>\n  Tudo isso sugere que os servi\u00e7os financeiros online est\u00e3o na onda do desenvolvimento, mas \u00e9 t\u00e3o simples quanto parece? A cria\u00e7\u00e3o de uma aplica\u00e7\u00e3o financeira requer grandes investimentos e, antes de tudo, investimento em reputa\u00e7\u00e3o, o que pode ser feito com a ajuda de ferramentas de design, inclusive. Neste artigo, falaremos sobre o design de solu\u00e7\u00f5es web e mobile para gest\u00e3o financeira, e daremos aten\u00e7\u00e3o especial ao uso de fontes para essa tarefa.\n<\/p>\n<h5>\n  Design Thinking e Abordagem Mobile-First na Ind\u00fastria Fintech<br \/>\n<\/h5>\n<p>\n  Ent\u00e3o, o que vemos primeiro quando abrimos um site ou lan\u00e7amos um aplicativo de qualquer orienta\u00e7\u00e3o? \u00c9 isso mesmo, prestamos aten\u00e7\u00e3o principalmente ao design. Nesse contexto, o design atua como uma combina\u00e7\u00e3o de ferramentas visuais que inconscientemente afetam os usu\u00e1rios e come\u00e7am a convencer (ou desencorajar em caso de m\u00e1 implementa\u00e7\u00e3o) do uso posterior de nosso aplicativo. Quando uma empresa coloca o design de seu aplicativo em primeiro lugar, isso \u00e9 chamado de design thinking. E esta \u00e9 a abordagem certa, pois voc\u00ea n\u00e3o ter\u00e1 uma segunda chance de causar uma primeira impress\u00e3o.\n<\/p>\n<p>\n  Isso \u00e9 especialmente verdadeiro para a cria\u00e7\u00e3o de servi\u00e7os financeiros, porque nesse caso todo o conjunto de ferramentas de design deve ser usado para que o usu\u00e1rio receba uma mensagem direta e forte de que seu dinheiro estar\u00e1 seguro aqui. E a fonte \u00e9 um dos elementos que ajudam a transmitir n\u00e3o apenas uma mensagem de texto, mas tamb\u00e9m uma mensagem subliminar.\n<\/p>\n<p>\n  Al\u00e9m disso, a abordagem mobile-first tamb\u00e9m \u00e9 usada no processo de desenvolvimento de aplicativos modernos. De acordo com essa abordagem, \u00e9 necess\u00e1rio primeiro pensar no conceito de design do aplicativo para celulares ou outras telas pequenas, e s\u00f3 ent\u00e3o mudar para a vers\u00e3o desktop, se necess\u00e1rio. Concentrando-se principalmente em dispositivos m\u00f3veis, os designers de servi\u00e7os financeiros tamb\u00e9m devem prestar aten\u00e7\u00e3o especial \u00e0 fonte e seu tamanho \u2013 porque o espa\u00e7o para implementa\u00e7\u00e3o ser\u00e1 significativamente limitado. E aqui a fonte come\u00e7a a funcionar em forte conex\u00e3o com a interface do usu\u00e1rio, que deve ser criada de forma que o usu\u00e1rio consiga encontrar as informa\u00e7\u00f5es necess\u00e1rias ou realizar a a\u00e7\u00e3o necess\u00e1ria em n\u00e3o mais que tr\u00eas cliques ou toques.\n<\/p>\n<h5>\n  Caracter\u00edsticas da Percep\u00e7\u00e3o de Fontes em Web Design<br \/>\n<\/h5>\n<p>\n  A psicologia de uma fonte determina qual efeito uma determinada fonte produzir\u00e1 em um usu\u00e1rio. Tipografia ou fontes \u00e9 um componente muito significativo, ignorando o que leva \u00e0 cria\u00e7\u00e3o de web design de qualidade inferior. Muitos designers se concentram na beleza e no apelo art\u00edstico do projeto, nas combina\u00e7\u00f5es de cores e no significado pr\u00e1tico, mas poucos se relacionam com o mesmo escr\u00fapulo nas fontes.\n<\/p>\n<p>\n  Eles simplesmente n\u00e3o entendem que \u00e9 o componente visual do texto que envia a mensagem ao usu\u00e1rio. Uma fonte \u00e9 um dos elementos que voc\u00ea precisa levar muito a s\u00e9rio. As fontes fornecem legibilidade e carregam o ponto principal. A psicologia da fonte desempenha o papel da espinha na efic\u00e1cia do web design. Todo designer sabe que as cores afetam o humor, as emo\u00e7\u00f5es e os sentimentos das pessoas. As fontes nesse sentido d\u00e3o o mesmo efeito que as cores.\n<\/p>\n<p>\n  Graf\u00f3logos e desenvolvedores concordam que a escolha do estilo da fonte \u00e9 acompanhada pela transfer\u00eancia de um determinado autovalor, independentemente de o efeito ser usado intencionalmente ou n\u00e3o. Acredita-se que o efeito de aplicar uma determinada fonte em certo sentido depende do contexto, bem como das caracter\u00edsticas da pessoa que a percebe. Essa influ\u00eancia \u00e9 subconsciente. Idealmente, o texto visual e a pr\u00f3pria mensagem devem se complementar, caso contr\u00e1rio, teremos um desencontro.\n<\/p>\n<p>\n  Na vida real, s\u00e3o situa\u00e7\u00f5es em que uma pessoa diz uma coisa e a express\u00e3o facial ou o tom de sua voz revelam o contr\u00e1rio. Muitas pessoas usam uma determinada fonte porque gostam ou simplesmente porque ela est\u00e1 instalada em seu editor de texto, sem imaginar o destinat\u00e1rio da mensagem \u2014 a pessoa que l\u00ea o texto que criou. No entanto, essa abordagem ser\u00e1 extremamente errada para a cria\u00e7\u00e3o de aplica\u00e7\u00f5es financeiras.\n<\/p>\n<h5>\n  Caracter\u00edsticas da percep\u00e7\u00e3o de fontes no design de servi\u00e7os financeiros on-line<br \/>\n<\/h5>\n<p>\n  Portanto, a percep\u00e7\u00e3o visual de sites e aplicativos de servi\u00e7os financeiros tem seus pr\u00f3prios recursos principais. E decorrem dos valores que o servi\u00e7o traduz para atrair e reter usu\u00e1rios. Os principais valores, neste caso, s\u00e3o seguran\u00e7a, confiabilidade, garantias e reputa\u00e7\u00e3o, pois estamos falando de ativos valiosos que os usu\u00e1rios confiam temporariamente a uma determinada empresa.\n<\/p>\n<p>\n  Portanto, os elementos visuais devem estar em conformidade e refletir esses valores e, em nenhum caso, contradiz\u00ea-los. E a fonte \u00e9 uma, mas n\u00e3o o \u00fanico elemento que funciona nessa tarefa. Para criar uma impress\u00e3o visual e uma interface de usu\u00e1rio que transmita esses valores, os designers de servi\u00e7os financeiros tamb\u00e9m precisam usar corretamente o espa\u00e7o branco ou vazio, bem como a combina\u00e7\u00e3o certa de cores do ponto de vista da psicologia da percep\u00e7\u00e3o. A seguir, falaremos sobre quais pares de fontes e cores s\u00e3o mais adequados para a cria\u00e7\u00e3o de sites ou aplicativos financeiros.\n<\/p>\n<h5>\n  Pares de fontes potencialmente correspondentes<br \/>\n<\/h5>\n<p>\n  Fontes com grandes letras redondas &#8220;O&#8221; e &#8220;rabos de cavalo&#8221; s\u00e3o percebidas como amig\u00e1veis \u200b\u200be &#8220;humanas&#8221;, possivelmente porque seu estilo imita a imagem de um rosto humano. Exemplos s\u00e3o Apple Pay, Google Pay e Square. Nesse contexto, Square \u00e9 o indicador mais cl\u00e1ssico deste exemplo, enquanto o efeito de humaniza\u00e7\u00e3o \u00e9 criado pela Apple e pelo Google por meio do uso de tais logotipos nativos e familiares na frente do nome do sistema de pagamento.\n<\/p>\n<p>\n  Fontes retas e angulares est\u00e3o associadas \u00e0 inflexibilidade, rigidez; eles s\u00e3o caracterizados pela frieza, aus\u00eancia de rosto e mecanicismo. Em termos de psican\u00e1lise, eles s\u00e3o definidos por express\u00f5es como &#8220;sandu\u00edche emocionalmente&#8221; ou &#8220;mente forte&#8221;. Um exemplo \u00e9 o Skrill.\n<\/p>\n<p>\n  Fontes antigas (serifas) como Times, Times New Roman e Palatino s\u00e3o um meio-termo entre o antigo e o novo. Claras e bastante simples, t\u00eam forma e redondezas bem definidas, insinuando a tradi\u00e7\u00e3o e continuidade neocl\u00e1ssica. Causam um sentimento de confian\u00e7a, por isso s\u00e3o os favoritos entre os respeitados representantes dos neg\u00f3cios tradicionais. Exemplos s\u00e3o Stripe, PayPal e alguns outros bancos de classe mundial.\n<\/p>\n<p>\n  As fontes Sans Serif, como Arial, Modern e Univers, t\u00eam uma carga emocional baixa e est\u00e3o associadas \u00e0 praticidade e sanidade. Eles carregam um come\u00e7o comum moderno e s\u00e3o uma escolha confi\u00e1vel para aqueles que desejam harmonia e n\u00e3o est\u00e3o preocupados com a auto-express\u00e3o por meio do design da fonte. Um exemplo \u00e9 o Visa.\n<\/p>\n<p>\n  Normalmente, fontes Sans Serif modernas falam sobre for\u00e7a, confiabilidade e estabilidade (como Montserrat, Futura Medium e Overpass) e fontes com personalidade forte (como Arsenal) s\u00e3o geralmente usadas no setor de servi\u00e7os financeiros. Al\u00e9m disso, muitas vezes, os designers precisam usar duas fontes para transmitir corretamente a mensagem de marketing necess\u00e1ria e tra\u00e7ar uma linha entre a chave e as informa\u00e7\u00f5es adicionais. Para servi\u00e7os financeiros, os seguintes pares de fontes ser\u00e3o adequados, pois sua combina\u00e7\u00e3o aumenta a sensa\u00e7\u00e3o de confian\u00e7a e confiabilidade.\n<\/p>\n<ul>\n<li>\n    <a href=\"https:\/\/typekit.com\/fonts\/soleil\" target=\"_blank\" rel=\"noopener\">Soleil<\/a> + <a href=\"http:\/\/www.fontsquirrel.com\/fonts\/borgia-pro\" target=\"_blank\" rel=\"noopener\">Borgia Pro<\/a>. S\u00e3o duas fontes cl\u00e1ssicas que se complementam perfeitamente e s\u00e3o bem percebidas quando combinadas. Eles falam sobre a confiabilidade das informa\u00e7\u00f5es e dados verificados.\n  <\/li>\n<li>\n    <a href=\"https:\/\/typekit.com\/fonts\/canada-type-gibson\" target=\"_blank\" rel=\"noopener\">Gibson<\/a> + <a href=\"https:\/\/typekit.com\/fonts\/adriane-text\" target=\"_blank\" rel=\"noopener\">Adriane Texto<\/a>. Este par \u00e9 um pouco semelhante ao anterior e geralmente executa suas tarefas muito bem.\n  <\/li>\n<li>\n    <a href=\"http:\/\/canadatype.net\/fonts\/clarendon-text\" target=\"_blank\" rel=\"noopener\">Clarendon Texto<\/a> + <a href=\"https:\/\/typekit.com\/fonts\/interface\" target=\"_blank\" rel=\"noopener\">Interface<\/a>. Essas duas fontes Serif e Sans Serif possuem letras arredondadas e excelente legibilidade, e isso, como dissemos anteriormente, \u00e9 bom para humanizar seu atendimento.\n  <\/li>\n<li>\n    <a href=\"https:\/\/typekit.com\/fonts\/abril-titling\" target=\"_blank\" rel=\"noopener\">Abril Titula\u00e7\u00e3o<\/a> + <a href=\"https:\/\/typekit.com\/fonts\/fira-sans\" target=\"_blank\" rel=\"noopener\">Fira Sans<\/a>. Usadas juntas, essas duas fontes t\u00eam um bom efeito no n\u00edvel de confian\u00e7a e subconscientemente falam de garantias \u2013 \u00e9 exatamente disso que sua aplica\u00e7\u00e3o financeira pode precisar.\n  <\/li>\n<li>\n    <a href=\"https:\/\/typekit.com\/fonts\/fira-sans\" target=\"_blank\" rel=\"noopener\">Fira Sans<\/a> + <a href=\"https:\/\/typekit.com\/fonts\/freight-text-pro\" target=\"_blank\" rel=\"noopener\">Freight Text Pro<\/a>. Esta \u00e9 a \u00faltima combina\u00e7\u00e3o perfeita que transmite uma sensa\u00e7\u00e3o de confian\u00e7a em cada a\u00e7\u00e3o realizada.\n  <\/li>\n<\/ul>\n<h5>\n  Cores potencialmente correspondentes<br \/>\n<\/h5>\n<p>\n  No entanto, n\u00e3o basta apenas escolher as fontes certas. Tamb\u00e9m \u00e9 necess\u00e1rio combin\u00e1-los com compet\u00eancia com o esquema de cores. Aqui est\u00e3o as cores mais adequadas para servi\u00e7os financeiros em termos de psicologia.\n<\/p>\n<ul>\n<li>\n    <strong>Branco<\/strong>: Esta \u00e9 a cor mais popular e voc\u00ea ver\u00e1 isso quando olhar os exemplos abaixo. A cor branca transmite paz e harmonia. Na linguagem dos servi\u00e7os financeiros, o branco significa a transpar\u00eancia de todas as a\u00e7\u00f5es e a integridade de todas as transa\u00e7\u00f5es financeiras.\n  <\/li>\n<li>\n    <strong>Azul claro<\/strong>: O azul claro indica estabilidade e seguran\u00e7a. E esta \u00e9 a segunda cor mais popular que os designers escolhem para sites e aplicativos financeiros. Azul indica que \u00e9 um lugar seguro para ser confi\u00e1vel. O anal\u00f3gico \u00e9 o c\u00e9u azul, que est\u00e1 sempre acima de nossas cabe\u00e7as, independente das circunst\u00e2ncias.\n  <\/li>\n<li>\n    <strong>Cinza<\/strong>: Cinza \u00e9 a cor do profissionalismo e da mente fria. Sendo utilizado no desenvolvimento de aplica\u00e7\u00f5es financeiras, o cinza indica que todas as opera\u00e7\u00f5es ser\u00e3o realizadas com precis\u00e3o matem\u00e1tica at\u00e9 um milion\u00e9simo.\n  <\/li>\n<li>\n    <strong>Vermelho<\/strong>: O vermelho \u00e9 uma cor ousada o suficiente. No entanto, \u00e9 lindamente usado pela MasterCard em combina\u00e7\u00e3o com o amarelo. Nesse caso, a cor indica lideran\u00e7a no setor e qualidade dos servi\u00e7os.\n  <\/li>\n<li>\n    <strong>Amarelo<\/strong>: Amarelo \u00e9 a cor de um est\u00edmulo positivo. Subconscientemente, tamb\u00e9m desperta uma sensa\u00e7\u00e3o de confian\u00e7a, seguran\u00e7a e estabilidade, al\u00e9m de motivar a a\u00e7\u00e3o.\n  <\/li>\n<li>\n    <strong>Preto<\/strong>: O preto \u00e9 a cor mais rigorosa, que mais uma vez enfatiza o profissionalismo e as garantias de ferro. O preto n\u00e3o permite emo\u00e7\u00f5es e erros. Esta \u00e9 a cor da falta de ambiguidade.\n  <\/li>\n<\/ul>\n<p>\n  Exemplos Pr\u00e1ticos\n<\/p>\n<p>\n  Ent\u00e3o, vamos ver como as fontes e cores que listamos podem ser implementadas na pr\u00e1tica.\n<\/p>\n<h5>\n  PayPal<br \/>\n<\/h5>\n<p>\n  O PayPal \u00e9 um cl\u00e1ssico no design de servi\u00e7os financeiros. As duas cores mais populares e confi\u00e1veis \u200b\u200b\u2013 branco e azul s\u00e3o usadas no site. Al\u00e9m disso, o branco tamb\u00e9m \u00e9 usado para o efeito de espa\u00e7o vazio para enfatizar a import\u00e2ncia da informa\u00e7\u00e3o textual.\n<\/p>\n<h5>\n  Listra<br \/>\n<\/h5>\n<p>\n  Stripe continua a tend\u00eancia cl\u00e1ssica originalmente definida pelo PayPal.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-313441-638391dab2bbe.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-313441-638391dab2bbe.webp\" alt=\"\" \/><\/a><\/p>\n<h5>\n  Skrill<br \/>\n<\/h5>\n<p>\n  Este servi\u00e7o usa uma cor inesperada \u2013 roxo, mas tamb\u00e9m n\u00e3o recusa de azul e branco, e um pouco de cinza \u00e9 adicionado.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-313441-638391ddb7575.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-313441-638391ddb7575.webp\" alt=\"\" \/><\/a><\/p>\n<h5>\n  Western Union<br \/>\n<\/h5>\n<p>\n  A WesternUnion \u00e9 um participante forte e s\u00e9rio do mercado financeiro. Suas cores s\u00e3o preto, amarelo como cores prim\u00e1rias, e tamb\u00e9m branco e azul como opcionais.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-313441-638391e08989a.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-313441-638391e08989a.webp\" alt=\"\" \/><\/a><\/p>\n<h5>\n  Conclus\u00e3o \u2013 Lembre-se que nem tudo depende da escolha da fonte<br \/>\n<\/h5>\n<p>\n  Talvez sua tarefa n\u00e3o seja resolvida com a escolha de uma fonte &#8220;bonita&#8221;, mas com o uso correto dos fundamentos da tipografia. No layout, o resultado final \u00e9 afetado n\u00e3o apenas pela fonte selecionada, mas tamb\u00e9m por seu tamanho, tipo (por exemplo, negrito ou it\u00e1lico), dist\u00e2ncia entre linhas (leading), dist\u00e2ncia entre letras (tracking e kerning), recuos e margens, uso de caracteres tipogr\u00e1ficos (por exemplo, travess\u00f5es longos e aspas), cor, composi\u00e7\u00e3o, hierarquia visual, presen\u00e7a de outros elementos gr\u00e1ficos e muito mais!\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Fonte de grava\u00e7\u00e3o: <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2020\/04\/07\/financial-services-website-fonts\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>A economia global est\u00e1 crescendo rapidamente e os servi\u00e7os financeiros online continuam a conquistar o mundo. A maioria dos usu\u00e1rios de diferentes partes do globo h\u00e1 muito n\u00e3o consegue imaginar sua vida e seus neg\u00f3cios sem a capacidade de fazer transfer\u00eancias de dinheiro remotamente, e o dinheiro est\u00e1 gradualmente se tornando parte do passado. Cada vez mais bancos e outras organiza\u00e7\u00f5es financeiras est\u00e3o criando aplicativos m\u00f3veis para manter contato com seus clientes, e startups est\u00e3o apresentando novas ideias para implementar servi\u00e7os financeiros seguros, mesmo sem representa\u00e7\u00e3o f\u00edsica. Tudo isso sugere que os servi\u00e7os financeiros online est\u00e3o na onda do desenvolvimento, \u2026<\/p>\n","protected":false},"author":1,"featured_media":192175,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[202,254,59],"tags":[],"class_list":["post-260981","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-designer-de-web","category-fontes","category-web-e-wordpress-2"],"_links":{"self":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/260981","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=260981"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/260981\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/192175"}],"wp:attachment":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=260981"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=260981"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=260981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}