Posted on

Responsive design: priority when building a website

Sandra Caravana
Copywriter

With the increase in internet access via mobile devices, it is imperative to make the user experience more dynamic, easy and intuitive. Responsive design creates layouts for different screens, ensuring pleasant aesthetics, easy interaction, excellent readability and intuitive navigation.

Sandra Caravana
Copywriter

With the increase in internet access via mobile devices, it is imperative to make the user experience more dynamic, easy and intuitive. Responsive design creates layouts for different screens, ensuring pleasant aesthetics, easy interaction, excellent readability and intuitive navigation.

Responsive design is the ability to develop web pages whose elements adjust automatically and flawlessly to different screen sizes, constantly guaranteeing pleasant aesthetics, uncomplicated interaction, clear reading and natural navigation.
In other words: if your site isn’t adapted for mobile, the user will give up on the visit, purchase or interaction.

In the last quarter of 2023, mobile devices (excluding tablets) accounted for 58.6% of global website traffic. Since 2017, cell phones and smartphones have maintained a constant presence above 50%, surpassing that mark in 2020, according to available data.

The concept of responsive web design – RWD

Tim Berners Lee was responsible for creating the World Wide Web in 1989. Responsive Web Design, introduced by Ethan Marcotte in 2010, emerged to meet the demands of the new technologies of the 21st century, such as smartphones and tablets, adapting content to the user, thus being in the same line of thought (and work) as the concept of UX: the user’s perspective.

In times past, when creating a website, the choice was between a liquid design, which adjusted to the browser window, or a fixed-width design, with specific dimensions in pixels.

The liquid design caused compression on smaller screens and excessively long lines on larger screens. Meanwhile, the fixed-width design generated horizontal scroll bars on narrow screens and white space around the edges on wider screens.

You don’t need a degree in design to realize when a website isn’t responsive: you’ve probably come across a website that, when viewed on your smartphone, you have to scroll sideways to read the full sentence.

Source: https://www.zilliondesigns.com/blog/ethan-marcotte-responsive-web-design-future/

Responsive design in 3 techniques

Responsive design is not a separate technology, but an approach to web design using practices such as:

  1. Fluid grids: a layout system that uses percentage units to define the width of the grid’s columns and rows.
  2. Fluid images: setting the max-width property to 100% allows images to shrink to fit a narrower column while maintaining their intrinsic size, without enlarging.
  3. Media Queries: instead of having a single layout for all screen sizes, you can change it. For example, sidebars can be repositioned on smaller screens, or an alternative navigation can be displayed, providing flexible adaptation to different viewing conditions.

Source: https://www.seobility.net/en/wiki/Media_Queries

Responsive Design VS Adaptive Design

It’s worth clarifying the difference in concepts before moving on to the reasons and benefits that responsive design can bring to your business or your digital marketing work, so that it’s clear that this web design and programming work is much more than adapting the site to screen sizes.

The difference between responsive and adaptive design lies in the fact that responsive design adjusts the rendering of a single page version, while adaptive design offers multiple, completely different versions of the same page.

Fonte: https://kinsta.com/pt/blog/design-responsivo-web/

Responsive design for Marketing

Responsiveness is the main keyword for engagement strategies.
Being responsive is no longer about being able to reply to a customer’s email in less than 24 hours. It’s now about the customer getting a response while visiting your business website.

Investing in responsive design, investing in responsive human resources, will result in faster conversions. It will have an impact on three fronts: technical, experience and objectives.

Technical: eliminates the need to create specific layouts for each type of computer, smartphone or tablet.

Experience: UX/UI Designer seeks to improve the user experience in every aspect. Responsive design ensures consistency and avoids frustration.

Objectives: As well as avoiding problems such as missing buttons in broken layouts, it reinforces the fundamental concept of balance between form and function, ensuring the success of the user experience on different devices.

Responsive websites avoid

  • the need to zoom in to read text on mobile devices;
  • cluttered overlapping of elements on smaller screens;
  • hiding buttons and CTA’s on different resolutions;
  • loss of important information on smaller screens;
  • misalignment of forms and input fields;
  • creation of unnecessary scroll bars on smaller devices.

