Tiago Fontella
Tiago Fontella, Lead Designer na Umbler @tiagofontella

Inside Umbler #3: Como nasceu o Umblerito e a nossa linguagem visual

Você que gosta de design, e chegou até aqui porque achou bonita e criativa a ilustração acima, vai curtir esta história. Vamos falar um pouco mais sobre a criação do Umblerito, o nosso mascote coala, amado na comunidade tech e adorado nas redes sociais. Bom, mas este longo caminho não foi fácil. Empatia, a voz da marca, o processo de ideação,  estilo e organização fazem parte do processo de criação da linguagem visual da Umbler.

Lembro que logo após a escolha do nome Umbler, e da criação do logo, a nossa maior preocupação quanto ao design foi melhorar a identidade da marca. Torná-la memorável ao ponto que fosse intuitiva a associação visual do produto ao nome.  E para chegar a este resultado, precisávamos de um interlocutor com o usuário, alguém para se identificar com suas necessidades e gerar mais afinidade.

Então percebemos que deveríamos ser mais empáticos.

É fato que a percepção visual é mais rápida que a interpretação textual, e quando impulsionada por fatores emocionais com o tom de voz certo, se torna um recurso eficaz para a estratégia de branding. Simplifica e acelera a interação com um produto. Todavia, este elemento deveria ser único, reconhecível e com caráter. Então nada melhor que um mascote.  

Os mascotes podem ser aplicados tanto no meio gráfico, digital e em produtos físicos. Esta diversidade de uso é uma forma de comunicação eficiente para representar a identidade da marca. Os mascotes podem expressar quaisquer sentimentos, potencializando laços emocionais. Adorávamos o trabalho feito com os mascotes da Mailchimp, Duolingo e o singular Octocat do GitHub.

A voz da Umbler é humana, fácil e amiga.

Não consideramos “muito” a natureza da plataforma para o processo criativo, e sim os nossos valores e tom de voz. Ser no mínimo simpático, amigável, e condizente com estas premissas:  

  • Empática: somos a voz de quem já passou por isso.  
  • Engraçada, mas não engraçadinha: usar humor é ótimo, desde que com bom senso e dentro do contexto.
  • Confiante, mas não arrogante: temos a experiência e sabemos sobre o que estamos falando, mas não somos donos da razão.
  • Direta e precisa: passamos nossas ideias com clareza.

Leia mais sobre nossos valores e entre para este time de super talentos.

Do processo de ideação, à escolha do coala.

O brainstorming para a geração de ideias do mascote foi feita por mim, único designer visual da Umbler na época. Minha bagagem visual é a de um apaixonado por desenho e quadrinhos por mais de 30 anos. Sempre fui fã de animes, da Marvel, DC, Vertigo, Disney Pixar, e da saudosa Manchete, mas confesso que minha maior fonte de inspiração foi o Studio Ghibli do gênio Hayao Miyazaki, e sua grande obra prima: Totoro!

O moodboard foi composto por referências 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ém boards no Pinterest para co-criação.

Atauan Tellier

Atauan Tellier

Visual Designer

Disciplina, folhas em branco, lápis, uma cadeira confortável e muito café!

“Uma coisa é sua família ou amigos dizerem que você desenha bem, outra é encarar um mercado cada vez mais competitivo e levar a profissão a sério.  Para ser um bom ilustrador, estude muito, e esteja em constante movimento, sempre se atualizando e buscando adaptar o seu estilo.

Sou grande fã do Studio Ghibli  e da Disney Pixar, também curto muito hiper realismo, principalmente com temas relacionados a ficção científica, aventura e fantasia.  O Artstation e o Pinterest são ótimas fontes de inspiração. Seja um ótimo observador!”

Confesso que saíram umas ideias muito loucas, desde um rapaz com capuz de cachorro, até 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álica, hehe! Ainda bem que tiramos logo.

Baby Lol GIF by San Diego Zoo - Find & Share on GIPHY

O marsupial narigudo e gordinho foi desenhado com um estilo flat, e ficou a cara da Umbler.

E deu pra perceber que ele já se fantasiava com nossas influências nerds. Arriscamos sem medo e nunca deu tão certo! Simplificamos ao máximo o universo do Umblerito, que é composto somente por coalas: clientes, não clientes e nosso time. Aliás, todos somos coalas aqui dentro.

Adriano Costa

