{"id":143,"date":"2024-03-05T00:56:59","date_gmt":"2024-03-05T00:56:59","guid":{"rendered":"https:\/\/remenezes.com.br\/novo2024\/?page_id=143"},"modified":"2024-03-15T20:19:12","modified_gmt":"2024-03-15T20:19:12","slug":"global-loader-contest","status":"publish","type":"page","link":"https:\/\/remenezes.com.br\/en\/global-loader-contest\/","title":{"rendered":"Global Loader Contest"},"content":{"rendered":"<h1>\n\t\tSantander's global loader contest\n\t<\/h1>\n\t<p class=\" translation-block\"><strong>Banco Santander's brand and global UX teams set a challenge<\/strong> and invited professionals from all the group's countries to create new loaders to be used in the digital journeys (app and web).<\/p>\n<p>Entre as propostas apresentadas, <strong>eu tive a alegria de ser a vencedora \ud83d\ude0a.<\/strong> A seguir, voc\u00ea pode conferir o <strong>v\u00eddeo que usei na apresenta\u00e7\u00e3o, e em seguida as explica\u00e7\u00f5es mais detalhadas.<\/strong><\/p>\n\t<iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/919389324?h=5aaddc396b&#038;title=0&#038;byline=0&#038;portrait=0\" width=\"1920\" height=\"1080\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen><\/iframe>\n<h2>\n\t\tUm loader prim\u00e1rio com diferentes possibilidades\n\t<\/h2>\n\t<p>O <em>big page loader<\/em>, que \u00e9 o <strong>loader principal<\/strong>, tamb\u00e9m chamado de loader de p\u00e1gina, foi pensado para ser como um Lego, com <strong>partes que podem ser utilizadas para mont\u00e1-lo da melhor maneira, de acordo com a necessidade<\/strong>. Essa caracter\u00edstica se mostrou muito importante, j\u00e1 que <strong>isso proporcionou escala ao componente<\/strong>, o que \u00e9 imprescind\u00edvel para a utiliza\u00e7\u00e3o por diferentes times de <strong>diferentes pa\u00edses, com diferentes produtos e demandas. <\/strong>As pe\u00e7as para construi d\u00e3o ao designer a possibilidade de avaliar a melhor op\u00e7\u00e3o para sua necessidade.<\/p>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/remenezes.com.br\/wp-content\/uploads\/2024\/03\/PartesLoader.png\" alt=\"PartesLoader\" itemprop=\"image\" height=\"600\" width=\"1332\" title=\"PartesLoader\" onerror=\"this.style.display='none'\"  \/>\n\t<p>Nessa imagem, est\u00e3o todos os elementos que podem fazer parte do big page loader.<\/p>\n\t<meta itemprop=\"url\" content=\"https:\/\/remenezes.com.br\/novo2024\/wp-content\/uploads\/2024\/03\/BigPageLoader-Progress-Building.mp4\" \/><div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-143-1\" width=\"640\" height=\"360\" loop autoplay preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/remenezes.com.br\/novo2024\/wp-content\/uploads\/2024\/03\/BigPageLoader-Progress-Building.mp4?_=1\" \/><a href=\"https:\/\/remenezes.com.br\/novo2024\/wp-content\/uploads\/2024\/03\/BigPageLoader-Progress-Building.mp4\">https:\/\/remenezes.com.br\/novo2024\/wp-content\/uploads\/2024\/03\/BigPageLoader-Progress-Building.mp4<\/a><\/video><\/div>\n\t<p>No v\u00eddeo acima, \u00e9 mostrada a constru\u00e7\u00e3o e desconstru\u00e7\u00e3o do loader com os elementos.<\/p>\n\t<hr \/>\n<h3>\n\t\tUma cole\u00e7\u00e3o de loaders\n\t<\/h3>\n\t<p>A proposta \u00e9 ter liberdade para personalizar o loader, uma vez que siga as regras e a estrutura b\u00e1sica pr\u00e9-definida.<\/p>\n<p>O uso de \u00edcones animados personalizados tr\u00e1s emo\u00e7\u00e3o, proximidade com o usu\u00e1rio e personaliza\u00e7\u00e3o para o produto.<\/p>\n\t<meta itemprop=\"url\" content=\"https:\/\/remenezes.com.br\/novo2024\/wp-content\/uploads\/2024\/03\/BigPage-MainLoader-PleaseWait.mp4\" \/><div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-143-2\" width=\"640\" height=\"360\" loop autoplay preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/remenezes.com.br\/novo2024\/wp-content\/uploads\/2024\/03\/BigPage-MainLoader-PleaseWait.mp4?_=2\" \/><a href=\"https:\/\/remenezes.com.br\/novo2024\/wp-content\/uploads\/2024\/03\/BigPage-MainLoader-PleaseWait.mp4\">https:\/\/remenezes.com.br\/novo2024\/wp-content\/uploads\/2024\/03\/BigPage-MainLoader-PleaseWait.mp4<\/a><\/video><\/div>\n\t<p>Loader principal<\/p>\n\t<meta itemprop=\"url\" content=\"https:\/\/remenezes.com.br\/novo2024\/wp-content\/uploads\/2024\/03\/BigPage-TravelLoader-PleaseWait.mp4\" \/><div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-143-3\" width=\"640\" height=\"360\" loop autoplay preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/remenezes.com.br\/novo2024\/wp-content\/uploads\/2024\/03\/BigPage-TravelLoader-PleaseWait.mp4?_=3\" \/><a href=\"https:\/\/remenezes.com.br\/novo2024\/wp-content\/uploads\/2024\/03\/BigPage-TravelLoader-PleaseWait.mp4\">https:\/\/remenezes.com.br\/novo2024\/wp-content\/uploads\/2024\/03\/BigPage-TravelLoader-PleaseWait.mp4<\/a><\/video><\/div>\n\t<p>Loader do Santander Universidades<\/p>\n\t<meta itemprop=\"url\" content=\"https:\/\/remenezes.com.br\/novo2024\/wp-content\/uploads\/2024\/03\/BigPage-UniversitiesLoader-PleaseWait.mp4\" \/><div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-143-4\" width=\"640\" height=\"360\" loop autoplay preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/remenezes.com.br\/novo2024\/wp-content\/uploads\/2024\/03\/BigPage-UniversitiesLoader-PleaseWait.mp4?_=4\" \/><a href=\"https:\/\/remenezes.com.br\/novo2024\/wp-content\/uploads\/2024\/03\/BigPage-UniversitiesLoader-PleaseWait.mp4\">https:\/\/remenezes.com.br\/novo2024\/wp-content\/uploads\/2024\/03\/BigPage-UniversitiesLoader-PleaseWait.mp4<\/a><\/video><\/div>\n\t<p>Loader para produtos de viagem<\/p>\n<h2>\n\t\tO loader secund\u00e1rio que mant\u00e9m a conex\u00e3o com a marca\n\t<\/h2>\n\t<p>A maioria dos <em>small loaders<\/em>, tamb\u00e9m conhecidos como loaders secund\u00e1rios, s\u00e3o um spinner tradicional, mas no caso deste ele <strong>inicia como uma parte do <em>big loader<\/em><\/strong>. Essa caracter\u00edstica, al\u00e9m de refor\u00e7ar a marca e manter uma conex\u00e3o entre os dois, tamb\u00e9m tr\u00e1s uma <strong>solu\u00e7\u00e3o \u00fanica<\/strong>.<\/p>\n<p>Al\u00e9m disso, esse mesmo elemento pode ser <strong>utilizado juntamente com \u00edcones de positivo ou negativo<\/strong> para assim comp\u00f4r o <strong>bot\u00e3o de <em>feedback<\/em><\/strong>.<\/p>\n<p>&nbsp;<\/p>\n\t<meta itemprop=\"url\" content=\"https:\/\/remenezes.com.br\/wp-content\/uploads\/2024\/03\/LoaderContext-frame.mp4\" \/><div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-143-5\" width=\"640\" height=\"360\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/remenezes.com.br\/wp-content\/uploads\/2024\/03\/LoaderContext-frame.mp4?_=5\" \/><a href=\"https:\/\/remenezes.com.br\/wp-content\/uploads\/2024\/03\/LoaderContext-frame.mp4\">https:\/\/remenezes.com.br\/wp-content\/uploads\/2024\/03\/LoaderContext-frame.mp4<\/a><\/video><\/div>\n\t<p>V\u00eddeo ilustrando a cria\u00e7\u00e3o do loader secund\u00e1rio.<\/p>\n<h2>\n\t\tAcessibilidade no loader\n\t<\/h2>\n\t<p>Antes de surgir a possibilidade de propor um novo <em>loader<\/em>, eu participei de testes de usabilidade nos quais foi identificado que o <strong><em>loader<\/em> antigo n\u00e3o tinha acessibilidade para pessoas com defici\u00eancia visual<\/strong>. E, quando esse desafio para o <strong>novo <em>loader<\/em><\/strong> surgiu, eu tive <strong>desde a cria\u00e7\u00e3o at\u00e9 o desenvolvimento a inten\u00e7\u00e3o de faz\u00ea-lo acess\u00edvel<\/strong>.<\/p>\n\t<meta itemprop=\"url\" content=\"https:\/\/remenezes.com.br\/wp-content\/uploads\/2024\/03\/LoaderInterface-TesteLeitorDeTela.mp4\" \/><div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-143-6\" width=\"640\" height=\"360\" loop preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/remenezes.com.br\/wp-content\/uploads\/2024\/03\/LoaderInterface-TesteLeitorDeTela.mp4?_=6\" \/><a href=\"https:\/\/remenezes.com.br\/wp-content\/uploads\/2024\/03\/LoaderInterface-TesteLeitorDeTela.mp4\">https:\/\/remenezes.com.br\/wp-content\/uploads\/2024\/03\/LoaderInterface-TesteLeitorDeTela.mp4<\/a><\/video><\/div>\n\t<p>Com isso em mente, em parceria com o desenvolvedor do componente, chegou-se a uma solu\u00e7\u00e3o que suprisse da melhor maneira as necessidades das pessoas com defici\u00eancia visual: <strong>o leitor de telas l\u00ea os textos que est\u00e3o sendo exibidos, e, ao final do carregamento da p\u00e1gina, al\u00e9m do sinal sonoro tamb\u00e9m tem o \u00e1udio &#8220;carregado&#8221; para dar seguran\u00e7a ao usu\u00e1rio de que ele pode prosseguir.<\/strong><\/p>\n<p>Apesar da acessibilidade visual ser sempre a mais notada quando se fala deste projeto, existem<strong> outros cuidados que foram pensados durante a cria\u00e7\u00e3o do componente para que ele pudesse ser acess\u00edvel para a maior parte das pessoas<\/strong>. Entre eles: <strong>contraste das cores<\/strong>, <strong>tamanho de fonte<\/strong>, <strong>linguagem simples<\/strong>, e tamb\u00e9m a possibilidade de um <strong>elemento est\u00e1tico ser exibido no lugar do elemento animado para quando a prefer\u00eancia de redu\u00e7\u00e3o de movimento estiver habilitada no navegador do usu\u00e1rio<\/strong>.<\/p>\n<h2>\n\t\tDetalhe dos loaders aplicados\n\t<\/h2>\n\t<p>No v\u00eddeo a seguir, voc\u00ea pode ver o recorte da parte da apresenta\u00e7\u00e3o em que mostra os <strong><em>loaders<\/em> aplicados nas jornadas do usu\u00e1rio<\/strong>.<\/p>\n\t<meta itemprop=\"url\" content=\"https:\/\/remenezes.com.br\/wp-content\/uploads\/2024\/03\/LoaderContest-loadersAplicados.mp4\" \/><div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-143-7\" width=\"640\" height=\"360\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/remenezes.com.br\/wp-content\/uploads\/2024\/03\/LoaderContest-loadersAplicados.mp4?_=7\" \/><a href=\"https:\/\/remenezes.com.br\/wp-content\/uploads\/2024\/03\/LoaderContest-loadersAplicados.mp4\">https:\/\/remenezes.com.br\/wp-content\/uploads\/2024\/03\/LoaderContest-loadersAplicados.mp4<\/a><\/video><\/div>\n<h2>\n\t\tLike it? Check out other projects:\n\t<\/h2>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/remenezes.com.br\/novo2024\/wp-content\/uploads\/2024\/03\/ImgHome-EQC.png\" alt=\"_ImgHome-EQC\" itemprop=\"image\" height=\"871\" width=\"826\" title=\"_ImgHome-EQC\" onerror=\"this.style.display='none'\"  \/>\n<h3>\n\t\tQuati Curioso Expedition\n\t<\/h3>\n\t<p class=\" translation-block\"><strong>A gamified digital educational platform<\/strong> for use in the classroom in the early years of elementary school. As <strong>coordinator<\/strong>, my responsibility was to work with the team to find <strong>the best experience and interface<\/strong>, with the main goal of having <strong>educational content accessible to as many people as possible<\/strong>.<\/p>\n\t\t\t<a href=\"https:\/\/remenezes.com.br\/en\/novo2024\/expedicao-quati-curioso\/\" target=\"_self\" rel=\"noopener\">\n\t\t\t\t\t\t\t<strong>Read more about Quati Curioso<\/strong>\n\t\t\t\t\t<\/a>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/remenezes.com.br\/novo2024\/wp-content\/uploads\/2024\/03\/MatrioscaBrasil.png\" alt=\"Ilustra\u00e7\u00e3o por Nacho Garc\u00eda Guti\u00e9rrez.\" itemprop=\"image\" height=\"1080\" width=\"1480\" title=\"MatrioscaBrasil\" onerror=\"this.style.display='none'\"  \/>\n<h3>\n\t\tFlame Design System\n\t<\/h3>\n\t<p class=\" translation-block\">Idealization and construction of Santander Brasil's Design System, focusing on the <strong>definition, production and documentation of elements that relate to user interactions and component motions<\/strong>.<\/p>\n\t\t\t<a href=\"https:\/\/remenezes.com.br\/en\/novo2024\/flame-design-system\/\" target=\"_self\" rel=\"noopener\">\n\t\t\t\t\t\t\t<strong>Check out my role in Flame<\/strong>\n\t\t\t\t\t<\/a>","protected":false},"excerpt":{"rendered":"<div class=\"entry-summary\">\n<div class=\"entry-summary\">\nDesafio loader global do Santander Os times de marca e UX global do Banco Santander fizeram um desafio, e convidaram os profissionais de todos os pa\u00edses do grupo\u00a0 para a cria\u00e7\u00e3o de novos loaders que seriam usados nas jornadas digitais&hellip;\n<\/div>\n<div class=\"link-more\"><a href=\"https:\/\/remenezes.com.br\/en\/global-loader-contest\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &ldquo;Global Loader Contest&rdquo;<\/span>&hellip;<\/a><\/div>\n<\/div>\n<div class=\"link-more\"><a href=\"https:\/\/remenezes.com.br\/en\/global-loader-contest\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &ldquo;Global Loader Contest&rdquo;<\/span>&hellip;<\/a><\/div>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-143","page","type-page","status-publish","hentry","entry"],"acf":[],"_links":{"self":[{"href":"https:\/\/remenezes.com.br\/en\/wp-json\/wp\/v2\/pages\/143","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/remenezes.com.br\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/remenezes.com.br\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/remenezes.com.br\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/remenezes.com.br\/en\/wp-json\/wp\/v2\/comments?post=143"}],"version-history":[{"count":1,"href":"https:\/\/remenezes.com.br\/en\/wp-json\/wp\/v2\/pages\/143\/revisions"}],"predecessor-version":[{"id":327,"href":"https:\/\/remenezes.com.br\/en\/wp-json\/wp\/v2\/pages\/143\/revisions\/327"}],"wp:attachment":[{"href":"https:\/\/remenezes.com.br\/en\/wp-json\/wp\/v2\/media?parent=143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}