Source: Estúdio Criarte

Responsive design and SEO

Based on recent data showing the increase in mobile traffic to your site, it’s clear that even if you decide to start a site with a desktop version, you’ll need to invest in a mobile-friendly version and later – but not too late – a mobile-first version.

Since 2018, with Google’s adoption of the mobile-first principle, page loading speed has become crucial for SEO. Responsive design condenses pages for faster loading, especially on smaller screens, avoiding user frustration.

SEO agencies recommend responsive design to reduce bounce rates and improve search engine rankings: responsive design makes it easier to deliver content in an organized and clear way.

The ability to easily view and navigate content on any device is essential for creating good first impressions.

With the increase in the volume of internet access via mobile devices, the number of online purchases made via these devices is also following the same upward trend.
A responsive website creates more interaction, providing digital word-of-mouth, which is to say, more shares on social networks.

Responsive design and copywriting

If images have to be optimized, so do words.

Labels and placeholders are strategic decisions.

Labels tell users what information should be in a particular form field and are usually positioned outside of it. A placeholder, located within a form field, is a suggestion, description or example of the information required for a particular field. Good UX practice dictates that the placeholder disappears when the user types in the field.

The decision whether or not to write a placeholder will also depend on the persona of your business: how digitally literate is your persona?

Current best practices suggest replacing the placeholder with a more explanatory label.

Source: https://www.nngroup.com/articles/form-design-placeholders/

Benefits of responsive design

  1. A responsive website provides easy access on any device, without the need to zoom or scroll horizontally.
  2. Google recommends responsive sites because a single site with the same URL makes it easier to crawl and index.
  3. Users easily find what they’re looking for, increasing engagement and potentially generating more sales or leads.
  4. Managing a single responsive site saves time and resources
  5. A responsive website conveys a more professional and up-to-date brand image.
  6. Responsive design facilitates the implementation of marketing strategies, allowing detailed analysis of user behavior on various devices, enhancing the overall marketing strategy.
Posted on

Design for email marketing: how to create impactful and effective messages

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.

Posted on

Web design: color trends for 2023

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

With each new year that begins there is always the expectation of what will be the new concepts and trends, whether for fashion, for design, for decoration and even when it comes to consumer behavior.

With the expressive growth of the digital market, the great world forecasts could not be missing when it comes to news and innovations for this area as well.

Therefore, for those who work with the Web universe, stay tuned to the color trends for the year 2023.

Gabriela Polidoro Lima
UX Designer & Content Writer

With each new year that begins there is always the expectation of what will be the new concepts and trends, whether for fashion, for design, for decoration and even when it comes to consumer behavior.

With the expressive growth of the digital market, the great world forecasts could not be missing when it comes to news and innovations for this area as well.

Therefore, for those who work with the Web universe, stay tuned to the color trends for the year 2023.

Color Trends for 2023

Once trends were only directed at Fashion and were dictated by large research companies such as WGSN and Pantone. From the runways to the shop windows, then to the streets, these were the environments where the adherence to the trends dictated each year could be confirmed. Nowadays, and especially after the COVID-19 pandemic, these trends had to be adapted to the digital universe as well, as major brands in the retail and footwear sectors needed to extend their operations into this new habitat. What consumers see in shop windows and runways must be coherent with what they see on the websites and e-commerce of these same brands, so the choice of look and colors cannot just follow trends, but be part of an entire concept and visual language of each brand.

With this change of scenery, it is essential to keep in mind the importance and impact that colors have on a digital project, be it a website, a blog, or an application.

The first reading made by users is done in the first 90 seconds of exposure and 90% of the result of this reading is impacted by color.

So, besides knowing what colors are trending, it is essential to understand how to use them. Let’s get to it?

What is the color of the year for 2023 elected by Pantone?

