\u00c9 fato que a percep\u00e7\u00e3o visual \u00e9 mais r\u00e1pida que a interpreta\u00e7\u00e3o textual, e quando impulsionada por fatores emocionais com o tom de voz certo, se torna um recurso eficaz para a estrat\u00e9gia de branding. Simplifica e acelera a intera\u00e7\u00e3o com um produto. Todavia, este elemento deveria ser \u00fanico, reconhec\u00edvel e com car\u00e1ter. Ent\u00e3o nada melhor que um mascote.<\/p>\n
Os mascotes podem ser aplicados tanto no meio gr\u00e1fico, digital e em produtos f\u00edsicos. Esta diversidade de uso \u00e9 uma forma de comunica\u00e7\u00e3o eficiente para representar a identidade da marca. Os mascotes podem expressar quaisquer sentimentos, potencializando la\u00e7os emocionais. Ador\u00e1vamos o trabalho feito com os mascotes da Mailchimp, Duolingo e o singular Octocat do GitHub.<\/p>\n
A voz da Umbler \u00e9 humana, f\u00e1cil e amiga.<\/h2>\n
N\u00e3o consideramos \u201cmuito\u201d a natureza da plataforma para o processo criativo, e sim os nossos valores e tom de voz. Ser no m\u00ednimo simp\u00e1tico, amig\u00e1vel, e condizente com estas premissas:<\/p>\n
- \n
- Emp\u00e1tica: somos a voz de quem j\u00e1 passou por isso.<\/li>\n
- Engra\u00e7ada, mas n\u00e3o engra\u00e7adinha: usar humor \u00e9 \u00f3timo, desde que com bom senso e dentro do contexto.<\/li>\n
- Confiante, mas n\u00e3o arrogante: temos a experi\u00eancia e sabemos sobre o que estamos falando, mas n\u00e3o somos donos da raz\u00e3o.<\/li>\n
- Direta e precisa: passamos nossas ideias com clareza.<\/li>\n<\/ul>\n
Leia mais sobre nossos valores<\/a> e entre para este time de super talentos.<\/p>\n
Do processo de idea\u00e7\u00e3o, \u00e0 escolha do coala.<\/h2>\n
O brainstorming para a gera\u00e7\u00e3o de ideias do mascote foi feita por mim, \u00fanico designer visual da Umbler na \u00e9poca. Minha bagagem visual \u00e9 a de um apaixonado por desenho e quadrinhos por mais de 30 anos. Sempre fui f\u00e3 de animes, da Marvel, DC, Vertigo, Disney Pixar, e da saudosa Manchete, mas confesso que minha maior fonte de inspira\u00e7\u00e3o foi o Studio Ghibli do g\u00eanio Hayao Miyazaki, e sua grande obra prima: Totoro!<\/p>\n
O moodboard foi composto por refer\u00eancias visuais retiradas do Behance, Dribbble e Pinterest. Estava repleto de animais fofinhos, mascotes dos concorrentes e desenhos animados. Hoje o Chapter Design (especialistas com skills de design) mant\u00e9m boards no Pinterest<\/a> para co-cria\u00e7\u00e3o.<\/p>\n
\n![\"Atauan](\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2018\/04\/design-atauan2-1.jpg\")
<\/div>\n\nAtauan Tellier<\/h3>\n
Visual Designer<\/p>\n
Disciplina, folhas em branco, l\u00e1pis, uma cadeira confort\u00e1vel e muito caf\u00e9!<\/h2>\n<\/div>\n<\/div>\n
\u201cUma coisa \u00e9 sua fam\u00edlia ou amigos dizerem que voc\u00ea desenha bem, outra \u00e9 encarar um mercado cada vez mais competitivo e levar a profiss\u00e3o a s\u00e9rio. \u00a0Para ser um bom ilustrador, estude muito, e esteja em constante movimento, sempre se atualizando e buscando adaptar o seu estilo.
\nSou grande f\u00e3 do Studio Ghibli \u00a0e da Disney Pixar, tamb\u00e9m curto muito hiper realismo, principalmente com temas relacionados a fic\u00e7\u00e3o cient\u00edfica, aventura e fantasia. \u00a0O Artstation e o Pinterest s\u00e3o \u00f3timas fontes de inspira\u00e7\u00e3o. Seja um \u00f3timo observador!\u201d<\/p><\/blockquote>\nConfesso que sa\u00edram umas ideias muito loucas, desde um rapaz com capuz de cachorro, at\u00e9 uma geleca transmorfa, mas o que a galera aprovou foi o coala com rabo de metal. Sim, ele tinha um rabo em forma de garra met\u00e1lica, hehe! Ainda bem que tiramos logo.<\/p>\n
![\"Baby](\"https:\/\/media0.giphy.com\/media\/l0EwYIACF9DWEkorS\/giphy.gif\")
<\/a><\/p>\nO marsupial narigudo e gordinho foi desenhado com um estilo flat, e ficou a cara da Umbler.
\n![\"\"](\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2018\/04\/umblerito-original.png\")
<\/a>
\nE deu pra perceber que ele j\u00e1 se fantasiava com nossas influ\u00eancias nerds. Arriscamos sem medo e nunca deu t\u00e3o certo! Simplificamos ao m\u00e1ximo o universo do Umblerito, que \u00e9 composto somente por coalas: clientes, n\u00e3o clientes e nosso time. Ali\u00e1s, todos somos coalas aqui dentro.<\/p>\n\n![\"Adriano](\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2018\/04\/design-adriano-150x150.jpg\")
<\/div>\n\nAdriano Costa<\/h3>\n
Product Designer<\/p>\n
O Umblerito \u00e9 o principal elo emocional entre a Umbler e seu p\u00fablico alvo.<\/h2>\n<\/div>\n<\/div>\n
\u201cEle contribui efetivamente para que possamos alcan\u00e7ar nossos objetivos nos pontos de intera\u00e7\u00e3o com os usu\u00e1rios. Em cada um destes pontos h\u00e1 uma hist\u00f3ria a ser contada, com uma mensagem a ser entregue e o Umblerito consegue, de forma familiar e simp\u00e1tica, inserir o cliente dentro deste contexto.\u201d<\/p><\/blockquote>\n
\n![\"Simone](\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2018\/04\/design-simone-150x150.jpg\")
<\/div>\n\nSimone Vargas<\/h3>\n
Visual Designer<\/p>\n
Ele \u00e9 muito carism\u00e1tico por ser fofo, grande e peludo.<\/h2>\n<\/div>\n<\/div>\n
\u201cO Umblerito acaba agradando nosso p\u00fablico e ajudando no processo de diferencia\u00e7\u00e3o da marca. \u00a0Contribui muito para aumentar a liga\u00e7\u00e3o emocional, fidelidade e o interesse pelo produto.\u201d<\/p><\/blockquote>\n
Foi importante buscar um estilo \u00fanico para as ilustra\u00e7\u00f5es<\/h2>\n
Come\u00e7amos com uma est\u00e9tica visual mais flat, pois era tend\u00eancia de design este minimalismo, com elementos mais simples, sem transi\u00e7\u00f5es de profundidade. Mas logo vimos que precis\u00e1vamos de um estilo diferenciado para posicionar o produto. Est\u00e1vamos buscando uma linguagem visual que adicionasse clareza as id\u00e9ias complexas do storytelling. \u00a0E ter cinquenta tons de cinza n\u00e3o ajudava muito a chamar a aten\u00e7\u00e3o ao elemento certo, e ent\u00e3o partimos para uma padroniza\u00e7\u00e3o da paleta de cor e sua defini\u00e7\u00e3o de uso.
\n![\"\"](\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2018\/04\/palette-umbler.png\")
<\/a>
\nConseguimos um balan\u00e7o de cor harmonioso. \u00a0O Azul real com um tom de violeta passava ao mesmo tempo a sensa\u00e7\u00e3o de tecnologia<\/a> e calma. A paleta de cor das \u00a0ilustra\u00e7\u00f5es ficou mais ampla, mas com a mesma quantidade de tons e sombras para deixar a experi\u00eancia consistente. Definimos regras para o uso das cores:<\/p>\n- \n
- Tra\u00e7ado: cinza escuro ou as sombras das cores.<\/li>\n
- Backgrounds: sempre nos tons mais claros.<\/li>\n
- Foreground: as matizes principais.<\/li>\n
- Componentes de interface: paleta reduzida as cores de status (vermelho, amarelo e verde), prim\u00e1ria, cinzas e secund\u00e1ria.<\/li>\n<\/ul>\n
O Umblerito ganhou sua paleta de cor, e um novo tra\u00e7ado com mais personalidade. Assim, mesmo escalando as ilustra\u00e7\u00f5es com v\u00e1rios desenhistas, seria f\u00e1cil de reconhecer o estilo org\u00e2nico da Umbler. Notamos que ficou mais \u00e1gil o processo criativo, desde a idea\u00e7\u00e3o, pois sabemos as regras do jogo (guidelines), at\u00e9 a arte final.
\n![\"\"](\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2018\/04\/umblerito-palette.png\")
<\/a><\/p>\n\n<\/div>\n\nE assim nasce um Umblerito!<\/h2>\n<\/div>\n<\/div>\n
\u201cCome\u00e7amos com o briefing, coletando informa\u00e7\u00f5es que ajudem a transmitir a mensagem correta. Com as ideias definidas, o pr\u00f3ximo passo s\u00e3o os sketches, que fazemos a l\u00e1pis ou digitalmente. Ap\u00f3s o sketch finalizado, a equipe de design converge a ideia. \u00a0Com a aprova\u00e7\u00e3o do time partimos para a finaliza\u00e7\u00e3o da arte, um processo de polimento que consiste em linhas de acabamento, pintura e sombras.\u201d<\/p><\/blockquote>\n
O Umblerito possui algumas restri\u00e7\u00f5es dependendo do meio de comunica\u00e7\u00e3o. Quando a arte \u00e9 para as redes sociais, o limite \u00e9 a imagina\u00e7\u00e3o, contanto que ele n\u00e3o se transforme, mas que se vista. Quando \u00e9 para o nosso blog, sua principal fun\u00e7\u00e3o \u00e9 refor\u00e7ar o conte\u00fado do artigo. E nas interfaces dos sites deve ser aplicado com sabedoria para n\u00e3o sobrecarregar e tirar o foco, pois seu intuito \u00e9 dar clareza ao copy.<\/p>\n
\n<\/div>\n\nAs nossas reuni\u00f5es s\u00e3o co-criativas!<\/h2>\n<\/div>\n<\/div>\n
\u201cPrimeiro conhecemos o problema proposto, discutimos sobre a melhor solu\u00e7\u00e3o e come\u00e7amos uma rodada de brainstorming para encontrar a forma mais criativa, \u00fatil e funcional para a solu\u00e7\u00e3o deste problema. Fazemos muitos rascunhos dos insights. Ter um guideline ajuda muito na hora da cria\u00e7\u00e3o e auxilia nas tomadas de decis\u00f5es.\u201d<\/p><\/blockquote>\n
A casa foi bem organizada para o time crescer<\/h2>\n
O design de intera\u00e7\u00e3o e experi\u00eancia do usu\u00e1rio (UX) est\u00e1 crescendo e se tornando um diferencial competitivo no mercado de tecnologia. O mundo est\u00e1 vendo o valor deste pensamento criativo no processo de desenvolvimento do produto, e abordagens como o Design Thinking, Design Sprint e Lean UX ganharam voz, e na Umbler n\u00e3o poderia ser diferente.<\/p>\n
Muitos processos e guides j\u00e1 est\u00e3o bem definidos para o nosso crescimento futuro. O design na Umbler est\u00e1 em constante evolu\u00e7\u00e3o, e hoje tenho o orgulho de dizer que ele \u00e9 um diferencial do produto. Temos um time muito, mas muito talentoso, criativo e apaixonado pelo que faz. Tenho certeza que estamos no caminho para fornecer uma experi\u00eancia genial ao nosso querido p\u00fablico.<\/p>\n
N\u00e3o esque\u00e7a de<\/span> checar nossos servi\u00e7os no site<\/span><\/a> e<\/span> de se registrar<\/span><\/a>, caso tenha interesse.<\/span><\/p>\n
E apreciem este lindo v\u00eddeo do nascimento de mais um Umblerito! Se curtiu as ilustra\u00e7\u00f5es, tem d\u00favidas, ou gostaria de desenhar um Umblerito tamb\u00e9m, comenta a\u00ed!<\/p>\n