Design responsivo: prioridade na hora de construir um site

Sandra Caravana
Copywriter

Com o aumento do acesso à internet através de dispositivos móveis, torna-se imperativo tornar a experiência do utilizador mais dinâmica, fácil e intuitiva. Design responsivo cria layouts para diferentes ecrãs, assegurando estética agradável, interação fácil, leitura excelente e navegação intuitiva.

Sandra Caravana
Copywriter

Com o aumento do acesso à internet através de dispositivos móveis, torna-se imperativo tornar a experiência do utilizador mais dinâmica, fácil e intuitiva. Design responsivo cria layouts para diferentes ecrãs, assegurando estética agradável, interação fácil, leitura excelente e navegação intuitiva.

Design responsivo é a capacidade desenvolver páginas web cujos elementos se ajustam automaticamente e de maneira impecável a diversas dimensões do ecrã, garantindo constantemente uma estética agradável, uma interação descomplicada, uma leitura clara e uma navegação natural.
Trocando por miúdos: se o seu site não estiver adaptado para mobile, o utilizador irá desistir da visita, compra ou interação.

No último trimestre de 2023, os dispositivos móveis (excluindo tablets) representaram 58,6% do tráfego global de sites. Desde 2017, telemóveis e smartphones mantêm uma presença constante acima de 50%, ultrapassando essa marca em 2020, segundo dados disponíveis.

O conceito de web design responsivo – RWD

Tim Berners Lee foi o responsável pela criação da World Wide Web em 1989. O Web Design Responsivo, introduzido por Ethan Marcotte em 2010, surgiu para responder às exigências das novas tecnologias do século XXI, como smartphones e tablets, adaptando o conteúdo para o utilizador, estando assim na mesma linha de pensamento (e trabalho) que o conceito de UX: a ótica do utilizador.

Em tempos passados, ao criar um site, a escolha era entre um design líquido, que se ajustava à janela do navegador, ou um design de largura fixa, com dimensões específicas em pixels.

O design líquido causava compressão em telas menores e linhas excessivamente longas em telas maiores. Enquanto isso, o design de largura fixa gerava barras de scroll horizontal em telas estreitas e espaços em branco nas bordas em telas mais amplas.

Não é preciso ter formação superior em design para perceber quando um site não é responsivo: de certo, já se cruzou com algum site que ao ser visualizado no seu smartphone, tem de rolar para os lados para conseguir ler a frase completa.

Design responsivo em 3 técnicas

O design responsivo não é uma tecnologia separada, mas uma abordagem ao web design usando práticas como:

  1. Grids fluidas: um sistema de layout que utiliza unidades percentuais para definir a largura das colunas e linhas da grid.
  2. Imagens fluidas: configurando a propriedade max-width como 100%, permite que as imagens se reduzam para se ajustar a uma coluna mais estreita, mantendo seu tamanho intrínseco, sem aumentar.
  3. Media Queries: em vez de ter um único layout para todos os tamanhos de ecrã, é possível alterá-lo. Por exemplo, as barras laterais podem ser reposicionadas em telas menores, ou uma navegação alternativa pode ser exibida, proporcionando uma adaptação flexível às diferentes condições de visualização.

Design Responsivo VS Design Adaptativo

Convém esclarecer a diferença de conceitos antes de passar para as razões e benefícios que o design responsivo pode trazer ao seu negócio ou ao seu trabalho em marketing digital, para que fique claro que este trabalho de web design e programação é muito mais que adaptar o site aos tamanhos do ecrã.

A diferença entre o design responsivo e adaptativo reside no facto de que o design responsivo ajusta a renderização de uma única versão de página, enquanto o design adaptativo oferece múltiplas versões completamente distintas da mesma página.

Design responsivo para Marketing

A responsividade é a keyword principal para estratégias de envolvimento – engajamento.
Ser responsivo já não é mais conseguir responder ao e-mail do cliente em menos de 24 horas. Passa agora pelo cliente conseguir a sua resposta enquanto visita o website do seu negócio.

Investir num design responsivo, investir em recursos humanos sensíveis a esta temática, vai resultar em conversões mais rápidas. Trará impacto em 3 vertentes: técnico, na experiência e nos objetivos.

Técnico: elimina a necessidade de criar layouts específicos para cada tipo de computador, smartphone ou tablet.

Experiência: UX/UI Designer (User experience e user interface designer) procura melhorar a experiência do utilizador em cada aspecto. O design responsivo assegura consistência e evita frustrações.

Objetivos: Além de evitar problemas como botões ausentes em layouts quebrados, ele reforça o conceito fundamental de equilíbrio entre forma e função, assegurando o sucesso da experiência do utilizador em diferentes dispositivos.

Sites responsivos evitam:

  • necessidade de fazer zoom para ler textos em dispositivos móveis;
  • sobreposição desordenada de elementos em telas menores;
  • ocultação de botões e CTA’s em diferentes resoluções;
  • perda de informações importantes em telas menores;
  • desajuste de formulários e campos de preenchimento;
  • criação de barras de scroll desnecessárias em dispositivos menores.

Fonte: Estúdio Criarte

Design responsivo e SEO

Partindo dos recentes dados que mostram o aumento do tráfego móvel para o seu site, torna-se evidente que mesmo que decida começar um site pela versão desktop, terá de investir numa versão mobile-friendly e mais tarde – mas não muito tarde – numa versão mobile first.

Desde 2018, com a adoção do princípio mobile-first pelo Google, a velocidade de carregamento de páginas tornou-se crucial para o SEO. O design responsivo condensa páginas para carregamento mais rápido, especialmente em ecrãs menores, evitando a frustração do utilizador.

Agências de SEO recomendam o design responsivo para reduzir a taxa de rejeição e melhorar a classificação nos mecanismos de procura: o design responsivo facilita a entrega de conteúdo de forma organizada e clara.

A capacidade de visualizar e navegar facilmente pelo conteúdo em qualquer dispositivo é essencial para criar boas primeiras impressões.

Com o aumento no volume de acessos à internet via dispositivos mobile, o número de compras online feitas através desses dispositivos também segue a mesma tendência de crescimento.
Um site responsivo cria mais interação, proporcionando um word-of-mouth digital, que é como quem diz, mais partilhas nas redes sociais.

Design responsivo e Copywriting

Se as imagens têm de ser optimizadas, as palavras também.

Labels e placeholders são decisões pensadas e usadas com estratégia.

Os labels indicam aos utilizadores que informações devem constar de um determinado campo de formulário e estão normalmente posicionadas fora dele. O placeholder, localizado dentro de um campo de formulário, é uma sugestão, descrição ou exemplo das informações necessárias para determinado campo. Ditam as boas práticas de UX que o placeholder desapareça quando o utilizador escreve no campo.

A decisão de escrever ou não um placeholder vai também depender da persona do seu negócio: qual o nível de literacia digital da sua persona?

Boas práticas atuais sugerem o desaparecimento do placeholder por uma label mais explicativa.

Benefícios do design responsivo

  1. Um site responsivo proporcionando fácil acesso em qualquer dispositivo, sem necessidade de zoom ou scroll horizontal.
  2. O Google recomenda sites responsivos, pois um único site com o mesmo URL facilita o rastreamento e a indexação.
  3. Utilizadores encontram facilmente o que procuram, aumentando o envolvimento e potencialmente gerando mais vendas ou leads.
  4. Gerir um único site responsivo economiza tempo e recursos
  5. Um site responsivo transmite uma imagem mais profissional e atualizada da marca.
  6. O design responsivo facilita a implementação de estratégias de marketing, permitindo análise detalhada do comportamento do utilizador em diversos dispositivos, aprimorando a estratégia global de marketing.

Um guia extenso de como usar tipografia

Gabriela Polidoro Lima
UX Designer & Content Writer

