Shakr Tips #15: Fonts

On today’s episode of Shakr Tips, we are going to talk about fonts.

0_t6c8uMOGxOmVu2yl.png

Fonts are important aspects of design. Given how important it is, many designers put a deep thought into how to make fonts work on their designs. We have some tips for you designers who are having a hard time finding the right fonts!

1. Select fonts that fit your design or concept

01_1.gif

Choosing the right font is something that designers spend most of their design process. The font in question has to both fit the style of the template, and be legible.

In Shakr, we consider versatility is the most important aspect in designing a template. If you are having a hard time finding the right font, starting with sans-serif fonts is always a safe bet, since they work well with most video design styles. (e.g. Montserrat, Bebas, etc)

2. Use identical fonts

download.gif

It is not recommended to use too many fonts on a single design. Using different fonts for each cut hinders not only the consistency of the overall design but also legibility. Having uniform font selection improves the legibility by having viewers’ eyes familiar to the font. Also, it helps with uniformity of design and gives stability and strong identity. It must be said if you have a clear objective by using different fonts, feel free to do so. But in most cases, using a single font is more preferable.

3. Design using hierarchy

While using the same font is all good, giving a small variation is also a good idea. It is just like when you read a magazine — if you used large and bold text for the headline, you may want to use smaller and thinner text, different color, or different font altogether for sub-headline or main text to give hierarchy to the design. This improves the way the message is delivered by helping viewers know where to look a lot faster.

4. Tips on legibility

It must be noted that legibility not just depends on just text, but also on images underneath the text. A quick solution to this would be adding Drop Shadow effect, or having a box around the text. Or, for more advanced methods, try utilizing Blending Mode or transforming text using other effects.

5. Text animations

download (2).gif

When watching a video, viewers’ eyes tend to follow the direction of motions. Thus, animation should be designed so that the eyes naturally follow the motion. If the animation is not designed properly, mismatching motion direction alone can throw off the viewer even if the text has solid legibility. The motion also should be long enough to give time for viewers to finish reading the text before going over to next scene.

This concludes our tips regarding fonts. Of course, there are plenty more on how to use fonts properly for video designs, and continued study only will make your skills more complete.

See you in the next episode!

Shakr Tips #14: Portrait

On today’s Shakr Tips, we would like to introduce you to a new aspect ratio, Portrait.

You may already know that videos with mobile-optimized aspect ratio are getting all the buzz today. That is because people usually hold their phones in the vertical orientation. While we already talked about Vertical (9:16) aspect ratio before, Vertical was not exactly fit for mobile since it has to fill the entire screen. That's where Portrait comes in!

 Facebook feed

Facebook feed

 Instagram feed

Instagram feed

Portrait has 4:5 aspect ratio, thus making it adequate for Facebook and Instagram feed. It leaves room for profile information on top so that it can induce users to learn more about the business.

Production

  • Length: Under 15 seconds
  • Size: 1080x1350
  • Audio: WAV

Tips

1-2.gif
  • Short video
    Given how fast the consumption speed is with mobile, users tend to stop watching videos in the middle even if that video is interesting. Try to make it under 15 seconds.
  • Design visually
    Since the video starts auto-playing without sound, the video must be designed in a way that people can understand the message without listening to the audio. Try to use text and design elements effectively.
2-2.gif
3-2.gif
  • Split design
    While mobile display can be small, ways to utilize it still can be infinite. Try to split up the display area into two or more to develop multiple stories at once.

Shakr Tips #13: Create to Convert

Today in Shakr Tips, we are going to learn about making C2C (Create-to-Convert) designs for Shakr.

C2C is one of Facebook Creative Shop’s creative strategies in which advertisers can use four short videos with simple motions and apply to DR campaigns. C2C consists of Basic Motion, Brand in Motion, Benefit in Motion, and Demo in Motion. In today’s post, we will learn about characteristics of each.

* Production tips: Aspect ratio for C2C video template should be mobile-optimized square(1:1), with the overall length, not exceeding 10 seconds, and the total number of images limited to five(including a logo image). You may have to take into the effect of repeated play of the video since it is very short.

Basic Motion