The PANTONE® brand was created by Pantone Inc. based in the USA and considered the world’s color authority for having created, in 1967, a standard language for communication and color management, from the designer to the final consumer. The Viva-Magenta shade is chosen as the color of the year for 2023, which brings with it a matching color palette called Magentaverse – a name that already makes clear the strong influence of the digital universe. On the brand’s official website, the color is described as brave, fearless, and pulsating, whose exuberance promotes joy and an optimistic celebration, writing a new narrative.

According to Leatrice Eiseman, Executive Director of the brand:

“In the age of technology, we seek to design inspired by nature and what is real. PANTONE 18-1750 Viva Magenta, is inspired by the red of the cochineal, one of the most precious dyes belonging to the natural dyes family and also one of the strongest and brightest the world has ever known. The color reconnects us to what really matters, invoking the forces of nature and helping us build our inner strength.”

The website’s homepage welcomes Viva Magenta, the color of 2023, and shows the Magentaverse palette with the color codes chosen by Pantone.

Source: Pantone

Digital Lavender – WGSN’s 2023 Trend Color

The global authority in forecasting consumer trends, WGSN, has also chosen a color to represent the year 2023 and the connection with technology is already explicit in the name: Digital Lavender. Founded in 1998 in West London, the company develops in-depth research that includes data curation, global analysis producing stories and tools needed to understand the public’s behavior.

“Digital Lavender is a gender-inclusive color already established in the youth market and this is expected to expand to all fashion categories by 2023. The synesthetic aspect of this color makes it ideal for self-care rituals, therapeutic practices and wellness products.” Reports the company, which developed the color through Coloro, a system designed for creating and executing color patterns with complete confidence. In addition to dictating fashion and behavioral trends, WGSN also guides the digital market and indicates color “for electronics, digital wellness, quality of life-oriented lighting and housewares.”

With information overload and digitalization on the rise, both companies indicate colors that point to a counter movement, bringing stability and balance. For them, the trend colors of 2023 promise to converge the physical and virtual worlds, connecting users to well-being and bringing strength and mental health.

Source: WGSN

Other colors that WGSN points as a trend for 2023

In addition to the main one, Digital Lavender, WGSN indicates 4 other colors that represent the new moment that the world will live in 2023, after 3 years of imposition and detachment: Astro Dust, Galactic Cobalt, Sage Leaf and Apricot Crush. To watch the video launching the colors and learn more about each one of them, just click here.

Source: WGSN

Before choosing colors, what should be taken into consideration?

Speaking specifically about the digital universe, when choosing the colors that will be used in a project, it is essential to consider some important points:

Understanding

What is the point of applying the most amazing colors of 2023 if the user cannot understand the message that the brand is conveying? Legibility, accessibility and adaptability are the key words to have a good digital performance.

  1. Readability – right level of contrast between background and text;
  2. Accessibility – in addition to colors, it is essential to remember that there are those who simply cannot see the colors and therefore must have access to the voiceover;
  3. Adaptability – night mode, saturation level, and brightness also influence comprehension and demonstrate an important care for users.To know if you are on the right track, there are several tools that allow you to test if the colors you are using provide good readability to users. Here are some sites:
  • https://abc.useallfive.com/ – quickly tests contrasts. Just enter the color codes and it generates the contrast and overlap results.
  • https://colorable.jxnblk.com/ – a tool that can be used to increase the readability of texts with high contrast colors.
    https://
  • www.colororacle.org/ – extension available for Mac and Windows that shows in real time what visually impaired people will see.

Brand Consistency

Following a brand style guide is fundamental to have consistency in communication. As much as the color trend of 2023 is Viva Magenta, you shouldn’t simply change the color of your website or app because of that, knowing that your brand has green as its main color, for example. Using a distinct communication at different communication points can create confusion, frustration, and even convey instability. Imagine a user wondering if they are really on the brand’s official website precisely because, upon entering, they do not immediately see the visual language they are used to seeing? Quick identification is fundamental to generate connection and keep the user active and close.

A good example of communication is the world famous jewelry brand Tiffany & Co, which is already extremely recognized for the use of a very particular shade of blue in its graphic communication, stores, and packaging. The specific shade used by the brand is even now commonly referred to as Tiffany Blue, that is, it has become a globally recognized standard.