A tipografia está em tudo o que lemos e muitas vezes nem nos apercebemos do impacto que as letras, palavras e frases nos causam. Está aí a importância da tipografia que, além de nos permitir ler e receber mensagens através do desenho das letras, pode transmitir-nos outros significados e emoções.

Gabriela Polidoro Lima
UX Designer & Content Writer

A tipografia está em tudo o que lemos e muitas vezes nem nos apercebemos do impacto que as letras, palavras e frases nos causam. Está aí a importância da tipografia que, além de nos permitir ler e receber mensagens através do desenho das letras, pode transmitir-nos outros significados e emoções.

Conceito

A Tipografia é o estudo das palavras quando se trata do seu visual, seja do desenho – formatos e estilos – da aplicação e até da disposição. Esse estudo é uma das ferramentas mais importantes dos profissionais das áreas de Design, Comunicação, Publicidade e Marketing, pois é essencial para a construção de marcas e transmitir diversas mensagens.

História

O processo de impressão tipográfico tem a sua origem no início do século XV, pelo alemão Gutenberg, que criou a técnica dos moldes móveis que eram, nada mais, que moldes das letras do alfabeto feitos em ferro. A sua invenção impulsionou a imprensa que rapidamente difundiu-se pela Europa chegando na América Latina em 1539, a começar pelo México. A indústria tipográfica é, historicamente, o ponto de partida do design gráfico e da comunicação impressa.

Fonte: Canva

 

Tipo = fonte ou letra desenhada + Grafia = impressão; antigamente feita através de moldes de ferro que deixavam uma textura no papel
Uma fonte é formada pelo tipo de letra, o seu estilo e tamanho, enquanto os tipos são um conjunto de diferentes fontes.

Tipologia é o estudo dos tipos de letras, que se tornou cada vez mais popular devido ao aumento da diversidade das opções de fonte.

Um conjunto de fontes com mesma característica base, mas com algumas diferenças de espessuras, largura e tamanho, tem nome de Família tipográfica.

O antigo método Tipográfico de utilizar moldes de ferro para gravar o desenho das letras em papel, a tempos foi substituído pelos modernos métodos de impressão mas, atualmente, ainda é possível combinar ambos os processos, para baixas tiragens, a fim de apresentar uma forma visual única e rica, como uma gravura.

Principais tipos de fonte

Na tipografia, os diferentes tipos de fontes se dividem em quatro, de acordo com a sua forma.

Fonte: ml paper

Serif

A fonte serifada é aquela que tem pequenos traços e prolongamentos nas suas extremidades. As fontes serifadas são muito utilizadas para textos mais extensos, como os dos jornais e das revistas. Por ser visualmente mais confortável aos olhos, ela acaba por ser a mais adequada para leituras mais demoradas. Esse tipo de fonte ainda transmite seriedade e respeito e pode remeter ao tradicional.

A fonte Times New Roman é a mais utilizada desse grupo, juntamente com as fontes Courier e Georgia.

Fonte: Pinterest

Sans Serif

A fonte sem serifa é o oposto da Serifada, ou seja, é mais reta, sem prolongamentos. Esse tipo de fonte é ideal para textos mais curtos por serem neutras, simples e contemporâneas. Elas transmitem segurança e alegria e um dos exemplos mais comuns é a Arial.

Fonte: voxel digital

Cursiva ou Script

O tipo Cursiva, Script ou manuscrita, é aquela que simula a escrita feita à mão. Ela pode ser utilizada para escrever em convites ou cartões, pois costumam ser elegantes e expressam sentimento. Além disso, quanto mais curvilíneas forem as suas formas, mais femininas serão. Uma boa dica pode ser combinar uma fonte cursiva com uma sem serifa, criando um contraste. Dois bons exemplos desse tipo de fonte são: Monotype Corsiva e Lucida Handwriting. 

Fonte: Fonts In Use

 

Display ou Decorativa

Por último, as fontes do tipo Display são as mais “artísticas”, que não se podem enquadrar nas classificações anteriores. Elas são utilizadas para efeitos comemorativos, pois remetem à festa e banda desenhada, e podem trazer, além das letras, também símbolos, desenhos e figuras como animais e objetos.

Justamente por essas características, elas não são indicadas para escrever textos longos. Um tipo bastante comum é a Comic Sans.

Fonte: voxel digital

Como escolher a tipografia mais adequada?

Ao criar um material gráfico que vai conter um texto, é importante ter em atenção a escolha do tipo de fonte que será utilizado. Isso porque, conforme já visto, a tipografia transmite outros sentimentos e emoções além da mensagem escrita.

Para escolher, existem dois caminhos: pode-se escolher uma fonte existente, ou pode-se criar uma fonte nova, inédita.

Ao escolher criar uma fonte nova, a vantagem é a possibilidade de se ter algo único, com características específicas, que transmitam os valores de uma marca ou tema, uma mensagem não-verbal. Com as novas tecnologias digitais, sempre em evolução, fica cada vez mais fácil criar sua própria tipografia e desenvolver um alfabeto inteiro para criar layouts completamente alinhados ao interesse e posicionamento da empresa ou marca.

Se escolher por utilizar uma fonte já existente, apesar de não apresentar algo exclusivo, ainda é essencial que a fonte esteja alinhada com a marca, com o PÚBLICO que se quer conversar e com a mensagem que se deseja passar e como se pretende que ela seja recebida. Outro aspeto essencial é a acessibilidade. É importante escolher uma fonte de internet, pois nem todas são utilizáveis nesse formato digital. Caso contrário, poderão ocorrer dificuldades de visualização.

Uma boa fonte é o Google Fonts, site com diversas tipografias para inspiração, além de ser um bom local para verificar a acessibilidade da fonte escolhida. Aquelas que possuem uma família maior serão mais facilmente aplicáveis, independente do tamanho e formato que você precisar.

Fonte: voxel digital

Atenção às questões gráficas:

Para auxiliar na escolha da fonte ideal, que não seja somente bonita, mas também adequada ao seu objetivo, tenha em mente elementos importantes tais como:

Composição, cores e contraste

Para garantir um bom contraste e para orientar o olhar a seguir uma ordem de leitura específica, e transmitir a sua mensagem da melhor forma possível. Use contrastes como diferentes tamanhos, tipos de fonte e versões da mesma fonte, como negrito e itálico.

Tamanho

O tamanho da fonte é essencial para uma boa visualização e leitura, seja pelo tipo de público ou dispositivo utilizado.

Composição gráfica

A forma como o conteúdo será composto impactará diretamente na sua legibilidade e leiturabilidade.

Legibilidade: é a facilidade com que uma letra pode ser diferenciada da outra. Para isso, é importante considerar contrastes de cor, escolha do tipo de fonte (serifa, sem serifa, etc) e ter atenção com os espaçamentos entre caracteres.

Leiturabilidade: refere-se à facilidade com a qual o olho absorve a mensagem. Está ligada ao espaçamento entrelinhas, entre palavras, uso de caracteres de caixa alta ou caixa baixa e alinhamento.

Ao criar um layout lembre-se:

Hierarquia para guiar os olhos do utilizador

Ao fazer o layout, é preciso considerar a hierarquia das informações, de acordo com a intenção, ou seja, considerar que partes do texto são mais importantes, e são essas as que devem chamar mais a atenção do leitor. É necessário, então, trabalhar o layout de forma a direcionar os olhos do utilizador exatamente para a parte do texto mais relevante. Pode ser um título, um depoimento ou uma citação.

Alinhamento para organizar o conteúdo

