Patricio Lopez Juri

Alejandra Bustos

Ignacio Loyola

Franco Mendez


If you are a developer like me, you probably were surprised too when we saw the brand new link previews from GitHub on Twitter or on some Slack channels.

**Here at Flayyer what we do is enabling companies to automate the image generation process for their social media and marketing channels.**

Today I'm going to show how to create GitHub-like previews or "cards" (you name it) using [Flayyer.io](/io), React.js and TailwindCSS.



At Flayyer.com we are aware of the relevance of digital marketing in these hyper connectivity times. If someone denied it a few months ago, online sales of 2020 were in charge of ensuring it is.

And how could it not be, if even though we think that we are all connected, year after year new users continue to be added, due to the digitization of EVERYTHING. Well, almost everything. This means that **brands are having a much better chance of reaching their customers and attracting new ones.**

In this context, digital marketing is vital for business. If we think of any brand, it is most likely that it has its website, and if it does not, we can find it on a social network, this being the "default" way in which users expect to connect with their favorite brands.

There are many strategies to carry out good campaigns, but one of the formats that is most attractive to users is the one that incorporates **visual content**, which, as its name indicates, has as its protagonist images, colors and shapes rather than texts.

The reasons? **Let's see.**

![Infographic showing seven vertically stacked blocks with text and accompanying decorative figures. The texts are: 1. It's estimated that 3.96 billion people currently use social media worldwide. 2. So we are faced with information overload every day. 3. BRANDS MUSTADAPT. 4. Visual content is the key. Human brain can process images 60,000 times faster than text. 5. THE CAT IS SLEEPING ON THE WINDOW. 6. Studies estimate that 65% of the population learns visually. They understand and reatin information better with images and videos. 7. According to the Wyzowl's State of Video Marketing 2018 survey, 83% of consumers who saw branded videos, considered sharing them with their close friends.](/img/blogposts/infografia-mkt.jpg)

And brands know it. It is no wonder platforms like YouTube, Instagram, and Pinterest are so successful.

**“A picture worth a thousand words”, Yes, we've all heard this. Because it's true.**

## What makes it so special?

Visual content creates more powerful campaigns that prompt the brain to remember or relate to something, like a product or a brand, rather than sentences that are quickly forgotten. and users love to share something they like.

Of course, not every visual advertising will work in the same way. And we discovered that there is an instance in social media interactions that most brands have missed. **Link previews...**

Our eyes work like a scanner. When we scroll down on social media, we see a striking image and we stop and look at every detail of it, whether for some purpose or not. **Those images that attract attention generate clicks.**

But for some reason, when sharing links, the previews seem sloppy, as if they were not part of the interaction. Some links do not even generate them. We strongly believe that brand owners should take care of the issue, take advantage of a marketing opportunity that can be massed by the same users. This can make web pages more accessible by showing the user a hint of the content. **And that builds trust**. (link to ux research blogpost)

### Is it really important?

We did some user experience research and about 74% of the users we surveyed declared that they frequently send and receive links, and 79% of them affirmed that to click on them, they look at the previewed content.


## We are here to help

Flayyer is a service that automates the design of previews when shared on social media, whoever shares them, in addition to delivering analytics so that customers can act quickly if a publication goes viral, among other things.

Considering that visual communication has a fast and intuitive language, making a successful review is not a matter of using any image, so we studied what are the variables that make a design a good design, you can **see our tips in our guidelines for effective Flayyers.** (link to guidelines blogpost)

So, in simple words, **users want to know where a link will redirect them**, and brands want to provoke an irresistible urge to click them. Adding Flayyer to the equation results in beautiful and reliable previews, **increasing the click through rate up to 57%.** Everyone wins.

Feel free to [reach us](mailto:hello@flayyer.com) and start your free trial or make as many questions as you wish. We are here to help 😉



How many times has this happened to you when sharing interesting content on social media?

![link preview of a social media app showing only a part of an image depicting sneakers. It should say SNEAKER STORE, but only NEAKER STO is partially readable with some effort.](/img/blogposts/ux-research/preview-feo.jpg)

How many times has it been sent to you and a huge link full of numbers appears without any reference image?

We can guess: **lots of times**. You don't know what you're dealing with or where it might lead you, so you decide to ignore it and move on with your life.

## Our early research

In the first stage we could only raise assumptions, so we began to investigate thoroughly and we found that it is not a very studied subject. What we did find out was where website views come from.