The meaning of colors and the sensations they convey

The sensations that colors transmit are much discussed, especially at the end and beginning of a new year. Colors have many meanings, and being aware of these meanings can help a lot when choosing the colors of a digital product.

Colors and the sensations connected to colors:

  • Pink: romanticism, innocence and love.
  • Violet: spirituality, intuition, wisdom, and serenity.
  • Red: joyful color of action, passion, courage, and self-confidence.
  • Orange: joy, success, sympathy, and cooperation.
  • Yellow: creativity, good luck, and communication.
  • Green: energy, hope, regeneration, and nature.
  • Blue: purification, harmony, understanding, and clarity of understanding.
  • White: harmonizes, peace, purity, positivity.
  • Black: independence, dignity, and power of decision.

Source: Tiffany & Co

As we can see in the images above, Tiffany & Co’s website, despite being very clean and clear, to highlight the products it is selling, brings color in a subtle way in order to maintain the visual coherence of its communication.

  • In one image, the home screen of the brand’s official website, brings an information on top of the Homepage with the color in the background, highlighting the message.
  • In the other image, the shadow produced by the jewelry in the highlights images, brings the color almost like a watermark, besides being in the larger image, which highlights the little box where the jewelry is kept.
  • In another screenshot from the same site, even using high contrast colors in the background (yellow and orange), they don’t overlap, on the contrary, they highlight even more the color of the brand in the famous packaging with white lace.

Besides Tiffany & Co, other brands are extremely effective when using their color pattern in different communication points, standing out and captivating consumers. The fast-food chain McDonald’s almost no longer needs to use the entire logo because by combining the two primary colors yellow and red it has created an identity that is recognized anywhere in the world. If one day one of McDonald’s stores changed its colors to green and white, consumers might think they were entering a Starbucks store, another brand that has also created its identity in the combination of colors always standing out in its communication and products.

Beyond these already popular meanings and references, when creating a brand or communicating some message it is always worth considering some factors related to colors and the impact that they have on users. Several studies already conducted on the interference and importance of colors in the digital universe, reveal that it can improve the understanding of a message by up to 73%, the ability to learn by up to 68%, and facilitate reading by up to 40%.

Here are some examples of brands and what the colors they choose convey to their users:

Coca-Cola – red – transmits joy, vibration and celebration, the main concept of the Apple brand – white or silver – the color transmits technology, innovation and modernity

Fedex – orange – color that conveys speed and cooperation

Facebook – blue – the color conveys trust and transparency

Thus, it is very important to consider what colors convey when choosing which colors to use in your logo, the base of your website homepage, a call to action button, or the icon of your app.

In addition to what you want to convey through color, you should always keep in mind, the brand values and company culture, all of these elements should be in harmony so that, visually, the logo and communication reflect exactly what the company and brand want to say to its customers and consumers.

If you are working with a brand that already has a defined color, you must be careful when combining it with other colors, because they can highlight, contrast, or even overlap the main color, resulting in the opposite of what is desired. Contrasting colors do not always highlight the main color, they can also overshadow or create mental confusion. Combining vibrant colors with more neutral ones always works, as does combining colors from the same palette, choosing different shades of the same color, some lighter and some darker.

The tip is to always choose a main color – or use the brand color – and then combine 1 to 3 extra colors that will compose the visual palette of the project or style guide. This palette should be applied to all communication, whether online or offline.

To help create color palettes, there are some free tools available, such as Color Palette, Cohesive Colors, and 0 to 255.

Besides testing the usability of the chosen color combinations, as already mentioned, it is always valid to create a visual image of the product and test it with the users themselves to know their opinion. Nothing better than to test in practice the efficiency of the chosen color palette.

Read also: How image influences brand success

Posted on

Design Thinking in business

Pauliny Zito
Planner, copywriter e copydesk

More than a tool, Design Thinking is a critical and creative thinking process to project, plan and design a project.

It is a modern and innovative way of approach that can be used in various contexts and any sector.

Pauliny Zito
Planner, copywriter e copydesk