Para criar uma estrutura textual visualmente clara e fácil de ler, pode-se organizar as linhas do texto de 4 maneiras:

  • Justificado – Todas as linhas começam e terminam alinhadas, em blocos, tanto à direita quanto à esquerda. Essa forma de alinhamento requer um cuidado, pois pode acabar por forçar um maior espaçamento entre as palavras.
  • Alinhado à Esquerda – Todas as linhas iniciam no mesmo ponto, independente do seu comprimento.
  • Alinhado à Direita – Mesmo caso do formato anterior, mas com as linhas que iniciam do outro lado. Indicado para materiais que apresentem uma disposição ou formato diferenciado, deixando leitura mais natural. Para materiais com grande conteúdo, como livros, não se recomenda.
  • Centralizado – Quando o alinhamento se dá pelo centro das linhas e as pontas ficam irregulares. É bastante utilizado em revistas para destacar citações no meio de uma entrevista, por exemplo.

Espaçamentos – para dar legibilidade

É o espaço dado entre as linhas que impacta, e muito, na leitura do texto. Pouco espaço ou em demasiado faz com que os olhos de quem lê não encontre o conteúdo com facilidade e dificulte a sua absorção.

Tipografia também é estratégia

Como vimos, o estudo da tipografia é um elemento essencial do design, e tem grande impacto na construção e comunicação de uma marca.

Está diretamente vinculado ao público-alvo e, claro, à estratégia de branding.

Criar uma hierarquia, ajuda o leitor a percorrer o conteúdo da maneira desejada, e assim, transmitir a mensagem principal. Ao utilizar algumas técnicas simples é possível direcionar a atenção do utilizador para onde se quer – e essa é uma estratégia que merece ser explorada!

Assim, fica mais fácil escolher a tipografia adequada para transmitir a mensagem correta para o público certo.

Design para email marketing: como criar mensagens impactantes e eficazes

Gabriela Polidoro Lima
UX Designer & Content Writer

Quando se trata de chamar a atenção do cliente para o seu produto ou marca através de estratégicas de marketing de comunicação, uma das formas possíveis é o envio de emails.

Com a rápida evolução do Marketing Digital e das suas estratégias, é essencial estar atento às tendências e ter em mente as melhores práticas para destacar-se no meio do mar de informações que os utilizadores recebem diariamente.

Gabriela Polidoro Lima
UX Designer & Content Writer

Quando se trata de chamar a atenção do cliente para o seu produto ou marca através de estratégicas de marketing de comunicação, uma das formas possíveis é o envio de emails.

Com a rápida evolução do Marketing Digital e das suas estratégias, é essencial estar atento às tendências e ter em mente as melhores práticas para destacar-se no meio do mar de informações que os utilizadores recebem diariamente.

Boas prática de design para email

1. Remetente

Muitas vezes ignorado, o nome do remetente é um elemento crítico de qualquer email pois agrega credibilidade e deixa o leitor curioso.
Dica: mantenha-o pessoal, relevante e curto.

2. Assunto

As pessoas leem os assuntos para filtrar emails irrelevantes, por isso, um assunto bem escrito é uma maneira infalível de se destacar.

Dicas:

  • Mantenha-o curto – até 41 caracteres / 7 palavras;
  • Torne-o atraente – desperte curiosidade;
  • Seja transparente – o assunto deve ser fiel ao conteúdo para estabelecer confiança;
  • Divirta – o uso de emojis pode destacar e aumentar a taxa de abertura.
Fonte: unlayer

3. Pré-cabeçalho

O pré-cabeçalho ou texto de visualização introduz o assunto e deve transmitir a proposta de valor para convencer o utilizador a abri-lo.

Dicas:

  • Use entre 30 e 70 caracteres;
  • Não repita a linha de assunto, mas torne-a relevante;
  • Agregue valor, interesse ou contexto;
  • Ajuste o comprimento para dispositivos móveis.

4. Cabeçalho

O cabeçalho de um email é a primeira coisa que é vista quando aberto, por isso, deve ser atraente, relevante e gerar curiosidade.

Dica: combine texto com imagem.

Fonte: unlayer

5. Conteúdo

Dicas importantes ao escrever no corpo do email:

  • Não exceda 200 palavras;
  • Tenha cuidado com o uso de expressões ou calão;
  • Escolha o máximo de duas fontes, legíveis, sem serifa e entre 14 e 16pt.

6. Imagens

Imagens são sempre uma boa ferramenta para deixar o visual mais atrativo.

Dicas:

  • Até 1MB de tamanho para um carregamento mais rápido;
  • Alta resolução para maior impacto;
  • Formato PNG;
  • Prefira imagens exclusivas às de bancos de imagens;
  • O texto sobre a imagem deve ter boa leitura;
  • Inclua texto alternativo para o caso das imagens não carregarem ou serem desativadas.

7. Cores

O uso de uma paleta de cores agradável auxilia na leitura e compreensão. Defina uma paleta de no máximo 3 cores e utilize-a para criar secções ou destacar algo importante. Lembre-se de manter bom contraste entre texto e fundo para garantir a leitura.

Fonte: unlayer

8. Call to Action

O uso de Call to Action (CTA) é extremamente importante para campanhas de email.

Dicas:

  • Texto curto, significativo e orientado para a ação;
  • Posicione-o na parte superior do email, alinhado ao assunto;
  • Use tamanho e cor apropriados;
  • Máximo de 2 botões por email.
Fonte: unlayer

9. Rodapé

Essa parte do email também é muito relevante pois é onde os leitores costumam procurar informações como contactos, perfis de redes sociais e link para cancelar a subscrição.

Dicas de conteúdo extra:

  • Proposta única de venda ou código de desconto;
  • Missão e valores fundamentais da marca;
  • Localização da loja.

10. Personalização

Misturar tags

Esta ferramenta permite reconhecer o leitor com o seu primeiro ou segundo nome, usuário ou alcunha. Com isso, o leitor sente como se estivesse a ter uma conversa com a marca.

Conteúdo Dinâmico

Outra técnica utilizada para gerar proximidade através da personalização de conteúdo. Um exemplo comum é a exibição de produtos específicos para género ou idade.

11. Disposição

Proporção texto-imagem

O recomendado é seguir a regra 60% texto e 40% imagens para evitar a caixa de Spam.

Equilíbrio de branco

Ter uma quantidade adequada de espaço em branco reduz a fadiga ocular, melhora a legibilidade, proporciona uma aparência mais limpa e permite destaque ao que é essencial.

Equilíbrio espacial

Dispor adequadamente os elementos gera um visual mais agradável e uma leitura mais fluida. Os três layouts mais comuns são: coluna única, pirâmide invertida e ziguezague.

Fonte: unlayer

12. Responsividade

Ao considerar que 46% de todos os emails são abertos em telemóveis, é essencial que o conteúdo possa ser perfeitamente lido quando visualizado neste dispositivo.

Dicas:

  • Texto e imagens devem se adaptar ao tamanho do ecrã;
  • Botões CTA devem ser grandes o suficiente para que possam ser clicados com o polegar;
  • O espaço em branco deve estar adequado aos diferentes elementos.

Tendências em 2023

Depois de listar boas práticas na construção de um email, é importante estar atento às tendências de design para transformar uma simples mensagem numa experiência incrível para o utilizador.

1. Gamificação

A gamificação é a prática de integrar elementos de jogos em contextos tradicionalmente não relacionados a isso e transformar a mensagem numa verdadeira experiência de interação.

Dicas:

  • Mantenha a mecânica do jogo simples;
  • Forneça instruções claras para incentivar a participação;
  • Personalize a experiência e adapte o desafio e as recompensas às preferências do utilizador;
  • Inclua um CTA para que fique claro qual a ação que espera ser realizada;
  • Certifique-se de que os elementos sejam intuitivos e não escondam a mensagem principal.
Fonte: duolingo

2. Interatividade

Elementos interativos como questionários ou sondagens que solicitam ação do utilizador podem aumentar significativamente o envolvimento.

O conteúdo dinâmico, com dados e informações baseadas no perfil do destinatário, oferece uma experiência altamente personalizada. Citar a localização, o nome, as compras anteriores ou histórico de navegação, aproxima o cliente e transmite a sensação de exclusividade.