Adriano Costa

Product Designer

O Umblerito é o principal elo emocional entre a Umbler e seu público alvo.

“Ele contribui efetivamente para que possamos alcançar nossos objetivos nos pontos de interação com os usuários. Em cada um destes pontos há uma história a ser contada, com uma mensagem a ser entregue e o Umblerito consegue, de forma familiar e simpática, inserir o cliente dentro deste contexto.”

Simone Vargas

Simone Vargas

Visual Designer

Ele é muito carismático por ser fofo, grande e peludo.

“O Umblerito acaba agradando nosso público e ajudando no processo de diferenciação da marca.  Contribui muito para aumentar a ligação emocional, fidelidade e o interesse pelo produto.”

Foi importante buscar um estilo único para as ilustrações

Começamos com uma estética visual mais flat, pois era tendência de design este minimalismo, com elementos mais simples, sem transições de profundidade. Mas logo vimos que precisávamos de um estilo diferenciado para posicionar o produto. Estávamos buscando uma linguagem visual que adicionasse clareza as idéias complexas do storytelling.  E ter cinquenta tons de cinza não ajudava muito a chamar a atenção ao elemento certo, e então partimos para uma padronização da paleta de cor e sua definição de uso.

Conseguimos um balanço de cor harmonioso.  O Azul real com um tom de violeta passava ao mesmo tempo a sensação de tecnologia e calma. A paleta de cor das  ilustrações ficou mais ampla, mas com a mesma quantidade de tons e sombras para deixar a experiência consistente. Definimos regras para o uso das cores:

  • Traçado: cinza escuro ou as sombras das cores.
  • Backgrounds: sempre nos tons mais claros.
  • Foreground: as matizes principais.
  • Componentes de interface: paleta reduzida as cores de status (vermelho, amarelo e verde), primária, cinzas e secundária.  

O Umblerito ganhou sua paleta de cor, e um novo traçado com mais personalidade. Assim, mesmo escalando as ilustrações com vários desenhistas, seria fácil de reconhecer o estilo orgânico da Umbler. Notamos que ficou mais ágil o processo criativo, desde a ideação, pois sabemos as regras do jogo (guidelines), até a arte final.

Atauan Tellier

E assim nasce um Umblerito!

“Começamos com o briefing, coletando informações que ajudem a transmitir a mensagem correta. Com as ideias definidas, o próximo passo são os sketches, que fazemos a lápis ou digitalmente. Após o sketch finalizado, a equipe de design converge a ideia.  Com a aprovação do time partimos para a finalização da arte, um processo de polimento que consiste em linhas de acabamento, pintura e sombras.”

O Umblerito possui algumas restrições dependendo do meio de comunicação. Quando a arte é para as redes sociais, o limite é a imaginação, contanto que ele não se transforme, mas que se vista. Quando é para o nosso blog, sua principal função é reforçar o conteúdo do artigo. E nas interfaces dos sites deve ser aplicado com sabedoria para não sobrecarregar e tirar o foco, pois seu intuito é dar clareza ao copy.

Simone

As nossas reuniões são co-criativas!

“Primeiro conhecemos o problema proposto, discutimos sobre a melhor solução e começamos uma rodada de brainstorming para encontrar a forma mais criativa, útil e funcional para a solução deste problema. Fazemos muitos rascunhos dos insights. Ter um guideline ajuda muito na hora da criação e auxilia nas tomadas de decisões.”

A casa foi bem organizada para o time crescer

O design de interação e experiência do usuário (UX) está crescendo e se tornando um diferencial competitivo no mercado de tecnologia. O mundo está 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ão poderia ser diferente.

Muitos processos e guides já estão bem definidos para o nosso crescimento futuro. O design na Umbler está em constante evolução, e hoje tenho o orgulho de dizer que ele é 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ência genial ao nosso querido público.

Apreciem este lindo vídeo do nascimento de mais um Umblerito! Se curtiu as ilustrações, tem dúvidas, ou gostaria de desenhar um Umblerito também, comenta aí!

E faça parte do nosso time criativo.

Tiago Fontella
Tiago Fontella, Lead Designer na Umbler @tiagofontella

Crie sua conta na Umbler e ganhe até R$ 25 em créditos para sites e e-mails!

Ganhe até R$ 25 em créditos para sites e e-mails. Cadastre-se na Umbler sem compromisso ;)