Trabalhar por conta própria. É isso que define o freelancer, termo em inglês que significa profissional liberal que presta serviços de modo autónomo para empresas ou pessoas, por períodos determinados de tempo.

O trabalho de freelancing oferece flexibilidade, independência e a oportunidade de perseguir a sua paixão.

According to Universidade Nova de Lisboa, Design Thinking:

    – It is person-centered – it starts with deep empathy and knowledge of people’s needs and motivations;

    – It is collaborative – it benefits from diverse points of view and perspectives and is a process in which the creativity of one reinforces the creativity of all;

    – Is optimistic – believes we can all create change – no matter how big the problem, how short the time, or how low the budget.

Although the term “design thinking” had already been used since the 1970s in the United States as a creative approach, in science, engineering, architecture, education, and academic research, it was only in 1991 that Tom and David Kelley and Tim Brown systematized the ideas of Design Thinking into methodology aimed at business management.

The approach only began to gain traction outside the design community after the 2008 Harvard Business Review article [subscription required] entitled Design Thinking by Tim Brown, CEO, and president of the design firm IDEO.

Source: Photo by Alena Darmel

Design Thinking

Design Thinking is a methodology used to create new products, services, processes, or to solve problems. However, a methodology that values creativity, experimentation, and empathy to find innovative, agile, practical, and safe solutions in the business.

The main differential is multidisciplinarity, therefore involving people from different areas of the company.

Source: Photo by Cottonbro

Pillars of Design Thinking

Inspiration

Perceive the problem or opportunity, study the possibilities, the competition, and the behavior of the target audience. Research and gather materials to inspire.

 

Empathy

Put yourself in other people’s shoes and understand their needs, both the target audience and the company’s internal audience.

Creativity

Having the ability to make connections between the data and distinct opinions collected to find something in common between them.

 

Then it is necessary to implement the ideas to obtain feedback and learn from inevitable mistakes.

 

Stages of Design Thinking

Each company has its own organizational culture and particularities and, therefore, must assess the best tools to be used in each stage of Design Thinking and, if necessary, adapt the stages to its reality, to achieve the goal. There are five stages of Design Thinking, namely:

 

  1. Immersion or Empathy

It is the understanding phase, in which the problem is discussed, the purpose and limits of the project are defined, the SWOT (Strengths, Weaknesses, Opportunities, Threats) analysis is made, as well as exploratory and references research. And then interviews and fieldwork to generate insights.

 

  1. Definition

This is the stage of analyzing and organizing the material, identifying patterns and categorizing ideas, and synthesizing. Making a graphical representation of this material helps in visualizing the problem. Next, filter the insights, and define the target audience and a line of work.

 

  1. Ideation 

This is the phase of thinking of a solution to the problem, bearing in mind that no solution is ideal. It is fundamental to use methods to explore the maximum creativity of the people involved, encouraging experimentation and (inevitable) mistakes.

 

  1. Prototyping

It is the prototyping phase, that is, producing a Minimum Viable Product (MVP). A simple version of the product is made for a test period. 

To create the MVP, answer these three questions:

 

1) What solution do you offer? What is its real differential? 

 

2) How does this solution work? What does your product/service deliver that others do not?

 

3) What is the expected outcome for your customer?

 

  1. Implementation

This is the phase of implementing the solution. In case the product is validated, make the appropriate adjustments and launch the product or service in the market.

But attention, the work does not end here, taking into account that the company must maintain a process of continuous improvement of each project.

Image: Interaction Design Foundation.

Image: Interaction Design Foundation.

These steps are not always sequential and teams often execute them in parallel, out of order, and repeat them iteratively.

1. Understand the problem;
2. Develop possible solutions;
3. Prototype, test and repeat;
4. Implement.

Source: MIT Management Sloan School

Techniques and Tools of Design Thinking

Design Thinking has a number of collaborative techniques and tools. It is up to the manager to identify those that work best within the context of the project and the company culture.

This article lists and describes 25 techniques and tools of Design Thinking, which I quote below.