Basic Motion is used for the basic representation of your product or brand. It uses the most basic motions or transitions without having too many design elements.

Droplet-Basic-Motion_en (2).gif
Chime-Basic-Motion_en.gif
Easy-Basic-Motion_en.gif

Brand in Motion

Brand in Motion is a type of videos designed to emphasize the brand, by using methods such as showing brand logo in the first 3 seconds or keep exposing the logo throughout the video.

Droplet-Brand-in-Motion_en.gif
Chime-Brand-in-Motion_en.gif
Easy-Brand-in-Motion_en.gif
download.gif

Benefit in Motion

Benefit in Motion is designed for promotions of an event or a product. It is structured so that the text at the beginning can invoke viewers’ interest. One thing different from Basic Motion and Brand in Motion is that it has text at the beginning. Thus, it is advisable to put in more than two lines of text to have enough contents.

download (1).gif
Chime-Benefit-in-Motion_en.gif
download (2).gif
Jingle-Bells-Benefit-in-Motion_en.gif

Demo in Motion

Demo in Motion is designed to effectively demo apps, websites, products or feature. Since demo of products or features can be done through other designs, it primarily focuses on apps or websites. The easiest example would be designs utilizing mobile mockups or browsers for scenes from websites.

Droplet-Demo-in-Motion_en.gif
Easy-Demo-in-Motion_en.gif
KakaoTalk_20180111_153750949.gif
Untitled-2.gif

These are four types of C2C videos. Once you understand the structure, it should be not difficult to implement them into your design. Think of it as going through Variation process after finishing up a version.

However, one thing to keep in mind is that these structures are not the absolute answers, and you don’t have to make all four designs. Depending on how a user uses the design, Basic Motion can turn into Brand in Motion.

Or, you can boldly go where no one has gone before and make a new structure for yourself!

Shakr Tips #12: Peacock

Today in Shakr Tips, we are digging into Peacock, one of the recently added features in Shakr.

Did you know that you can represent your identity with colors? Users want colors that fit their brands. While Color Variation process does alleviate some of these users’ needs, but usually not enough. That is where Peacock comes in.

1.jpg
 Before applying Peacock

Before applying Peacock

 After applying Peacock

After applying Peacock

Peacock, just like peacock the bird which the name is from, allows users to change colors whatever the color they want. Video designs with Peacock have a color palette that users can utilize to change colors in a video design.

3.jpg

TIP

We recommend giving guides in Peacock texts, such as background color, text color, and CTA color. Also, we recommend applying Peacock on certain point elements or text, rather than on every aspect of the video.

* Please retain Color guide text under 18 characters, as the plugin will not recognize any name longer than that.

Example 1

 Before applying Peacock

Before applying Peacock

 After applying Peacock

After applying Peacock

Example 2

 Before applying Peacock

Before applying Peacock

 After applying Peacock

After applying Peacock

Quick Start

If you are having a hard time applying Peacock, start by downloading sample AE file below.

Use Peacock to let the potential of your video design fly!

Shakr Tips #11: Variation Tips 2

Today, we are going to continue learning more about Variation process, continuing with various Variation methods.

Color Variation

Users want colors that suit their brands. While we cannot satisfy with all the colors, just adding a couple of colors through Color Variation process gives users more choices and thus makes your design more effective. Changing either the design’s point color or theme color can change the video’s look significantly. (You can also use Peacock instead of Color Variation to include ability to change color as a feature. Please refer to our next post for more information.)

 Red

Red

 Yellow

Yellow

Text Variation

If there’s text at the bottom of the displayed section of a video, you can relocate it to other parts of the display, like top, center, and bottom. Also, you can make the text aligned to left, right, or center. Having various text locations under one video design helps you to be ready for users’ various needs with your video design.

 Text at the top

Text at the top

 Text at the middle (Original)

Text at the middle (Original)

 Text at the bottom

Text at the bottom

Structure Variation

Structure variation process transforms the original video design into another with completely different structure. For example, Reflector has several different versions with Overlay, Demo, Dynamic, Grid, and Text. Or, you can also add versions that support Carousels or Instagram Stories.

 Original (10 seconds)