3. Dark mode

O dark mode tem ganhado cada vez mais adesão por parte dos utilizadores e à medida que empresas de email (Gmail, Outlook, Apple Mail, etc.) e dispositivos oferecem essa opção, é essencial garantir que os emails tenham uma ótima aparência nos modos claro ou escuro.
Para isso, é importante escolher muito bem as cores, imagens e texto para garantir uma experiência de leitura confortável independentemente da escolha do utilizador.

Dicas:

  • Fundo transparente para garantir que a imagem se mistura perfeitamente no fundo;
  • Cores de alto contraste para aumentar a legibilidade;
  • Tons mais suaves ao invés de preto ou branco puro para garantir mais conforto visual.
Fonte: litmus

4. Acessibilidade

Criar emails acessíveis a diversos públicos é, além de uma medida ética, estratégica, pois ajuda a alcançar um público mais amplo e promove a inclusão.

Dicas:

  • Email bem estruturado;
  • Tamanhos de fonte maiores e facilmente legíveis;
  • Contraste de cores suficiente para boa visibilidade;
  • Uso inteligente de espaços em branco.
Fonte: mailtrap

5. Esquemas de cores

A simplicidade de uma única cor ou o contraste de duas cores pode destacar qualquer email.

Paleta Monocromática: diferentes tons de uma única cor transmitem harmonia e calma, destacando o conteúdo.

Esquemas daltónicos: o seu contraste cria envolvência e guia o olhar do leitor para o que é mais importante.

6. Animações

O uso de sutis animações em loop pode dar mais vida ao email e torná-lo muito mais interessante.

Dicas:

  • Equilibre o movimento com elementos estáticos para evitar sobrecarregar o utilizador;
  • Forneça texto alternativo para quem não consegue visualizar;
  • Certifique-se de que sejam compatíveis com diferentes dispositivos;
  • Compacte para que sejam rápidos de carregar.

Exemplos de aplicação:

  • Chamar a atenção para uma informação específica;
  • Demonstrar um processo do início ao fim;
  • Destacar um botão CTA.
Fonte: Adobe

7. Ilustrações

Ilustrações personalizadas podem ajudar a criar uma identidade de marca única além de adicionar uma camada de interatividade aos emails, tornando-os marcantes e mais agradáveis de ler.

Dica: crie uma narrativa através de uma série de ilustrações ou animações, em vários emails ou num único para explicar a jornada de um produto, desde a criação até a entrega, por exemplo.

8. Elementos nostálgicos

O tema retro aplicado na tipografia, nas cores e nos elementos pode desencadear memórias positivas e fortalecer a conexão emocional estabelecida entre marca e cliente.

Dica: o design deve se manter limpo, legível e compatível com dispositivos móveis para fornecer uma experiência perfeita.

9. Colagens

Combinar fotos, ilustrações e texturas oferece um visual envolvente, além de criar uma identidade de marca poderosa.

Dicas:

  • Não sobrecarregue o utilizador, mantenha o equilíbrio e foque na mensagem principal;
  • Mantenha os elementos visuais alinhados e com uma narrativa consistente;
  • Tenha uma hierarquia clara com destaque no que é mais importante;
  • Alinhe o visual à identidade da marca, evitando elementos que possam gerar confusão.
Fonte: Canva

10. Elementos 3D

O uso de 3D pode adicionar profundidade e dimensão ao design, tornando o email mais surpreendente.

Dica: adicione interatividade como o paralaxe – quando elementos do fundo e do primeiro plano se movem em velocidades diferentes – e tenha um design ainda mais dinâmico.

Fonte: envato

 

11. Elementos desenhados à mão e orgânicos

Incorporar elementos desenhados à mão como fontes manuscritas, bordas rabiscadas ou formas orgânicas, comunica sutilmente que existem pessoas reais por trás da marca, o que ajuda a construir uma relação mais próxima e de confiança com o público.

Fonte: Rifle Paper Co.

 

O marketing por email é e sempre será parte integrante da estratégia de marketing de qualquer empresa e, por isso, para obter sucesso com essa prática é importante estar atento a todos estes detalhes – desde a sua construção até o seu visual – e também estar sempre atualizado às novas tendências.

Webdesign: tendências de cores para 2023

Tendências de Cores
Gabriela Polidoro Lima
UX Designer & Content Writer

A cada novo ano que se inicia há sempre a expectativa de quais serão os novos conceitos e tendências, seja para a moda, para o design, para a decoração e até no que se trata do comportamento de consumo.

Com o crescimento expressivo do mercado digital, não poderiam faltar as grandes previsões mundiais quando se fala de novidades e inovações para esta área também.

Por isso, para quem trabalha com o universo Web, fique atento às tendências de cores para o ano de 2023.

Gabriela Polidoro Lima
UX Designer & Content Writer

A cada novo ano que se inicia há sempre a expectativa de quais serão os novos conceitos e tendências, seja para a moda, para o design, para a decoração e até no que se trata do comportamento de consumo.

Com o crescimento expressivo do mercado digital, não poderiam faltar as grandes previsões mundiais quando se fala de novidades e inovações para esta área também.

Por isso, para quem trabalha com o universo Web, fique atento às tendências de cores para o ano de 2023.

Tendências de Cores para 2023

Uma vez as tendências eram apenas direcionadas à Moda e eram ditadas por grandes empresas de pesquisa como a WGSN e a Pantone. Das passerelles para as vitrines, depois para as ruas, esses eram os ambientes onde poderia ser confirmada a adesão das tendências ditadas a cada ano. Atualmente, e principalmente após a pandemia do COVID-19, essas tendências tiveram de ser também adaptadas ao universo digital, pois as grandes marcas dos setores do retalho e do calçado precisaram de ampliar a sua atuação para esse novo habitat. O que os consumidores veem nas vitrines e passerelles deve estar coerente com o que eles veem nos websites e e-commerce dessas mesmas marcas, por isso, a escolha do visual e das cores não pode apenas seguir tendências, mas fazer parte de todo um conceito e linguagem visual de cada marca.

Com essa mudança de cenário, é essencial ter em mente a importância e o impacto que as cores têm num projeto digital, seja um site, um blog ou uma aplicação.

A primeira leitura feita pelos utilizadores é feita nos primeiros 90 segundos de exposição e 90% do resultado dessa leitura é impactado pela cor.

Assim, além de saber quais as cores tendência é imprescindível entender como utilizá-las. Vamos a isso?

Qual a cor do ano para 2023 eleita pela Pantone?

A marca PANTONE®, foi criada pela Pantone Inc. sediada nos EUA e considerada a autoridade em cores no mundo por ter criado, em 1967, uma linguagem padrão para a comunicação e gestão de cores, desde o designer até ao consumidor final. A tonalidade Viva-Magenta, é a escolhida como cor do ano para 2023, que traz consigo uma paleta de cores combinante denominada Magentaverse – nome que já deixa claro a influência forte do universo digital. No site oficial da marca, a cor é descrita como corajosa, destemida e pulsante, cuja exuberância promove alegria e uma celebração otimista, escrevendo uma nova narrativa.

Segundo Leatrice Eiseman, Diretora executiva da marca:

“Na era da tecnologia, nós procuramos desenhar inspirados pela natureza e por aquilo que é real. PANTONE 18-1750 Viva Magenta, é inspirado no vermelho da cochonilha, um dos corantes mais preciosos pertencentes à família dos corantes naturais e também um dos mais fortes e brilhantes que o mundo já conheceu. A cor reconecta-nos ao que realmente importa, invocando as forças da natureza e ajudando-nos a construir a nossa força interior.”


A
homepage do site dá as boas-vindas à Viva Magenta, a cor de 2023, e mostra a paleta Magentaverse com os códigos das cores escolhidas pela Pantone.

Fonte: Pantone

Digital Lavender – A Cor Tendência 2023 da WGSN