In the Immersion stage:

1. Reframe

2. Exploratory Research

3. Desk Research

4. Interviews

5. Awareness Notebooks

6. Generative Sessions

7. A Day in the Life

8. Shadow

In the Definition (or Analysis and Synthesis) stage:

9. Insight Cards

10. Affinity Diagram

11. Conceptual Map

12. Guiding Criteria

13. Personas

14. Empathy Map (knowledge obtained through interviews with clients)

15. User Journey

16. Blueprint

In the Ideation stage:

17. Brainstorming (meeting among people from different areas of the company to think of ideas, present and discuss them, without filters, in a short period of time)

18. Co-creation Workshop (a meeting organized as a series of group activities with the objective of stimulating creativity and collaboration, fostering the creation of innovative solutions)

19. Ideas Menu

20. Positioning Matrix

In the Prototyping stage:

1. Paper Prototype

2. Volume Model

3. Staging

4. Storyboard

5. Service Prototypes

Two other very important tools that are being increasingly used by companies are

Ludification: uses the dynamics and entertainment of games to make a playful activity (can be used at any stage of the process).

Co-creation with the Customer: consists in inviting the customer to participate in the product creation process, either personally or virtually (in the Ideation and Prototyping stages).

How to apply Design Thinking in your company

To apply the Design Thinking methodology in your company, first of all the company culture must make it possible. How to do this?

How about starting by:

  • Providing a comfortable, safe environment that is open to new ideas;
  • Having a multidisciplinary team focused on approaching the public and creating empathy about the solution to the challenge;
  • Adopting data collection and analysis strategies.

Photo by fauxels

Company Totvs followed the Design Thinking method

Totes, which produces software and applications for other companies, used the Design Thinking method to make its products more “friendly” to mobile devices (tablets and smartphones, specifically).

First, the company surveyed to get to know its customers better to understand their current problems and needs.

In the case of retail customers, it identified that these businesses needed simple software that would allow the salesperson to walk the consumer through the shop and make the sale through the device, without having to go through the checkout counter.

After mapping the needs, Totvs organized the ideas on a wall with colored post-its, with the collaboration of employees from different sectors.

Next, it created a prototype of the product, presented it to the client, and listened to their suggestions. Then he made the necessary changes and presented the prototype of the final product.

Once this last version was approved, the company delivered the product ready for use, but not fully finished. Thus, it was possible to observe the client’s experience and make the necessary updates, always promoting continuous improvement.

In this way, Totvs managed, using Design Thinking, to avoid rework and optimize the software production time.

Why should your company invest in Design Thinking?

The manager of a business, nowadays, has to have a great capacity for adaptation, in addition to knowing how to innovate. Design Thinking is a methodology that enables and contributes immensely to this process because from it, it is possible to find quick and effective answers to the most relevant business questions.

The concepts of multidisciplinarity, empathy, and creativity, if well applied, bring great benefits, not only in the scope of projects but also in the company’s daily routine.

They must be part of the organizational culture for a real transformation from the inside out. The organizational culture should be focused on collaboration, cooperation, and encouragement of creativity in all processes.

The cost of implementing Design Thinking is reduced and brings a great competitive advantage to the company.

Moreover, by aggregating employees from all areas, the result is happier professionals, motivated and integrated into the company and with each other, and consequently more productive as well.

Posted on

Rebranding: How Image Influences Brand Success

Inês Tito
Copywriter

Brands are living entities. They are dynamic. And they are constantly changing. 

A brand’s survival is closely related to its ability to adapt to consumers’ desires.

Inês Tito
Copywriter

Brands are living entities. They are dynamic. And they are constantly changing. 

A brand’s survival is closely related to its ability to adapt to consumers’ desires.

However, to move forward, sometimes an abrupt break from the past is necessary. Such a break can revitalize a brand and make it grow. Or, on the contrary, it can have irreversible consequences. That said, how do you know which way to go?

Instagram’s repositioning is an example of how calculated risk resulted in a successful strategy.

Source: Vecteezy

Brand revitalization through rebranding