Original (10 seconds)

original_Sequence+10_Sequence+10.png
 Demo + Testimonial

Demo + Testimonial

가로버전_02_Demo+Testimonial.png

Using structure storyboards, you can organize what kind of structure variation you want to give more efficiently.

There are a lot more variations to the Variation process, such as languages and fonts. Try various combinations to give a boost to your video design.

Shakr Tips #10: Varation Tips Part 1

Welcome to another episode of Shakr Tips!

Today, we are going to continue learning more about Variation process, starting with aspect ratios and length.

스크린샷 2018-04-26 18.18.12.jpeg

But first, let’s review what Variation process is from last post. The Variation is a process where designers can give partial changes to designs that they have already made. In today’s Shakr Tips, we will learn more about Variations to aspect ratios and lengths.

Aspect Ratio Variations

When you make a video design, you probably would make it in standard widescreen 16:9 ratio. However, as we discussed in previous posts of Shakr Tips, it is important to also consider more mobile-optimized aspect ratios, because they are more effective with most of the viewers who are on mobile. If you started with the widescreen ratio, it is easy to add variants in the square (1:1) or vertical (9:16). Of course, it can be done in vice versa.

 16:9 video (Widescreen)

16:9 video (Widescreen)

 1:1 video (Square)

1:1 video (Square)

 9:16 video (Vertical)

9:16 video (Vertical)

For example, here is VHS video design, in three variants. Just through simple aspect ratio Variation process, now we have three video designs. Aspect ratio variation is recommended as it means users can choose according to the platform they need.

Length Variation

This process changes video designs’ entire length. It is for users who have to think about different platforms which have different requirements in length.

 10 seconds

10 seconds

 20 seconds

20 seconds

 30 seconds

30 seconds

If your original design’s length is about 20~30 seconds, you can shorten it (around 10 seconds) or stretch it (around 60 seconds) through Variation. For example, above are 10-second, 20-second, and 30-second video designs from Reflector Original. These designs went through Variation process to have different lengths. As you can see, this was achieved by either cutting out some segments or repeatedly increase the number of shots to fit the length. This gives users flexibility when making their own videos.

We learned about Variation process in aspect ratios and length. We hope it was helpful in understanding how these work. It is simply about giving a little “variation”. Adding multiple video designs through simple Variation processes should also help with most importantly, your revenue.

We will continue our exploration with Variation process in the next episode of Shakr Tips!

Shakr Tips #9: Variation

Welcome back to another episode of Shakr Tips, where we feature useful tips to help you with designing effective videos.

Today, we are going to learn about variation, which can turn one design into various videos, without making a separate design.

Variation process plays an important factor in Shakr, where customers’ breadth of customization may be limited. Even making a few variations can give users a lot more choices.

What is “Variation”?

Variation is a process which gives a video design partially different versions with various lengths, colors, media types (images or videos), and structures.

refle.png

For example, Reflector Original design has gone through Variation process to have different lengths of 10, 20, or 30 seconds and each length has separate photo and video versions. These various versions give users to find video design of their exact needs, without designers having to make separate designs for each purpose.

refle_02.png

Also, designers can give changes to structure of the design, like the example that has Demo and Overlay versions in addition to Original.

This post covered basic concepts of Variation process. If you want to learn more, look forward to our next few posts of Shakr Tips containing more information about the Variation process!

 Landscape (16:9)

Landscape (16:9)

 Square (1:1)

Square (1:1)

 Vertical (9:16)

Vertical (9:16)

Here’s the sneak peek for next post, which is about achieving different aspect ratios of same video design through Variation.

Shakr Tips #8: Facebook Cover Videos

 WeWork Facebook

WeWork Facebook

Did you know that you can use videos as cover on your corporate page? A cover is regarded very important as it is one of the first contents that visitors see when they enter your page. Also, using videos as covers give the stronger identity of your brand, thus resulting in more effectiveness.

Production

  • Smallest size supported is 820x312 (pixels), and 820x456 is recommended. However, since size is automatically adjusted when uploaded to Facebook, 1280x720 video works as well.
  • Length should be around 20~90 seconds. You can also loop the video.
  • Wave file (.wav) is recommended for audio.