A autoridade global em previsão de tendências de consumo WGSN, também escolheu uma cor para representar o ano de 2023 e a conexão com a tecnologia já está explícita no nome: Digital Lavender. Fundada em 1998, no oeste de Londres, a empresa desenvolve pesquisas aprofundadas que incluem curadoria de dados, análises globais produzindo matérias e ferramentas necessárias para entender o comportamento do público.

“A Digital Lavender é uma cor género-inclusiva já estabelecida no mercado jovem e espera-se que isso se amplie para todas as categorias de moda em 2023. O aspecto sinestésico desta cor torna-a ideal para rituais de autocuidado, práticas terapêuticas e produtos de bem-estar.” Relata a empresa que desenvolveu a cor através do Coloro, sistema projetado para criação e execução de padrões de cor com total confiança. Além de ditar tendências de moda e comportamentais, a WGSN orienta também o mercado digital e indica a cor “para eletrónica, bem-estar digital, iluminação voltada para a qualidade de vida e artigos para a casa.”


Com o excesso de informações e a digitalização em crescente ascensão, ambas as empresas indicam cores que apontam para um movimento contrário, trazendo estabilidade e equilíbrio. Para elas, as cores tendência de 2023 prometem convergir os mundos físico e virtual, conectando os utilizadores ao bem-estar e trazendo força e saúde mental.

Fonte: WGSN

Outras cores que a WGSN aponta como tendência para 2023

Além da principal, Digital Lavender, a WGSN indica mais 4 cores que representam o novo momento que o mundo irá viver em 2023, depois de 3 anos de imposições e distanciamento: Astro Dust, Galactic Cobalt, Sage Leaf e Apricot Crush. Para ver o vídeo de lançamento das cores e saber mais sobre cada uma delas, basta clicar aqui.

Fonte: WGSN

Antes de escolher as cores, o que se deve ter em consideração?

Falando especificamente sobre o universo digital, ao escolher as cores que serão utilizadas num projeto, é essencial considerar alguns pontos importantes:

Compreensão

De que adianta aplicar as cores mais incríveis de 2023 se o utilizador não consegue entender a mensagem que a marca está a transmitir? Legibilidade, acessibilidade e adaptabilidade são as palavras-chave para ter um bom desempenho digital.

  1. Legibilidade – nível certo de contraste entre fundo e texto;
  2. Acessibilidade – além das cores, é essencial lembrar que há quem não consiga simplesmente ver as cores e, por isso, deve ter acesso à locução;
  3. Adaptabilidade – modo noturno, nível de saturação e luminosidade também influenciam a compreensão e demonstram um cuidado importante com os utilizadores.

Para saber se está no caminho certo, existem diversas ferramentas que permitem testar se as cores que está a utilizar proporcionam uma boa leitura aos utilizadores. Aqui seguem alguns sites:

  • https://abc.useallfive.com/ – testa rapidamente os contrastes. É só inserir os códigos das cores e ele gera os resultados de contraste e sobreposição.
  • https://colorable.jxnblk.com/ ferramenta que pode ser usada para aumentar a legibilidade de textos com cores em alto contraste.
  • https://www.colororacle.org/ – extensão disponível para Mac e Windows que mostra em tempo real o que as pessoas com deficiências visuais verão.

Coerência com a marca

Seguir um guia de estilo de marca é fundamental para ter coerência na comunicação. Por mais que a tendência de cores de 2023 seja o Viva Magenta, não deve simplesmente trocar a cor do seu site ou app por causa disso, sabendo que a sua marca tem a cor verde como principal, por exemplo. Utilizar uma comunicação distinta em diferentes pontos de comunicação pode gerar confusão, frustração e inclusive transmitir instabilidade. Imagine um utilizador questionar-se se está mesmo no site oficial da marca justamente porque, ao entrar, não vê, de imediato, a linguagem visual que está acostumado a ver? A rápida identificação é fundamental para gerar conexão e manter o utilizador ativo e próximo.

Um bom exemplo de comunicação é a mundialmente famosa marca de joias Tiffany & Co que já é extremamente reconhecida pelo uso de um tom de azul muito particular na sua comunicação gráfica, lojas e embalagens. A tonalidade específica utilizada pela marca inclusive já é comumente denominada de Azul Tiffany, ou seja, transformou-se num padrão mundialmente reconhecido.

Significado das cores e as sensações que elas transmitem

As sensações que as cores transmitem são muito discutidas, principalmente no final e início de um novo ano. As cores têm diversos significados e estar atentos á esses significados pode ajudar, e muito, na escolha das cores de um produto digital.

Cores e as sensações conectadas às cores:

  • Rosa: romantismo, inocência e amor.
  • Violeta: espiritualidade, intuição, sabedoria e serenidade.
  • Vermelho: cor alegre de ação, paixão, coragem e autoconfiança.
  • Laranja: alegria, sucesso, simpatia e cooperação.
  • Amarelo: criatividade, boa sorte e comunicação.
  • Verde: energia, esperança, regeneração e natureza.
  • Azul: purificação, harmonia, compreensão e clareza de entendimento.
  • Branco: harmoniza, paz, pureza, positividade.
  • Preto: independência, dignidade e poder de decisão.

Fonte: Tiffany & Co

Como podemos ver nas imagens acima, o site da Tiffany & Co, apesar de ser muito limpo e claro, para evidenciar os produtos que está a vender, traz a cor de forma subtil a fim de manter a coerência visual da sua comunicação.

  • Numa imagem, o ecrã inicial do site oficial da marca, traz uma informação no topo da Homepage com a cor no fundo, destacando a mensagem.
  • Na outra imagem, a sombra produzida pelas joias nas imagens dos destaques, traz a cor quase como uma marca d´água, além de estar na imagem maior, que destaca a caixinha onde a joia é guardada.
  • Noutro screenshot do mesmo site, mesmo utilizando cores de grande contraste no fundo (amarelo e laranja), elas não se sobrepõem, pelo contrário, destacam ainda mais a cor da marca na famosa embalagem com laço branco.

 

Além da Tiffany & Co, outras marcas são extremamente eficazes ao utilizar seu padrão de cores em diferentes pontos de comunicação, destacando-se e cativando os consumidores. A rede de fast-food McDonald´s quase não precisa mais utilizar o logotipo inteiro pois ao combinar as duas cores primárias amarelo e vermelho criou uma identidade reconhecida em qualquer lugar do mundo. Se um dia uma das lojas do McDonald´s mudasse suas cores para verde e branco os consumidores poderiam pensar que estavam a entrar em uma loja da Starbucks, outra marca que também criou sua identidade na combinação de cores sempre em destaque em sua comunicação e produtos.

Para além desses significados e referências já populares, ao criar uma marca ou comunicar alguma mensagem é sempre válido considerar alguns fatores relacionados com as cores e o impacto que elas têm sobre os utilizadores. Diversos estudos já realizados sobre a interferência e importância das cores no universo digital, revela que ela pode melhorar a compreensão de uma mensagem em até 73%, a capacidade de aprender em até 68% e facilitar a leitura até 40%.

Veja alguns exemplos de marcas e o que as cores escolhidas por elas transmitem aos seus utilizadores:

Coca-Colavermelho – transmite alegria, vibração e celebração, conceito principal da marca Apple – branco ou prata – a cor transmite tecnologia, inovação e modernidade

Fedexlaranja – cor que transmite rapidez e cooperação

Facebook – azul – a cor transmite confiança e transparência

Assim, é muito importante considerar o que as cores transmitem ao escolher quais as cores a utilizar no seu logotipo, na base da homepage do seu website, num botão call to action ou no ícone da sua app.

Além do que se quer transmitir através da cor, deve-se sempre ter em mente, os valores da marca e a cultura da empresa, todos esses elementos devem estar em harmonia para que, visualmente, o logotipo e a comunicação reflitam exatamente o que a empresa e a marca querem dizer aos seus clientes e consumidores.