Rebranding, or repositioning strategy, is a process used to change the elements that define a brand. However, it does not mean that we are creating a new brand. We are just giving it a “makeover”. The goal is to present consumers with a new identity that they can relate to.

The (right) reasons for rebranding

Changing the brand image can be a tempting idea when there is little consumer engagement or when sales are declining. 

However, before moving forward with a repositioning strategy, it’s important to understand why this is happening. Sometimes it is enough to create a new marketing strategy and present the product from a different perspective.

If, on the other hand, the brand image is outdated or does not reflect the company’s mission and values, perhaps rebranding is the solution. But there are other equally valid reasons:

  • New mission, vision, and values

As a brand evolves, its mission, vision, and values may change. So it is important to review the business model and how it is reflected in the image conveyed to consumers.

  • Mergers and acquisitions

In the business world, acquisitions and mergers between companies are commonplace. However, for the consumer, it can be confusing to differentiate the new brand from pre-existing ones. Therefore, it is important to present the new brand identity through a renewed image.

  • Repositioning in the market

Re-branding can arise from the creation of products and services to reach a new target audience. In this case, although the company’s mission, vision, and values remain unchanged, it is necessary to update the brand image.

  • New markets

When the goal is international expansion, it is natural that new consumers have no relationship with the current brand image. So, to promote brand identification, it may be necessary to change the logo or even the name of the company, or the product.

Rebranding Strategies

The success of a repositioning plan depends on a thorough market study. Without knowing our target audience, our competitors, and the perception of the brand among consumers, how can we define the next steps?

In addition, it is necessary to evaluate the brand’s mission, vision, and values. Are they aligned with the message the brand wants to convey?

Once these aspects are clarified, it’s time to make decisions.

Rebranding total

Total repositioning results in a complete change of the brand image, which may include the company’s mission and values. 

In this strategy, it is common to create a new logo. In addition, the brand name, slogan, color scheme, and the font may be changed. The result is an image distinct from the original. 

With this strategy, the brand identity is put to the test. 

In the case of established brands, this approach can do irreparable damage. Loyal consumers may find it difficult to associate the brand with the product, and for investors, this means heavy losses. Ultimately, all that remains is to reverse the whole process and return to the original image.

Rebranding partial

Through partial repositioning small adjustments are made to the brand image. In many cases, it is only necessary to change the logo and keep the original color scheme. In others, the image remains the same. What changes is the voice of the brand? 

This strategy is used by mature brands that just want to renew their image and retain loyal customers. In this way, the consumer recognizes the brand and its products through an improved image.

Instagram: The success of a risky rebranding 

The first revolution instituted by Instagram was its appearance. 

The second was the 2016 rebranding.

Source: Unsplash

In 2010, the social network Instagram was surprised due to its innovative concept: a platform dedicated to visual content, created from mobile devices. Quickly, anyone anywhere could post and share photos with friends and family.

This simple idea turned into a recipe for success. Six years later, Instagram had 400 million users. By this time, it was clear that the social network had grown enough that it was necessary to review brand communication.

The need for change

Usually, repositioning processes arise to solve a problem. 

In the case of Instagram, the “problem” is the dream scenario for any executive: a brand that has naturally grown beyond its own identity. This kind of growth forces a review of the brand’s image to keep up to date and keep up with its evolution.

The purpose of Instagram users has changed since the appearance of the platform. In 2010, the app was primarily used to share photos with friends. However, in 2016, companies were expanding their business by placing ads on the platform.

During this period, the social network has invested in several services to keep up with users’ needs. Among them are direct messages, videos, ads, or tools for businesses, such as newsletter subscriptions and product purchases.

In addition, Instagram bet on improving the user experience. It developed a simpler and more intuitive interface, focused on creating and publishing content.

In this sense, a logo inspired by a Polaroid camera, which takes us back to the nostalgia of the 80s, will hardly be associated with the latest generation social network.

The transformation of an icon

Instagram’s first logo was developed by Kevin Systrom, the co-founder of the social network. Inspired by the Polaroid camera from the 80s, it is intended to remember childhood and family moments. 