Tips

  • Since recommended size is fit for mobile, even if you upload by recommended size, top and bottom should be cut off a little. Thus, it is recommended to place the logo or slogan towards the center of the video so that viewers have no problems watching it from PC.
  • Facebook Cover videos will autoplay the video muted, and viewers have to manually turn on the audio. We recommend making a video that can deliver the message visually without the audio.
  • Length of Facebook cover video ranges from 20~90 seconds. Thus, it is important to show your brand in this range of time.
  • Given how fast the landscape of social media change in this age, we do not recommend sticking with one content for a long time. How about setting a period of your contents, and decide on which content would be suitable for different seasons?

I hope you got a greater understanding of Facebook Cover videos. Now you can make video designs that make charming interactions and provide ample experiences for potential customers!

Shakr Tips #7: Dynamic video ad

Today in continuing series of Shakr Tips, we are going to learn about dynamic video ad.

What is Dynamic video ad?

dynamic nike

https://vimeo.com/141515025

Dynamic video ad is marketing method of making targeted ad contents for a specific target audience. By making a specific video for a specific audience, dynamic video ads can achieve higher performance. Shakr is suited for dynamic video ads, as the whole platform is designed to perform easy A/B testing with one video design. Since most of the ads are exposed in mobile, we will use square aspect ratio video design as an example in this post.

Basic structure

As stated above, this video has mobile-optimized square aspect ratio. It is recommended to make the video simple and short(ten seconds maximum). Since we are not sure of how much text we need for each video, we recommend having maximum space for text as possible. However, if you want to retain some specific design elements, you can also make a little variation between video designs. For example, below are variations with either four lines of text or two.

dynamic_01.gif

While two videos are extremely similar, the text is now decreased to two lines, and has ranks according to the number of letters per line. The user can make simple video ad by utilizing a design that has a simple structure of just one scene, and fit for any text.

* Using just one cut is not a must. While having multiple cuts is possible, given the characteristics of dynamic video ads, we recommend using just one cut.

Transitions

We recommend sticking to single-cut video with single user media and text that suits the design. Unlike other videos that consist of multiple cuts, the dynamic video does not require transitions. It will be easier to design the template if you plan the structure in advance. Keep in mind that users would want to deliver their contents in various ways using your design in a preferably simple manner.

11.png

Sounds

Sound can be a cumbersome problem given how short the video is. You can start with Shakr-provided Epidemic Sounds’ SFX-STINGS menu to browse through audio sources that are designed with short length in mind. When you select a sound, keep in mind that short videos tend to loop numerous times.

  https://player.epidemicsound.com/#/

https://player.epidemicsound.com/#/

* It is important to find the sound that suits your design, rather than length. If the length doesn’t fit, you can always edit the sound.

Logos

01.gif

Making a space for logos is recommended as it is an effective way to advertise the brand. However, we recommend making an additional design that doesn’t have the logo, so that the user can choose between two.

Quick Start

Here are some sample After Effects projects for those having troubles with dynamic videos.

I hope you now have basic ideas about the dynamic video ad.
Next time, we will return with more Shakr Tips!

Shakr Tips #6: Tips on Making Vertical Videos

Continuing on the theme of vertical videos, today we would like to share few tips on making an interesting vertical video.

  • Short Video
    Given mobile ads has fast contents consumption speed, viewers tend to stop in the middle of a long video, even if the video is interesting. Also, keep in mind that Instagram Stories limits video length to 15 seconds.
  • Progress Display Design
    Using progress bar on the top of the screen, you can give a contrasting effect on movement in the ad. Using time display, it is possible to figure out how people are consuming your contents.

Instagram Business Blog

  • Suitable texts
    Given the vertical nature, it is recommended to use fonts that are narrow, (ex. Bebas) or design with several lines of text.
  • Visually appealing design
    Since the video plays by default without sound, the viewers should understand the message your video is trying to send by just seeing it with their eyes.
  • Split screen
    While mobile display is small, the ways to use that small display is limitless. Split the display in two or more sections to pace various stories at once.

This concludes our tips on vertical video production. Use these tips to create effective vertical video ad!