Se está a trabalhar com uma marca que já tem uma cor definida, deve-se ter cuidado ao combiná-la com outras cores, pois elas podem destacar, contrastar ou até sobrepor a cor principal, resultando no oposto ao desejado. Cores contrastantes nem sempre destacam a cor principal, elas podem também ofuscar ou criar confusão mental. Combinar cores vibrantes com outras mais neutras funciona sempre, assim como juntar cores da mesma paleta, escolhendo tons diferentes da mesma cor, uns mais claros e outros mais escuros.

A dica é sempre escolher uma cor principal – ou utilizar a cor da marca – e depois combinar mais 1 até 3 cores extras que irão compor a paleta visual do projeto ou style guide. Essa paleta deve ser aplicada em toda a comunicação, seja ela online ou offline.

Para ajudar na criação de paletas de cores, há disponíveis algumas ferramentas gratuitas como Paleta de Cores , Cohesive Colors e 0 to 255

Além de testar a usabilidade das combinações de cores escolhidas, conforme já mencionado, é sempre válido criar uma imagem visual do produto e testar com os próprios utilizadores para saber a opinião. Nada melhor do que testar na prática a eficiência da paleta de cores escolhida.

Leia também: Como a imagem influencia o sucesso da marca

Design Thinking nos negócios

Pauliny Zito
Planner, copywriter e copydesk

Mais do que uma ferramenta, o Design Thinking é um processo de pensamento crítico e criativo para projetar, planear e desenhar um projeto.

É uma forma de abordagem moderna e inovadora que pode ser utilizada em diversos contextos e em qualquer sector.

Pauliny Zito
Planner, copywriter e copydesk


Mais do que uma ferramenta, o Design Thinking é um processo de pensamento crítico e criativo para projetar, planear e desenhar um projeto.

É uma forma de abordagem moderna e inovadora que pode ser utilizada em diversos contextos e em qualquer sector.

De acordo com a Universidade Nova de Lisboa, o Design Thinking:

  • Centra-se na pessoa – começa com uma profunda empatia e conhecimento das necessidades e motivações das pessoas;
  • É colaborativo – beneficia de diversos pontos de vista e perspetivas e é um processo em que a criatividade de um reforça a criatividade de todos;
  • É otimista – acredita que todos podemos criar mudança – não importa quão grande é o problema, quão curto é o tempo ou quão baixo é o orçamento.

Embora o termo “design thinking” já fosse utilizado desde os anos 1970 nos Estados Unidos como uma abordagem criativa, na ciência, engenharia, arquitetura, educação e pesquisa académica, foi somente em 1991 que Tom e David Kelley e Tim Brown sistematizaram as ideias do Design Thinking na metodologia voltada para a gestão de empresas.

A abordagem só começou a ganhar força fora da comunidade de design após o artigo da Harvard Business Review de 2008 [assinatura necessária] intitulado Design Thinking por Tim Brown, CEO e presidente da empresa de design IDEO.

Fonte: Foto de Alena Darmel

Design Thinking

O Design Thinking é uma metodologia utilizada para criar novos produtos, serviços, processos, ou para resolução de problemas. Entretanto, uma metodologia que valoriza a criatividade, experimentação e empatia para encontrar soluções inovadoras, ágeis, práticas e seguras nos negócios.

O principal diferencial é a multidisciplinaridade, a envolver, portanto, pessoas de diversas áreas da empresa.

Fonte: Foto de Cottonbro

Pilares do Design Thinking

Inspiração

Perceber o problema ou oportunidade, estudo das possibilidades, da concorrência e do comportamento do público-alvo. Pesquisar e juntar materiais para inspirar.

Empatia

Colocar-se no lugar do outro e perceber suas necessidades, tanto do público-alvo quanto do público interno da empresa.

Criatividade

Ter a capacidade de fazer conexões entre os dados e opiniões distintas coletadas a fim de encontrar algo em comum entre eles.

Depois é necessário implementar as ideias para obter feedbacks e aprender com os erros, que são inevitáveis.

Etapas do Design Thinking

Cada empresa possui a sua cultura organizacional e as suas particularidades e, por isso, deve avaliar as melhores ferramentas a serem usadas em cada etapa do Design Thinking e, se necessário, adaptar as etapas à sua realidade, para alcançar o objetivo. São basicamente cinco as etapas do Design Thinking, a saber:

1. Imersão ou Empatia

É a fase do entendimento, em que se discute o problema, define-se o propósito e os limites do projeto, faz-se a análise SWOT (Strenghts, Weaknesses, Opportunities, Threats) ou, em português, FOFA (Forças, Oportunidades, Fraquezas e Ameaças) da empresa, pesquisas exploratórias e de referência. E depois, entrevistas e trabalhos de campo para gerar insights.

2. Definição

É a fase de analisar e organizar o material, identificar padrões e categorizar as ideias, sintetizar. Fazer uma representação gráfica deste material ajuda na visualização do problema. A seguir, filtrar os insights, definir o público-alvo e uma linha de trabalho.

3. Ideação 

É a fase de pensar em uma solução para o problema, tendo em mente que nenhuma solução é ideal. É fundamental usar métodos para explorar ao máximo a criatividade das pessoas envolvidas, incentivando a experimentação e os erros (inevitáveis).

4. Prototipagem

É a fase do protótipo, ou seja, produzir um Produto Mínimo Viável (Minimum Viable Product ou MVP, sigla em inglês). É feita uma versão simples do produto para um período de testes. 

Para criar o MVP, responda a essas três questões:

1) Que solução oferece? Qual é o seu verdadeiro diferencial? 

2) Como funciona essa solução? O que o seu produto/serviço entrega que os outros não entregam?

3) Qual é o resultado esperado para o seu cliente?

5. Implementação

É a fase de implementar a solução. No caso de o produto ser validado, fazer os devidos ajustes e lançar o produto ou serviço no mercado.

Mas atenção, o trabalho não acaba por aqui, tendo em conta que a empresa deve manter um processo de aperfeiçoamento contínuo de cada projeto.

Imagem: Interaction Design Foundation.

Imagem: Interaction Design Foundation.

Estas etapas nem sempre são sequenciais e as equipas muitas vezes executam-nas em paralelo, fora de ordem e repetem-nas de forma iterativa.

Já a MIT Management Sloan School classifica o Design Thinking em quatro etapas:

1. Perceber o problema;
2. Desenvolver possíveis soluções;
3. Prototipar, testar e repetir;
4. Implementar

Fonte: MIT Management Sloan School

Técnicas e ferramentas do Design Thinking

O Design Thinking possui uma série de técnicas e ferramentas colaborativas. Cabe ao gestor identificar aquelas que mais bem funcionam dentro do contexto do projeto e cultura da empresa.

Este artigo lista e descreve 25 técnicas e ferramentas do Design Thinking, que passo a citar em baixo.

Na etapa de Imersão:

1. Reenquadramento

2. Pesquisa Exploratória

3. Pesquisa Desk

4. Entrevistas

5. Cadernos de Sensibilização

6. Sessões Generativas

7. Um dia na vida

8. Sombra

Na etapa de Definição (ou Análise e Síntese):

9. Cartões de Insight

10. Diagrama de Afinidade

11. Mapa Conceitual

12. Critérios Norteadores

13. Personas

14. Mapa da Empatia (conhecimento obtido através de entrevistas com clientes)

15. Jornada do Usuário

16. Blueprint

Na etapa de Ideação:

17. Brainstorming (reunião entre pessoas de diversas áreas da empresa para pensar em ideias, apresentá-las e discuti-las, sem filtros, num curto espaço de tempo)

18. Workshop de Cocriação (encontro organizado na forma de uma série de atividades em grupo com o objetivo de estimular a criatividade e a colaboração, fomentando a criação de soluções inovadoras)