Considering that Instagram’s initial goal was to make it easier to share photos with friends and family, this logo couldn’t be more appropriate. For this reason, in the following years, the small icon was adjusted, to present an updated version of the camera, without forgetting its origins.

Source: 1000logos

So when the new logo was announced in 2016, the reactions were quick to follow. If on the one hand, some loved the new image, on the other were users loyal to the original image. 

Instagram simplified the old camera image through a minimalist design. In addition, the white outline of the camera’s diaphragm contrasts with the rainbow-inspired warm color gradient of the original image. 

The interface has also been updated to black and white tones. For Ian Spalter, the person in charge of Instagram’s rebranding, the icon would serve as a “colorful gateway” to an application where “colors should emerge from the content posted by users.”

This drastic change has generated great debate in the online world. Whether it was good or bad comments, the controversy fueled the popularity of the app. So, despite initial resistance, the change proved to be a success. In 2018, Instagram registered one billion new users worldwide.

The uniqueness of Instagram’s rebranding

Modern society lives at a faster pace than previous generations. As a consequence, we focus our attention on what is perceptible faster. We have no time to waste and want to quickly perceive what our senses detect.

For this reason, the latest trends in graphic design have common elements that aim to make brands easier to recognize. However, when it comes to Instagram’s rebranding, some features are unique.

For this reason, the latest trends in graphic design have common elements that aim to make brands easier to recognize. However, when it comes to Instagram’s rebranding, some features are unique.

  • Simplicity

In short, the sooner the consumer understands what an image is about, the sooner he or she will associate it with the brand. So, in the logic of “less is more”, the new Instagram logo represents in a simplified way the key elements of the brand identity: photo and video sharing.

  • Relevance

For a repositioning strategy to be successful, the logo must be relevant to the target audience. That is, it informs the audience what that image is about. The color gradient and clear layout of the Instagram logo reveal a brand with a friendly personality, where the image, whether in photo or video, is the main element.

  • Memorable

Despite numerous studies conducted on human memory, in many ways it remains a mystery to researchers. However, one thing is certain: our brain simplifies complex information to retain and create memories. 

For a repositioning strategy, this means that an image with little visual detail promotes brand recognition.

This was Instagram’s bet. By presenting a clean and simple logo, the social network leaves its impression on the user’s memory. At the same time, it can communicate the most important aspects of the brand’s personality.

  • Timeless

In a rebranding process, it is important to think long-term, avoiding just following the latest design trends. With this strategy, the brand can define which way to go and leave a door open for the future.

Instagram has achieved the goal of timelessness perfectly. Since its inception, the social network has changed its focus on photography to include video as well. Thus, the new image suggests the versatility of the brand, regardless of which path to take.

In 2022, Instagram continues to reinvent itself. The new algorithm has brought changes to the presentation of content, with a greater focus on video content. As a result, the platform updated the color gradient, created a custom font, and developed a new format to celebrate creativity and self-expression.

What can we learn from Instagram’s rebranding?

Change is the essential element of any rebranding strategy. Change is part of the continuous improvement process that allows brands to evolve. 

Instagram decided to take a risk and change the image that the world was already familiar with. However, it was a calculated risk, supported by thorough research and testing. So what can we learn from this rebranding?

Knowing the brand’s impact on users and thinking about a long-term market strategy is important to present a timeless new image that is well accepted by the public. For a year, the platform researched and analyzed the data collected before applying such a drastic change.

In addition, it is essential to test the new identity with employees and consumers. By surveying test groups, Instagram obtained vital information that led the rebranding team to the final version of the new brand image.

Finally, it is important to accept that it is impossible to please everyone. Change creates anxiety and resistance to what is new. However, it is essential to move forward. This principle underpinned Instagram’s rebranding process, which acknowledged the negative comments and nevertheless did not stop gathering feedback.

Instagram’s rebranding demonstrates the importance of maintaining a brand image tailored to user needs. What started as a shocking change has turned into a success. Considering the platform’s evolving pattern, Instagram may surprise us more and more in the future.