If we focus on e-commerce sites, according to [Episerver's 2020 Retail Benchmark Report](https://www.episerver.com/guides/b2c-retail-benchmark-q1-2020), the majority of website traffic comes from direct searches and paid search. However, social traffic has doubled from 4 to 8% in share of website traffic from early 2018 to late 2019. To some it might seem like a small number, but if you are part of the business world, you know that this increase is **HUGE**. And it will continue to grow.

![Chart titled 'Traffic sources on Retail Sites' showing that within 2019 the trend has been negative for Organic and Paid searches, while it has been a positive one for Social.](/img/blogposts/ux-research/TRAFFIC-min.jpg)
Why was this percentage so low until recently? The main reasons why users do not click links seem to be lack of interest and trust. There’s too much information. We are already used to “Five things you should know about blah blah blah”.

According to a [Columbia University study](https://www.washingtonpost.com/news/the-intersect/wp/2016/06/16/six-in-10-of-you-will-share-this-link-without-reading-it-according-to-a-new-and-depressing-study/), \*\*59% of the people you share content with won't even see it. While Facebook surveyed users and found that 80% preferred links with headlines that helped them understand what an article was actually about.

### We needed to know more.

All this has led us to have some clues but it still does not answer our questions, in fact, it generates many more and as we love challenges we set out to answer them by going to the first source: people.

As we mentioned in our blogpost **Marketing strategy for humans**, we are visual beings, so our main hypothesis is that well designed previews can increase trust in links since they offer a better visual experience, which could increase our clients websites CTR.

We conducted two tests; remote meetings with our UX researcher and a survey.

## 1. The interviews

The first one consisted of remote meetings with **27 users** where we first talked about their habits on social media.

Given the nature of our service, we knew that we needed to recreate a navigation that would provide us with the most realistic answers possible, so we designed an interactive prototype with Figma simulating the Twitter platform. Within this simulation we presented our users with four scenarios:

1. A feed where various publications were shared in the form of links, default previews and Flayyer previews. We asked volunteers to navigate as they normally would, **clicking if something really caught their attention and to speak their thoughts out loud to us.**

2. In the second one, we did a **direct comparison** between the same publications from the first scenario.

3. Simulation of a specific situation about **searching for a new apartment to move in**. There we showed default previews and Flayyer previews and make choose as many as they want, while explaining their decision to us.

4. Finally, we simulated a chat where **a close friend shared links and previews of a product**, and we asked them to do the same as in the previous scenario.

![Animated image showing moving stream of link previews that were presented to the test subjects.](/img/blogposts/ux-research/video-pantallas.gif)

### The results

The conversation confirmed that when buying in online stores, 92% of users go directly to websites when they need something very specific, however, **74% said that before buying they usually send links or ask for references** to their close as they seek to compare prices.

On the first part of the test we obtained a **click through rate estimation**, increasing clicks by an average of 57.6%. We could also see how users did not even notice the links without a preview.

![Infographic showing that the CTR increase for better flayyers was of 57.6% on average](/img/blogposts/ux-research/ctr_increase.jpg)

The second part did not give us major insights statistically speaking, since in 62.5% of the cases the previews with Flayyer had a 100% success rate over the default ones. Nevertheless it was a huge motivation and it gave us the clue that we were on the right track 😊.

In the third test, 85% chose the Flayyer previews, arguing that the information displayed was very useful, however, some of them also stated that due to the quiality of this information there was the possibility of not clicking if it helped them to discover that the apartment did not have the characteristics that they needed.

In the last test **we tested trust**. We designed previews for ice cream brands and arranged with default previews and written links.

Here, users stopped to examine closely, but they stated that if they trust who sent them, they probably would not hesitate regardless of the preview, if and only if the subject was interesting, although the presence of logos of recognizable brands gave them the feeling of authenticity. Which led us to ask them what else they felt when they saw the images, and they answered: hunger.

![Left side: two vertically stacked flayyers depicting icecream that don't show the full image. Right side: The same flayyers but this time horizontally placed and showing the whole content with additional design.](/img/blogposts/ux-research/HELADOS.jpg)

The insights that we were able to obtain from this first instance were:

- The use of Flayyer using flayyer doubled (and a bit more) the CTR.
- People don't usually look at links without previews (and trust us, brands that haven't solved this are many more than you might think)
- If your goal is to simplify life for your users, giving them all the relevant information before they click will be very appreciated. We think that this could also reduce the gap between the number of visits and sales conversions.
- But if visits are essential for the company, the information to be displayed must be chosen wisely, so you attract enough attention to prompt them to visit your webpage for more details.
- Trust is a variable issue. There are users who trust their close eyes closed, while others are more cautious.
- Images with logos gave them greater confidence and made them think less whether to click or not, since they assured them that the links would redirect them to an official page.
- Designed previews allow to evoke sensations and show a context in which users could imagine themselves using the products or services.
- We need to try those ice creams.

### 2. The survey

The second test was a two-part survey. In the first part, we sought to validate the results of the first test with a larger sample of people. In the second part we asked them about their preferences by presenting them with Flayyers with different types of visual and informational elements.

In a total of 203 respondents, 78% declared that they usually share links with their close friends, of which more than half said they do it frequently.

![Horizontal bar chart showing how frequently users shared and were shared links. The difference between being shared and sharing links is very small. Approximately, 45% of the users shared links many times, 20% never, 23% few times and 12% always](/img/blogposts/ux-research/percent-shares.jpg)
When asked how often they click on the links they receive, 70.9% said it depends. And what does it depend on? We asked them this question openly, so they could tell us as much as they wanted.

The responses were very interesting, some people elaborated more than others, but we managed to group the information into two categories with some subcategories.

![Vertical bar chart showing how frequently users click on shared links on social media. It depends: 70.9%. Always: 22.2%. Never: 6.9%.](/img/blogposts/ux-research/click-or-not.jpg)

Users considered that the most important subjects when clicking a link are trust and interest. Sounds familiar?

Within the answers, people declared that **the elements they pay most attention to are the previews, the URL's and the type of information** or text on the preview. We believe that these concepts are directly related to the two categories that we mentioned in the previous paragraph, that is, by providing well designed images and the right information to users we can increase their trust and perhaps their interest.

![Venn diagram composed of Trust, Interest, and their intersection, which is Images, Url's and Info.](/img/blogposts/ux-research/CATEGORIES-min.jpg)
Later in the survey, we showed volunteers six concepts corresponding to items in a preview of both products and reading articles and asked them to rank them according to their level of importance.

The concepts associated with products were image, brand logo, sale information, price, shipping information and product description. The top 3 items were very clearly defined:

![Infographic showing 6 ranks: First place is Image. Second is Price. Third is Description. Fourth is Logo. Fifth is Sale. Sixth is Shipping.](/img/blogposts/ux-research/ranking-1.jpg)

While the concepts related to reading articles were author, description, image, headline, logo and type of publication, and were ranked as follows:

![Infographic showing 6 ranks: First place is Headline. Second is Image. Third is Description. Fourth is Logo. Fifth is Type. Sixth is Author.](/img/blogposts/ux-research/ranking-2.jpg)
Here begins the second part.

First, we presented four Flayyers related to a news publication with little changes related to the type of information.

![Infographic showing four ranked flayyers according to percentage, each representing the same link but with a different design. All show a picture of a politician and the text elDESCONCIERTO.cl in the lower right corner. The first image has 44.3% (first place in the rank), and has additional informational text conveying the news category which is National, and the date, which is January 26. This text is in the same corner as the text "elDESCONCIERTO.cl". The second place has 39.4% and shows the same information as the first, but with the additional information placed at the top left corner, although this time also showing the year. The third place has 9.4% and only has the category as additional information, placed in the top left corner. The fourth and last has 6.9% and has the same information as the third, but with the category placed along the "elDESCONCIERTO.cl" text](/img/blogposts/ux-research/BRIONES-min.jpg)

In this question, respondents preferred the preview that contained the date of publication on the left side of the image. This could be explained with the theory that it is easier for our brain to process texts when they are located to the right side of our vision, as we explained in our blog [“Catching attention: Guidelines”](/blog/posts/guidelines-1)

We also wanted to know if the use of images changes the perception of a brand, or if it causes users a sensation, so we designed a Flayyer for an alcohol sales brand. The test consisted on comparing this design with the default preview and assigning a personality to the brand.

![Flayyer with minimal design, only showing the logo of an alcoholic beverages brand. Next to it is a horizontal bar chart showing adjectives associated with percentages in descending order: Youthful with 43.2%, Relaxed with 26%, Expensive with 14.1%, Cheap with 6.8%, Exclusive with 4.7%](/img/blogposts/ux-research/default-casacopete.jpg)

Respondents defined the personality perceived in the default preview as youthful and relaxed, while seeing the Flayyer preview this perception changed to a classy personality.

![Flayyer representing same link as before, but with a different design. The logo is included in a photograpy background that shows a diagonaly distributed color layout with the colors being blue and light blue; on top of the surface stand two cups of an alcoholic beverage, with tropical style, and a full lemon fruit, with some blueberries next to one of the cups. The cups are at the left of the image, while the brand logo is on the right.](/img/blogposts/ux-research/flayyer-casacopete.jpg)

Then, we made users choose between pairs of Flayyers, changing only the information. In the first pair we used a preview showing in one the location, the price and the logo of the website, and a preview shoowing only the logo of the website and the characteristics of the apartment.

As stated by some questions back, number one pick was the preview where users could see the price, with 65.1% of the preferences.

![Two ranked flayyers placed horizontally, with the first one noticeably bigger, both aligned on the bottom. Each shows almost the same design: A picture of an apartment, but with different information. The first has 65.1% and shows the price and the approximate location, while the second has 34.1% and shows the number of rooms, baths and square meters.](/img/blogposts/ux-research/HOUM-min.jpg)

Then we presented another pair of Flayyers and we tried to ensure that the description under the image showed relevant information, in this case, the price and location of the apartment.

![Two ranked flayyers placed horizontally, with the first one noticeably bigger, both aligned on the bottom. Each shows almost the same design: A picture of an apartment and the number of rooms, baths and square meters, but with different additional information. The first has 75.4% and shows the location and price. The second does not display additional information and has 24%.](/img/blogposts/ux-research/PORTAL.jpg)

Our hypothesis was that the difference in the results would be narrow, since both previews in their entirety had the same information. Well, people continued to prefer the option with the price and the location within the image.

Finally, we asked if during all the examples users read the descriptions below the image, to which most of them answered they did.

![Infographic partially showing a flayyer, with focus on the text below the image that most link previews have by default. In this case this text has a brief piece of information saying the price and the location, along with a call to action. An accompanying graph tells that 77% of users read this information, while 23% didn't.](/img/blogposts/ux-research/vistas-descripciones.jpg)

To sum up:

- People share links mainly via chat to their closest ones.
- Although there is trust with who shares a link, users are cautious when deciding whether to open one or not.
- Trust and interest both relies on the preview’s image, type of information and URL. In this order.
- Adding your brand logo increases user's trust.
- When talking about products, images are fundamental. Remember, well-made adverts captivate us.
- If you run a site that publishes information, showing the date of publication is very important.
- Using the right images can totally change the perception of your brand, which could bring you even closer to your target audience!
- Even though most declare that if they read the descriptions under the image, it is in the preview where people focus the most.

## Final thoughts

To wrap this up, these seem to be unexplored lands, but we are sure that taking care of the link previews can be a great plus that makes a difference.

And the best advice we can give you: don't make assumptions. Not all of us think the same, although there are certain collective agreements, constantly testing is the key to really knowing how our users perceive our campaigns.

We have developed our Flayyer platform so that you can design and test your creations easily and quickly. Visit the [get started](/get-started) page or [contact us](mailto:hello@flayyer.com) if you want to get the most out of it with a personalized plan. Transform people's interactions into strong marketing opportunities 😊.



In the previous article we compiled the tactics that as a Flayyer team we consider key to designing eye-catching link previews based on the psychology of advertising studied by various authors.

On Guidelines 2 we will review the psychology of color applied to advertising, as well as a typographic guide and some tips that we obtained in a study with our users. (link to ux blogpost)

To get started, it must be clear that colors are more than "just a color". In fact, there are not as many colors as we might believe. According to The Munsell System (Munsell, 1912), colors contain three attributes: **hue**, **value** and **chroma**.

A) **Hue:** Basically, the name of the color family. Red, yellow, green, cyan, blue and magenta (and well, let's add black and white)

B) **Value:** The level of brightness. Colors with low value add black and called "shades", while colors with high value are brighter and called "tints".

C) **Chroma:** The level of saturation or intensity.

![HVC schema](/img/blogposts/guidelines-2/ESQUEMA_HVC.jpg)

How many colors do you see here?

![various tones of the same color arranged horizontally. Some are very hard to spot.](/img/blogposts/guidelines-2/colores.png)

Some people see 6, others 12, some even say they see more than 20. If we are strict with the concepts, it is only one. The observable differences correspond to variations in value and chroma of magenta.

These variables are what enrich the spectrum and allow us to have as many "colors" as we know. Research shows that focusing only on the hue is not a smart move, the other two components play a larger role in emotional impact [(Suk & Irtel, 2009)](https://onlinelibrary.wiley.com/doi/abs/10.1002/col.20554).

But what makes people choose one color over the other? Which ones are more striking and why?

The main theories point to biological/evolutionary reasons and to mental models according to the cultural constructs of each individual. Researchers as [Grossman and Wisenblit (1999)](https://www.emerald.com/insight/content/doi/10.1108/EUM0000000004565/full/html) have suggested that color associations could come from our ancestors, when concepts such as passivity and calm began to be attributed to the dark blue of the night, or energy and excitement to the yellow of sunlight.

![colors arranged vertically, each assigned to women separately, but in groups to men.](/img/blogposts/guidelines-2/colors-genders.png)

This is why women can perceive more wavelengths, since in the past women had a forager role, so they had to be able to identify the berries to eat. **Keep this in mind if your ads are targeting a specific genre.**

Which brings us to the gender schema theory, where blue is attributed to the masculine and pink to the feminine [(LoBue and Deloache, 2011)](https://bpspsychub.onlinelibrary.wiley.com/doi/abs/10.1111/j.2044-835X.2011.02027.x). Now, younger generations seem to break this paradigm with the statement that colors have no gender. And that's pretty cool.

But whether we agree with that or not, mental models are real and etched in our retinas. We develop preferences for colors, based on the culture that surrounds us and the emotional experiences that we live with those colors over time, which would explain that not all people make exactly the same associations.

**_“Past experience, culture, and context are a few factors that determine the meaning of a color”_**

Marketers know this very well and they know that there are cross-sectional associations for most of the public, so they have come up with general guidelines for applying colors to their ads, and we'll go over them now.

## 1. Colors based on arousal level

As we explained in our first guidelines, one of the stimuli to which we instinctively react is **high arousal**. In short, we are more likely to capture elements that provoke us active emotions, motivating us to take action, either to gain or to prevent something.

![Infographic with two axes, Activated-Deactivated and Unpleasant-Pleasant. Activated & Unpleasant: Angry, Stressed, Scared. Activated & Pleasant: Excited, Blissful, Happy. Deactivated & Unpleasant: Sad, Bored, Fatigued. Deactivated & Pleasant: Calm, Content, Relaxed.](/img/blogposts/guidelines-2/ESUQEMA_EMOCIONES.jpg)

Cool colors decrease arousal and warm colors increase arousal.

“An activated consumer may be more likely to engage in impulse buying. For this type of situation, the more activating colors such as red and blue are most appropriate, while moderate wavelength colors such as green should be avoided.” [(Crowley, 1993)](https://link.springer.com/article/10.1007/BF00994188)

When reading this quote we might think, why does the author consider blue if it is a cool color? Research shows that cool colors encourage relaxation, which can cause people to spend more time in online stores, while warm colors increase impulsiveness, causing people to spend less time rationalizing and prompting them to act now.

![HVC table showing red, orange, yellow, black hues as excited, while green, blue and purple are relaxed.](/img/blogposts/guidelines-2/TABLA_1.jpg)

So if you want to make a quick and active impression, warm colors with high value and chroma will fit perfectly. If your brand uses cool colors but its personality is also strong, raising the value and chroma levels will work very well too.

![flayyer telling to "Prevent BACK PAIN from prolonged sitting!", the message over an image with a red filter. At the left, a chair with white background.](/img/blogposts/guidelines-2/EJEMPLO_1.jpg)

If you want to attract people by provoking a more rational thinking **focused on the benefits** that your brand provides, use cold colors and play by raising or lowering the value and chroma depending on the personality you want to convey.

![flayyer telling to "Get the back massage you deserve while working", the message over an image with a blue filter. At the left, a chair with white background.](/img/blogposts/guidelines-2/EJEMPLO_2.jpg)

## 2. Brand personality

Since we mentioned it, at least five types of personalities have been defined that can be represented by colors [(Aaker, 1997)](https://journals.sagepub.com/doi/abs/10.1177/002224379703400304). These are:

- Ruggedness
- Excitement
- Competence
- Sophistication
- Sincerity

This seems very accurate, but what if we have a more specific personality? We investigated and found an awesome compilation that we represent graphically for you.

![HVC table: green and brown represent Ruggedness. Red, orange and yellow inspire excitement. Blue and black provoke Competence. Purple and white effect a sense Sophistication. Yellow, pink and white induce a feeling of Sincerity.](/img/blogposts/guidelines-2/TABLA_2.jpg)

## 3. Make contrast!

We already connected the psychology of color with one of the stimuli of our first guide and now we will do it again. One of the main stimuli corresponds to salience (you can find the explanation in this blogpost), and what better way to achieve it than by varying the characteristics of one color or better, mixing several.

Contrast is a highly important resource if we want to highlight a specific element. To achieve striking and harmonious designs, we can rely on the color wheel and these two types of schemes:

**Triadic**: Considered to be one of the best color scheme, using three colors situated at 120 degrees on the color wheel.

![A triadic color wheel focused on the wine, light orange and light blue combination.](/img/blogposts/guidelines-2/TRIADA.jpg)

Tip: Use one color for a background and the two remaining for content and highlighted areas.

![Flayyer showing the triadic combination of sky blue, light pink and turquoise.](/img/blogposts/guidelines-2/FL_TRIADA.jpg)

**Complementary**: use colors on opposing sides of the color wheel. Because they are on opposite sides, complementary colors have very high contrast.

![Complementary wheel, focused on orange and blue.](/img/blogposts/guidelines-2/COMPLEMENTARIO.jpg)

Tip: If we are going to design ads with a low amount of content, you can use more than one pair or trio of colors and vice versa.

![Flayyer with complementary colors.](/img/blogposts/guidelines-2/FL_COMPLEMENTARIO.jpg)

## 4. Type of product

Partly related to brand personality, being clear about the type of product or service we are offering is essential. We can divide it into two categories: **hedonic**, which provides social or sensory benefits, or **utilitarian**, which provides functional benefits.

![Flayyer promoting a drill. Black and blue colors.](/img/blogposts/guidelines-2/FLAYYER_UTILITARIAN.jpg)

![Flayyer promoting a perfume. Surrounded by pink and gold colors.](/img/blogposts/guidelines-2/FLAYYER_HEDONIC.jpg)

[Bottomley and Doyle (2006)](https://www.researchgate.net/publication/277431498_The_interactive_effects_of_colors_and_products_on_perceptions_of_brand_logo_appropriateness) surveyed some volunteers and asked them how they associated the colors with these categories, and here’s what they found: gray, black, blue and green were characterized as functional colors, while red, yellow, pink and purple appeared as social-sensory colors.

![HVC table. Yed, yellow, purple and pink are Hedonic. Green, blue and black are Utilitarian.](/img/blogposts/guidelines-2/TABLA_3.jpg)

Tip: If you are looking to convey a sense of sophistication, using a monochrome or analog palette works perfect because of its simplistic nature. The first is obtained by using a single color increasing or decreasing the **value**. The second is achieved by choosing **similar hues** in close proximity on the color wheel.

![One color wheel showing an analog combination of colors, next to a color wheel showing a monochrome combination.](/img/blogposts/guidelines-2/MONO_ANALOG.jpg)

But this does not end here, we know we promised you more at the beginning. As with color and images, **the use of fonts is also related to associations**. When we see a typeface, our brain dissects it into various traits, such as line, weight, size and orientation.

![Infograhpic showing different font families and different font spacings.](/img/blogposts/guidelines-2/TRAITS.jpg)

And in turn we associate these components with real life characteristics. How? Based on stereotypes, cultural constructs or mental models. Do you see how everything is related? So, if you don't know which one to choose, try to pick one that **visually resembles what you want to convey**, this is known as **semantic congruence**. [(Kang and Choi, 2013)](https://ieeexplore.ieee.org/abstract/document/6531125)

Let's look at these Flayyers. In both the same product is shown, what changes is the characteristic that is to be highlighted. According to the Kang and Choi study, if we use the concept of lightness, the latter “feels just right”, right?

![Flayyer promoting a smartwatch, surrounded by silver and pink colors. "So slim you won't feel it..."](/img/blogposts/guidelines-2/LIGHTNESS.jpg)

But if we change the message and focus on the sophistication of the product, the preference tends to change.

![Flayyer promoting a smartwatch, surrounded by silver and pink colors. "Feel the elegance in your hand...", but this time with a handwritten italic font](/img/blogposts/guidelines-2/SOPHISTICATED.jpg)

In the first guideline, we talked about the concept of motion expressed through visual perception and one of the tactics we suggested was the use of slanted or italic fonts. That is the power of mental associations, we can use metaphors and create different sensations through just an image.

![Flayyer promoting a bicycle, with light blue and neon blue colors. "LET'S GO FOR A RIDE". The font has leading horizontal lines, effecting a sense of speed.](/img/blogposts/guidelines-2/FLAYYER_MOTION.jpg)

Keeping this in mind is the best way to choose your fonts. Here is a summary of the different traits and which are the most common associations for each one.

![infographic showing comparisons between different font styles. Serif vs Sans serif: Roman typefaces are more legible because the theory states that serifs assist in the horizontal flow of reading and eye movements. Sans-Serif Fonts Convey Informality and Innovation. Light vs Bold: Light Fonts Convey Beauty and Feminity. Bold Fonts Convey Power and Masculinity. Simple vs Complex: Complex fonts convey uniqueness. If your message is direct and straightforward, use a rigid typeface without any ornaments. Slanted vs Straight: Slanted fonts convey movement and speed. Straight fonts convey stability and durability. Separated vs Connected: When letters are Separated, fonts convey the perception of individuality. Connected fonts convey unity and collectivism.](/img/blogposts/guidelines-2/TABLA-TYPOS.jpg)

Finally, we invite you to read our [UX research blogpost](/blog/posts/ux-research), where we got even more insights (and data) about people’s preferences. And, although we gave you some specific recommendations, there are no strict rules. We encourage you to break some of them and stamp your own and unique style.

Sign up and put all this into practice, we will be thrilled to see your creations on our **Flayyer platform.** Enhance your link previews to create more engagement and ensure the best first impression 😉.



The number of users on social media increases day by day. We are all connecting with our friends, colleagues, and even our grandmothers, and the business world is more than happy with the opportunities this hyper connectivity era offers, brands can strengthen their relationship with their customers and reach new ones without having to place printed ads in places where they could go unnoticed.

But this is not a mystery to anyone, we are exposed to a huge ocean with waves of information, publicity and more publicity. Our eyes perceive more stimuli than we can process and some of them enter our brain without even being noticed, so reaching customers effectively can be tricky.

**Brands need to catch attention.**[ (See visual marketing)](/blog/posts/visual-marketing) And to capture it, they use strategies based on advertising psychology. While psychology explores the human psyche and why people behave the way they do, advertising tries to influence them to make decisions.

Although at Flayyer we know that brands have experts designing their campaigns, we compile a series of tactics that are the result of several scientific studies, and we elaborate examples so that anyone interested can get the most out of our platform and superpower their link previews.

So, let’s start.

First, it is necessary to point out that there are 3 types of attention that are captured in different ways, so it is important to **identify which strategy we are targeting.** These are: immediate, short term and long term. [(Moran & Desimone, 1985)](https://science.sciencemag.org/content/229/4715/782.abstract)

**Immediate attention** is purely instinctive, activated in our subconscious. If someone yells, we immediately turn in that direction, without thinking. If we are scrolling in a static social media feed and we see that suddenly something moves -like a gif-, it catches our attention.

![Animated GIF showing a football mascot turning over suddenly and in a hilarious way.](/img/blogposts/guidelines-1/GIF-1.gif)

**Short term attention** happens next when we go from a subconscious state to a conscious one and judge whether that something really deserves our attention. It is not called "short" because of the time it can last, what characterizes it is that the mental immersion is not so big. If something slightly more interesting happens ahead, it is most likely that we will pay attention to this new stimulus.

![Animated GIF of a person scrolling what it seems to be an Instagram feed.](/img/blogposts/guidelines-1/GIF-2.gif)

**Long term attention,** on the other hand is acquired via repetition, it is deeply linked to the stimuli that we already know and puts us in a state of expectation. Highly recognizable brands enjoy this type of much desired attention, where almost simply by showing their main color people recognize them effortlessly.

![Animated GIF showing Homer Simpson whipping a repostery base while driving](/img/blogposts/guidelines-1/GIF-3.gif)

Then, there are a series of stimuli with their variables, such as contrasts of colors, sizes, shapes, use of space and movements, which together can result in hundreds of combinations. We know, it may seem like a lot, so we created this guide considering the features of our **Flayyer builder**, but, spoiler: there is no magical formula.

Link previews are static, so we will focus on tactics that respond to 4 types of stimuli, whose great advantage is that they capture our attention **immediately** and **automatically**, even if we're not paying attention. They are **salience**, **people (and animals)**, **high arousal** and **self-relevance**.

Here we go.

# 1. Salience

Highlighting items by color, orientation and motion.

A) **Color**: This could be the quintessential featured dimension. For evolutionary reasons, we are more than capable of noticing wide ranges of colors - some people more than others - in order to survive.

This variable is complex, so we [will cover it in depth later](/blog/posts/guidelines-2). Meanwhile, a good tactic is trying not to saturate the entire canvas with colors, we must leave behind the _horror vacui_ (fear of the void) and add focal areas, highlighting only the most important thing we want to convey. For this, we can, in addition to highlighting the main element, reduce the intensity of the elements that accompany it.

![Two images showing orange sneakers. The first with an orange background, the second with a purple background.](/img/blogposts/guidelines-1/FLAYYER-COLOR.jpg)

In this way, we also add fluidity to the complete compositions, facilitating understanding for people who see them.

B) **Orientation:** Several scientists have mapped the brain since the 1960s, starting with psychobiologist Roger W. Sperry. He postulated the theory that each hemisphere processes different types of information in different ways; while **analytical thinking predominates in the left brain**, **the right brain is attributed to an intuitive and visual function**.

When we are in front of visual stimuli, the brain processes the information with its hemispheres **crossed**. That is, what the left eye sees is processed by the right side of the brain, and vice versa. So, it is easier for us to process the images if they are located on the left and the texts if they are on the right.

![two flayyers showing a yellow piece of furniture, but with their elements in opposite orientation.](/img/blogposts/guidelines-1/FLAYYER-ORIENTATION.jpg)

C) **Motion:** Movement, as well as color, also makes us react instinctively most of the time. In advertising, the resource of animation is used a lot, web pages give life to some buttons so that they move, etc. But as we mentioned before, link previews are static, so the movement is represented in a different way, where there is a “feeling” of movement. [(Franconeri and Simons, 2005)](https://www.scholars.northwestern.edu/en/publications/do-new-objects-capture-attention)

![On the left, a flayyer with a bicycle, on the right, a flayyer promoting a sports ball brand](/img/blogposts/guidelines-1/FLAYYER-MOTION.jpg)

In these examples we can see how the use of slanted fonts gives a visual sensation of movement and speed. If we go one step further and play with overlays of the elements or using shapes that break the perpendicularity of an image we can perceive some dynamism.

# 2. People (and animals)

We decided to mix these stimuli into one since they work in almost identical ways.

As human beings, our brains search for faces on an instinctual level to detect a threat or to read emotions. There is a part of our brain called the ‘fusiform face area’ which is especially dedicated to recognizing human faces. Something similar happens with animals, our ancestors needed to detect them quickly to hunt, and well, not die eaten.

In some experiments, researchers made small changes to an image and they measured if people noticed them. [**Ro, Russell, and Lavie (2001)**](https://www.researchgate.net/publication/12040307_Changing_Faces_A_Detection_Advantage_in_the_Flicker_Paradigm) found that people can detect changes in faces more easily than in other objects, so ads with faces will probably be more salient if they are paired with ads with just objects.

![Two flayyers promoting a vinyl player. The one on the left shows additionally a woman, while the one on the right shows stacked vinyl and music players.](/img/blogposts/guidelines-1/FLAYYER-NEEDLE.jpg)

We are also influenced by bodies and body parts. A full body can give us the feeling of dynamism (hey, another motion tactic). Check out this Tokyo Olympics Flayyer, you can imagine the player scoring, right?

![Flayyer promoting the TOKYO 2020 olympics.](/img/blogposts/guidelines-1/FLAYYER-TOKYO.jpg)

Look at this other Flayyer.

![flayyer promoting pizza.](/img/blogposts/guidelines-1/FLAYYER-GAZE.jpg)

What did you notice first?

[**Langton, Watt and Bruce (2000)**](https://www.researchgate.net/publication/222672945_Do_the_eyes_have_it_Cues_to_the_direction_of_social_attention) said that ”the physical structure of the eye may have evolved in such a way that eye direction is particularly easy for our visual systems to perceive. Indeed, recent work suggests that the output of simple cells found in the visual cortex can, in principle, signal the direction of gaze”. Based on this, the order in which we see the elements would be first the face, then the call to action, and finally the brand logo, although of course, this may vary.

If we use these tactics but showing a cute puppy, we can get results amplified by ... a lot. However, s**ome animals capture more attention than others**. It will depend on the reaction we want to achieve.

# 3. High arousal

When talking about subconscious reactions, we might assume that trying to elicit emotions is a winning strategy and that is, partly, true. But we say "partly" because according to researchers, attracting attention depends on arousal.

[Barret and Russel (1999)](https://www.scholars.northwestern.edu/en/publications/do-new-objects-capture-attention) argue that emotions have two dimensions:

1.  **Arousal:** The level of activation

2.  **Valence:** The level of pleasantness

Remember when, at the beginning of the guide we talked about immediate attention? This is an effective way to capture it. The reason? Once again: evolution. We developed neural mechanisms to easily detect arousing events that put us on our toes, ready to act.

![Infographic with two axes, Activated-Deactivated and Unpleasant-Pleasant. Activated & Unpleasant: Angry, Stressed, Scared. Activated & Pleasant: Excited, Blissful, Happy. Deactivated & Unpleasant: Sad, Bored, Fatigued. Deactivated & Pleasant: Calm, Content, Relaxed.](/img/blogposts/guidelines-1/ESUQEMA-EMOCIONES.jpg)

We wanted to test ourselves, so we made a survey [(you can read more here)](/blog/posts/ux-research) comparing an ad for a national brand of plant-based products with a Flayyer designed by us, and we asked the volunteers what sensations both images provoked in them. We realized that this brand has top-notch ad campaigns, so we thought there would be no difference, or it would be very subtle.

![Flayyer showing an ice-cream product from NotCo. It is next to an image of caramel-covered pieces of ice-cream.](/img/blogposts/guidelines-1/FLAYYER-NOTCO.jpg)

But numbers don’t lie and as a result, 63% of those surveyed said that the ad did not cause them anything since the preview did not show the full product, while 17% were curious about the X3 and its meaning, which in this case It offered a pack of three ice creams, and those who felt like buying it were customers who already knew the brand.

In contrast, with the Flayyer preview only 10% were curious about the offer, while 57% declared that the ice cream squares caused them one thing: CRAVINGS. I myself had to buy one of those.

So that's what it's about, provoking an active emotion that causes us something strong. In the previous point we mentioned that not all animals caused the same effect and this is the reason. If you want to attract attention, you are more likely to succeed with a kitten or a giant snake (because fear is a pretty big emotion), than with a sweet sloth.

# 4. Self-relevance

It is the stimulus that makes seeing our own face, hearing our name or thinking about our experiences, striking.

The power of self-relevance is described as “automatic attentional capture ensures that self-related information is not missed and it is effectively encoded when present in one’s nearby environment” [(Alexopoulos et al., 2012)](https://onlinelibrary.wiley.com/doi/abs/10.1002/ejsp.1882)

It is not necessary to delve into great psychological explanations, we all turn if someone says our name. Brands have been able to use this resource very well through customization. In 2014, Coca-Cola launched the "Project Connect" campaign, where they invited to share a soda with other people, putting names on their packaging, and it was a HIT.

![Cola-cola cans and bottles of various sizes with people's names on them.](/img/blogposts/guidelines-1/COCA-COLA.jpg)

Another way to cover it is from a broader approach: mental interaction. In simple words, encourage people to fix their attention on an image with which they can interact, mentally, of course.

For example, in a study by [Elder and Krishna in 2012](https://www.researchgate.net/publication/239810633_The_Visual_Depiction_Effect_in_Advertising_Facilitating_Embodied_Mental_Simulation_through_Product_Orientation), they did a series of tests where they showed the volunteers different ads, such as a bowl of ice cream by itself and one with a spoon inside, and they found that the second one captured more the attention since people could imagine eating the ice cream with the spoon. The same happened when they showed a mug with the handle to the left and another to the right, where they preferred the second one since the right is the dominant hand of most people.

![Two flayyers showing coffee cups, one with the handle to the left, the other to the right.](/img/blogposts/guidelines-1/FLAYYER-NESCAFE.jpg)

In this last example we see the tactic of self relevance in conjunction with the people tactic. The ad with the ice cream cone in hand is probably more eye-catching than the one showing the ice cream itself.

![Two flayyers promoting ice-cream. The one on the left has one scoop, while the one on the right has two.](/img/blogposts/guidelines-1/FLAYYER-HELADOS.jpg)

In conclusion, this compilation covers the tactics that we consider key taking into account the features of our platform, but it is not necessary that they be applied all at once, in fact, we encourage you to take them as a starting point and play with them. We invite you to read the second part where we talk about color psychology and some extra tips 😉.

And as we said, there is no successful formula, perception and behavior are broad and very interesting topics that we look forward to continuing to discover with you by watching the masterpieces that you will design on our Flayyer Platform.

Which of our Flayyers caught your attention? Let us know and talk to us to start your free trial. Take advantage of this new marketing opportunity and tell a story from the moment people share your website on social media.



It has been long days of hard work but we are almost ready to launch.

## How it started

We realize **how important is to have consistent link previews** but not everyone has a Content Management System to take care of everything.
Even if you are using one you are probably just taking an image that represents your content and nothing more.

**This is when we want to give superpowers to your links and leverage the user network who loves your online website.**

## What is Flayyer?

**Flayyer is a online platform that enables companies and individuals to manage their social link previews.**

What is different from us is that we allow you to generate those social media previews with web technologies such as React.js and Vue.js (and more coming soon!).

Additionally we grab some analytics and stat usage to add an extra layer of marketing intelligence to your business.

## Where to start?

Visit the [Get started](/get-started) page to create and account. Add your website information and follow the installation guides.

## What is next?

We are working on more integrations, creating [free templates](/community) and new cool features to generate social media content base on your site.

Wondering how to use Flayyer with your websites? [Contact us](mailto:hello@flayyer.com) or join ur [official Discord channel](https://flayyer.com/discord) 🚀


# Flayyer: a platform to enhance your social-media presence.

Our mission is to enable everyone to control and improve their online presence starting from the
moment people share their links.

It started as a side-project for creating social images with React.js and ended up being a
fully-featured service.

Most analytics services can only start tracking when the user visits your website. Flayyer is one step ahead.

Which social network?

Sales are different than traffic. Understand customer behavior around each product or post.

Which items are more popular?

Get alerts when an item is being shared frequently. Act fast!

My post is going viral!

# Our documentation has a new home: [docs.flayyer.com](https://docs.flayyer.com?ref=flayyer.com)

Automatically add your brand and enhance your links with rich information. A picture is worth a thousand words.

From the moment you publish content on your website you will have a set of images to share on social media.

Deliver content in less time

Spend less time in repetitive design tasks, leave that to computers. Focus on what makes us humans: creativity.

Design that scales

There is a sea of information on the internet and content gets lost easily. Make your posts relevant.

Build trust from the first impression

Brand your links

The first thing people sees before anything is the image attached to your links, known as og:image.
Flayyer enables companies to create and manage those images.

Expand your funnel by attracting even more users to your website.

+57.6% Click-Through Rate

Respect your domain and all the effort your team puts on SEO and pagerank. Don't ditch your URL with other services.

Keep your own URL

Take control over your link previews

Use our universal URL formatter [@flayyer/flayyer-js](https://github.com/flayyer/flayyer-js) to integrate with any framework.

JavaScript

Any Connect.js or Fastify framework can be integrated. Every view engine is supported too.

Express.js

We love JAMStack and of course Gatsby is supported. Checkout our guide.

Gatsby.js

Flayyer was heavily inspired by this framework, even this site is built with Next.js

Next.js

We created a pip package [flayyer](https://github.com/flayyer/flayyer-python) so you don't have to deal with URL encoding. Framework agnostic.

Python

I have been using this framework for many years. I personally crafted a guide and example for Django lovers.

Django

Our official gem [flayyer](https://github.com/flayyer/flayyer-ruby) is available and ready to be installed. Framework agnostic.

Ruby

Superpower your Rails app with Flayyer. We are building a gem to make this more automatic.

Ruby on Rails

Many people asked for a Wordpress plugin so we created this agnostic PHP library with Composer: [flayyer/flayyer](https://github.com/flayyer/flayyer-php)

For your blog, e-commerce, portafolio, or any type of website you have! Checkout [flayyer/flayyer-wp](https://github.com/flayyer/flayyer-wp)

Wordpress

Create, deploy and update the <meta property="og:image" /> of your website. Checkout the integration guides.

Create more engagement

This image was rendered using Flayyer.io

# Remote jobs **and startup culture**

There may be a position at Flayyer for you. We would love to hear from you at [talent@flayyer.com](mailto:talent@flayyer.com)

No strings attached, try Flayyer for free. **No credit card required.**

Free Tier

For small project with few amount of pages to share.

Hobby

High volume for companies with many projects and websites to share.

Massive amount of images for popular and viral websites.

Scale

Contact us

If you are dealing with high traffic or you just don't want to worry about quotas, this plan might be for you.
We also include dedicated service for additional security and faster delivery times.

Flayyer Blog