19. Cardápio de Ideias

20. Matriz de Posicionamento

Na etapa de Prototipagem:

1. Protótipo em Papel

2. Modelo de Volume

3. Encenação

4. Storyboard

5. Protótipos de Serviços 

Outras duas ferramentas muito importantes e que vêm sendo cada vez mais utilizadas pelas empresas são:

Ludificação: utiliza-se da dinâmica e do entretenimento dos jogos para tornar uma atividade lúdica (pode ser utilizada em qualquer etapa do processo).

Cocriação com o Cliente: consiste em convidar o cliente a participar do processo de criação do produto, quer pessoalmente, quer virtualmente (nas etapas de Ideação e Prototipagem).

Como aplicar o Design Thinking na sua empresa

Para aplicar a metodologia de Design Thinking na sua empresa, antes de tudo, a cultura da empresa deve possibilitar que isso aconteça. Como?

Que tal começar por:

  • Prover um ambiente confortável, seguro, aberto a novas ideias;
  • Ter uma equipa multidisciplinar focada em aproximar-se do público e criar empatia sobre a solução do desafio;
  • Adotar estratégias de coleta e análise de dados.

Foto de fauxels

Empresa Totvs seguiu o método Design Thinking

A Totvs, que produz softwares e aplicações para outras empresas, utilizou o método de Design Thinking para tornar os seus produtos mais “amigáveis” aos dispositivos móveis (tablets e smartphones, especificamente).

Primeiro, a empresa fez uma pesquisa para conhecer melhor os seus clientes com o objetivo de compreender seus atuais problemas e necessidades.

No caso dos clientes retalhistas, identificou que essas empresas precisavam de um software simples, que permitisse ao vendedor acompanhar o consumidor pela loja e efetuar a venda através do dispositivo, sem precisar de passar na caixa de pagamento.

Depois de mapear as necessidades, a Totvs organizou as ideias num mural com post-its coloridos, com a colaboração de funcionários de diferentes sectores.

A seguir, criou um protótipo do produto, apresentou ao cliente e ouviu as sugestões dele. Então, fez as devidas alterações e apresentou o protótipo do produto final.

Aprovada essa última versão, a empresa entregou o produto pronto para ser utilizado, mas não totalmente acabado. Assim, foi possível observar a experiência do cliente e fazer as atualizações necessárias, sempre a promover a melhoria contínua.

Dessa forma, a Totvs conseguiu, por meio do Design Thinking, evitar retrabalhos e otimizar o tempo de produção do software.

Por que a sua empresa deve investir no Design Thinking?

O gestor de um negócio, nos dias de hoje, tem de ter grande capacidade de adaptação, para além de saber inovar. O Design Thinking é uma metodologia que possibilita e contribui imenso nesse processo, pois, a partir dele, é possível encontrar respostas rápidas e eficazes para as questões mais relevantes do negócio.

Os conceitos de multidisciplinaridade, empatia e criatividade, se bem aplicados, trazem grandes benefícios, não só no âmbito de projetos, mas também no dia a dia da empresa.

Eles devem fazer parte da cultura organizacional para uma real transformação de dentro para fora. A cultura organizacional deve ser focada na colaboração, cooperação e incentivo à criatividade em todos os processos.

O custo de implementação do Design Thinking é reduzido e traz grande vantagem competitiva para a empresa.

Além disso, por agregar colaboradores de todas as áreas, o resultado são profissionais mais felizes, motivados e integrados na empresa e uns com os outros, e por consequência mais produtivos também.

Rebranding: como a imagem influencia o sucesso da marca

Inês Tito
Copywriter

As marcas são entidades vivas. São dinâmicas. E estão em constante mutação. 

Na verdade, a sobrevivência de uma marca está intimamente relacionada com a sua capacidade para adaptar-se aos desejos dos consumidores.

Inês Tito
Copywriter

As marcas são entidades vivas. São dinâmicas. E estão em constante mutação. 

Na verdade, a sobrevivência de uma marca está intimamente relacionada com a sua capacidade para adaptar-se aos desejos dos consumidores.

Contudo, para seguir em frente, por vezes é necessário um corte abrupto com o passado. Uma rutura desta ordem pode revitalizar uma marca e fazê-la crescer. Ou, pelo contrário, pode acarretar consequências irreversíveis. Posto isto, como saber qual o caminho a seguir?

O reposicionamento do Instagram é um exemplo de como o risco calculado resultou numa estratégia de sucesso.

Fonte: Vecteezy

Revitalização da marca através do rebranding

O rebranding, ou estratégia de reposicionamento, é um processo utilizado para alterar os elementos que definem uma marca. Contudo, não significa que estamos a criar uma marca nova. Na verdade, estamos apenas a dar-lhe uma “renovação de visual”. O objetivo é apresentar aos consumidores uma nova identidade com que possam relacionar-se.

Os motivos (certos) para o rebranding

Alterar a imagem da marca pode ser uma ideia tentadora quando há pouco envolvimento dos consumidores ou quando as vendas estão em declínio. 

No entanto, antes de avançar com uma estratégia de reposicionamento, é importante compreender o motivo desses resultados. Por vezes, basta criar uma nova estratégia de marketing e apresentar o produto numa perspetiva diferente.

Se, por outro lado, a imagem da marca está desatualizada ou não reflete a missão e valores da empresa, talvez o rebranding seja a solução. Porém, existem outros motivos igualmente válidos:

  • Nova missão, visão e valores

À medida que uma marca evolui, a sua missão, visão e valores podem alterar-se. Por isso, é importante rever o modelo de negócio e de que modo este se reflete na imagem transmitida aos consumidores.

  • Fusões e aquisições

No mundo dos negócios, as aquisições e fusões entre empresas são comuns. No entanto, para o consumidor pode ser confuso diferenciar a nova marca das pré-existentes. Por isso, é importante apresentar a nova identidade da marca através de uma imagem renovada. 

  • Reposicionamento no mercado

O reposicionamento da marca pode decorrer da criação de produtos e serviços, para alcançar um novo público-alvo. Neste caso, apesar da missão, visão e valores da empresa manterem-se inalterados, é necessário atualizar a imagem da marca.

  • Novos mercados

Quando o objetivo é a expansão internacional, é natural que os novos consumidores não tenham qualquer relação com a atual imagem da marca. Assim, para promover a identificação com a marca, pode ser necessário alterar o logótipo ou até o nome da empresa, ou do produto.

Estratégias de rebranding

O sucesso de um plano de reposicionamento de marca depende de um estudo de mercado exaustivo. Sem conhecermos o nosso público-alvo, os nossos concorrentes e a perceção da marca nos consumidores, como podemos definir os próximos passos?

Além disso, é necessário avaliar a missão, visão e valores da marca. Estarão alinhados com a mensagem que a marca pretende transmitir?

Uma vez clarificados estes aspetos, é tempo de tomar decisões.

Rebranding total

O reposicionamento total resulta numa mudança completa da imagem da marca, que pode incluir a missão e valores da empresa. 

Nesta estratégia, é comum a criação de um novo logótipo. Além disso, pode ser alterado o nome da marca, slogan, esquema de cores e tipo de letra. O resultado é uma imagem totalmente distinta da original. 

Com esta estratégia, a identidade da marca é posta à prova. 

No caso de marcas consolidadas no mercado, esta abordagem pode trazer danos irreparáveis. Os consumidores fidelizados podem ter dificuldade em associar a marca ao produto e, para os investidores, isso significa perdas avultadas. Em última instância, resta reverter todo o processo e voltar à imagem original

Rebranding parcial

Através do reposicionamento parcial são feitos pequenos ajustes à imagem da marca. Em muitos casos, é apenas necessário alterar o logótipo e manter o esquema de cores original. Noutros, a imagem mantém-se. O que muda é a voz da marca.

Esta estratégia é utilizada por marcas maduras que pretendem apenas renovar a sua imagem e reter os clientes fidelizados. Desta forma, o consumidor reconhece a marca e os seus produtos, através de uma imagem melhorada.

Instagram: O sucesso de um rebranding arriscado 

A primeira revolução instituída pelo Instagram foi o seu aparecimento. 

A segunda foi o rebranding de 2016.

Fonte: Unsplash

Em 2010, a rede social Instagram surpreendeu devido ao seu conceito inovador: uma plataforma dedicada a conteúdos visuais, criados a partir de dispositivos móveis. Rapidamente, qualquer pessoa, em qualquer lugar, poderia publicar e partilhar fotos com amigos e familiares.

Esta ideia simples transformou-se numa receita de sucesso. Passados seis anos, o Instagram contava com 400 milhões de utilizadores. Por esta altura, era claro que a rede social tinha crescido o suficiente para ser necessário rever a comunicação da marca. 

A necessidade de mudar

Habitualmente, os processos de reposicionamento surgem para solucionar um problema. 

No caso do Instagram, o “problema” é o cenário de sonho de qualquer executivo: uma marca que cresceu naturalmente, além da sua própria identidade. Este tipo de crescimento obriga a rever a imagem da marca para que esta se mantenha atualizada e acompanhe a sua própria evolução.

O propósito dos utilizadores do Instagram mudara desde o aparecimento da plataforma. Em 2010, a aplicação era essencialmente utilizada para partilhar fotos entre amigos. Contudo, em 2016, eram as empresas que expandiam o seu negócio, apostando em anúncios na plataforma.

Durante este período, a rede social investiu em vários serviços para acompanhar as necessidades dos utilizadores. Entre eles estão as mensagens diretas, os vídeos, os anúncios ou as ferramentas para empresas, como a subscrição de newsletters e compra de produtos.

Além disso, o Instagram apostou na melhoria da experiência do utilizador. Desenvolveu uma interface mais simples e intuitiva, focada na criação e publicação de conteúdos.

Neste sentido, um logótipo inspirado numa máquina fotográfica Polaroid, que nos remete para a nostalgia dos anos 80, dificilmente será associado a uma rede social de última geração.

A transformação de um ícone

O primeiro logótipo do Instagram foi desenvolvido por Kevin Systrom, o cofundador da rede social. Inspirado pela máquina fotográfica Polaroid dos anos 80, o seu intuito era recordar a infância e os momentos passados em família. 

Considerando que o objetivo inicial do Instagram era facilitar a partilha de fotos com amigos e família, este logótipo não poderia ser mais adequado. Por este motivo, nos anos seguintes, o pequeno ícone foi ajustado, para apresentar uma versão atualizada da máquina fotográfica, sem esquecer as suas origens.

Fonte: 1000logos

Assim, quando o novo logótipo foi anunciado em 2016, as reações não se fizeram esperar. Se por um lado houve quem adorasse a nova imagem, do outro estavam os utilizadores fidelizados à imagem original. 

O Instagram simplificou a imagem da antiga máquina fotográfica através de um design minimalista. Além disso, o traçado branco do diafragma da máquina contrasta com o gradiente de cores quentes, inspirado no arco-íris da imagem original. 

A interface também foi atualizada para tons branco e preto. Para Ian Spalter, o responsável pelo rebranding do Instagram, o ícone serviria como uma “porta colorida” para uma aplicação onde “as cores devem surgir dos conteúdos publicados pelos utilizadores”.

Esta mudança drástica gerou grande debate no mundo online. Quer fossem bons ou maus comentários, a controvérsia alimentou a popularidade da aplicação. Assim, apesar da resistência inicial, a mudança revelou ser um sucesso. Em 2018, o Instagram registava um bilião de novos utilizadores em todo o mundo.

A singularidade do rebranding do Instagram

A sociedade moderna vive a um ritmo mais acelerado do que as gerações anteriores. Como consequência, focamos a nossa atenção no que é percetível mais depressa. Não temos tempo a perder e queremos perceber rapidamente o que os nossos sentidos detetam.

Por este motivo, as últimas tendências do design gráfico apresentam elementos em comum que visam facilitar o reconhecimento das marcas. Contudo, no que respeita ao rebranding do Instagram, algumas características são únicas.

  • Simplicidade

Em suma, quanto mais depressa o consumidor perceber do que se trata uma imagem, mais rapidamente associará à marca. Assim, na lógica de “menos é mais”, o novo logótipo do Instagram representa de forma simplificada os elementos-chave da identidade da marca: a partilha de foto e vídeo.

  • Relevância

Para que uma estratégia de reposicionamento seja bem-sucedida, é vital que o logótipo seja relevante para o público-alvo. Ou seja, que informe o público sobre o que se trata aquela imagem. O gradiente de cores e o traçado claro do logótipo do Instagram relevam uma marca de personalidade amigável, onde a imagem, seja em fotografia ou vídeo, é o elemento principal.

  • Memorável

Apesar dos inúmeros estudos conduzidos sobre a memória humana, em muitos aspetos esta permanece um mistério para os investigadores. No entanto, uma coisa é certa: o nosso cérebro simplifica a informação complexa para reter e criar memórias. 

Para uma estratégia de reposicionamento, isto significa que uma imagem com pouco detalhe visual promove o reconhecimento da marca.

Foi esta a aposta do Instagram. Ao apresentar um logótipo limpo e simples, a rede social deixa a sua impressão na memória do utilizador. Além disso, consegue, em simultâneo, comunicar os aspetos mais importantes da personalidade da marca.

  • Intemporal

Num processo de rebranding, é importante pensar a longo prazo, evitando apenas seguir as últimas tendências do design. Com esta estratégia, a marca pode definir qual o caminho a seguir e deixar uma porta aberta para o futuro.

O Instagram alcançou o objetivo da intemporalidade na perfeição. Desde o seu aparecimento, a rede social alterou o foco na fotografia para incluir também o vídeo. Assim, a nova imagem sugere a versatilidade da marca, independentemente do caminho a seguir.

Em 2022, o Instagram continua a reinventar-se. O novo algoritmo trouxe mudanças na apresentação de conteúdos, existindo um maior foco nos conteúdos de vídeo. Como resultado, a plataforma atualizou o gradiente de cores, criou um tipo de letra personalizado, e desenvolveu um novo formato para celebrar a criatividade e autoexpressão.

O que podemos aprender com o rebranding do Instagram?

A mudança é o elemento essencial de qualquer estratégia de rebranding. Na verdade, a mudança faz parte do processo de melhoria contínua que permite a evolução das marcas. 

O Instagram decidiu arriscar e mudar totalmente a imagem a que o mundo já estava familiarizado. Contudo, foi um risco calculado, sustentado por pesquisa e testes exaustivos. Assim, o que podemos aprender com este rebranding?

Conhecer o impacto da marca nos utilizadores e pensar numa estratégia de mercado a longo prazo é importante para apresentar uma nova imagem intemporal, que seja bem aceite pelo público. Durante um ano, a plataforma pesquisou e analisou os dados recolhidos antes de aplicar uma mudança tão drástica.

Além disso, é essencial testar a nova identidade junto de funcionários e consumidores. Através da inquirição a grupos de teste, o Instagram obteve informação vital que conduziu a equipa de rebranding à versão final da nova imagem da marca. 

Por último, é importante aceitar que é impossível agradar a todos. A mudança gera ansiedade e cria resistência ao que é novo. Porém, é essencial para avançar. Este princípio sustentou o processo de rebranding do Instagram, que reconheceu os comentários negativos e, nem por isso, deixou de recolher feedback.

O rebranding do Instagram demonstra a importância de manter uma imagem de marca ajustada às necessidades do utilizador. O que começou como uma mudança chocante, transformou-se num sucesso. Considerando o padrão evolutivo da plataforma, é possível que, no futuro, o Instagram nos surpreenda cada vez mais.