I am a visual communications designer. I help to automate the production of advertising and visualize marketing strategy.
What would you like me
to help you with?
Perfect video for social media
News feed in social media are endless and and overflowed with new information. It is hard to hold the full attention of a user on a post. In order to make Facebook users watch a video, show them your message before they get bored and continue scrolling.
There is the rule of thumb for the majority of videos on the internet-the shorter, the better. As this research shows, after two minutes the quality of our attention becomes significantly worse. This is why you should aspire to even shorter videos. Ii is good if it is less than one minute, but less than 30 seconds or around 15 seconds is perfect. Facebook recommends using video advertising with the duration less than 15 seconds.
It doesn’t mean that long videos shouldn’t appear on social media. TEDx, interviews and lectures on YouTube are great examples of the opposite. As a rule, such videos are published on the relevant platforms, not on social media, where these videos will be shown randomly or in accordance with a certain algorithm.
YouTube or your website are great places to immerse deeply into a certain topic, interview or a web-seminar
Here are some features of a successful video for social media:
- It’s short. Perfect duration is 5 to 30 seconds, up to one minute maximum.
- It attracts attention in the first 2 to 5 seconds. You should made users look at the video so that they stop newsfeed and focus on your video. Use analytics to experiment with it.
- Text in it should make people curious. We are interested in different things. Research of your audience will help you identify what the majority is interested in. Short and appealing text will help you hold the attention of viewers.
- It calls to action. It can be a call to buy a product/service or follow a link to know more.
- It is equally good with and without sound. It is very likely that people will watch your video muted. Use subtitles if there is a background speech in the video.
To sum up, the perfect video for social media can be watched during a very short timespan when a person has unlocked their phone. Users should notice this video in a mottled newsfeed. It has to be interesting, dynamic and should be highly informative.
There are many online platforms to check the look of an app showcase. I don’t use them as they aren’t integrated with the main graphic design tools (Photoshop, Sketch, Figma). It’s important to see the final result right away and not to upload draft versions multiple times. Currently I’m using mockups for Photoshop that I’ve promptly created for myself. They are not beautiful but serve me well.
In this post I’m going to share about my first try to make this mockup neat without losing its main function.
The mockup was created in Figma. It’s a conditionally free tool that fully functions in any browser. It’s useful to create interface and prototypes similar to Sketch. In contrast to Photoshop, it’s much faster. Figma works on Windows and iOS, while Sketch only works on iOS.
I decided to start with Figma so that the mockup could be used not only by designers but marketers.
The mockup is build with components, which are equivalent to smart objects in Photoshop. This allows to instantly update an icon regardless of its location. It works with screenshots, too.
Preview of the main pages graphics on App Store for iPad and iPhone
The mockup can show a preview of an app page, search page and an icon on the desktop for iPad (Pro, Air) and iPhone (7, X). You can use an old-fashioned way and send the preview pic to a chat for approval of add a user and discuss certain aspects of design directly in the layout.
Comments inside the layout
Export of graphics in accordance with technical requirements
The mockup enables you to export the graphics so that you can upload it to App Store. It’s handy if you create graphics using Figma.
You can modify the mockup, change the color of the device, the composition of the preview. The distance between screenshots is proportional to those on the app page. It’s handy when you need to draw pictures split on several screenshots.
How to use
Open this link, sign in/sign up, copy the mockup.
How to use Figma: export, components, layers panel
At Playcus, we test out video commercials. One of the options of such tests is the aspect ratio of a video. It is difficult to specify clearly which format will work in which case. Besides, different platforms require both vertical and landscape videos depending where they will be shown. In order to find out which format works better we need to work with as similar videos as possible. The only thing that might differ is form factor. Therefore, we need to create videos in several formats right away.
The main formats we work with are 1:1, 9:16 and 16:9. For Facebook and Instagram news feed we mostly use square and vertical videos. Landscape videos are better suited for videos at Google Play. This is the current situation in our case. Some changes are likely to happen over time.
Facebook Help page
Simple background is best suited for adaptation of very short and simple videos. In this case, homogenous background (color, gradient) fills out the whole area of the format, surrounding an animation enlarged to maximum extent.
When I work with this effect, I take square format as a basis. Then, I fit it into other format and fill empty spaces with certain effects (blur, glow, etc.) or nameplates with marketing materials (logotype, platform stickers, text or appeal).
This is a quick way to change the aspect ratio, you only need to choose a proper effect. Contents is the main thing for every video, so you don’t need to overload it and distract audience. I try to use the effects that direct a viewer's eye to the central part where the main action takes place.
Manual adaptation is the best way to change aspect ratio in terms of integrity of a video.
In this case, I create animation layer-by-layer, using precompositions: background, main action, text and marketing materials. I create the most suitable composition for each format. In this case, time is the price for high quality.
Sometimes I combine methods and manually prepare two formats while using a quick way to create the third one (see example below). Here we have a vertical video with a square surrounded with filling.
This way requires you to create a universal layer with the main action. Main elements should remain on the screen in different formats without changes. The layer with marketing materials should be created separately.
In order to better understand which part of the main animation will be cropped in all formats, I create a separate precomposition with the main animation. I put a grid with boundaries of all the three formats on top of it.
If video is dynamic, the audience will not notice the cropped interface and the out-of-frame logotype. The main rule is to keep action visible, closer to the center.
It is hard to predict which video will turn out to be more appealing for the target audience. Often the results of analysis are surprising. There is no universal way to change aspect ratio, as only one of them works out in each individual case. I try to create and cnahge videos as fast as possible to save time. However, in some cases manual adaptation works way better.
I have a terrible memory and get furious when I can’t recall where everything is. That’s why I am trying to develop storage guidelines which help me access the needed pieces of information and keep my mind out of the gutter.
I used to store all graphics decentralized, meaning that project graphics is stored it the project folder. It’s convenient of projects are very different from each other, as in the case for outsource work. As I am currently working for a product company and create product ads, I need at least the product graphics for every new commercial.
Library is a structured storage for all graphic elements where you can access needed graphics as quickly as possible.
How to organize library
Graphics in *.psd, *.ai and other source files consists of elements (layers, folders, smart-objects). After export, they become *.png, *.svg, etc. We store them somewhere to later import in an AfterEffects project and also organize them in folders and pre-composes.
If the structure of layers and folders in *.psd will be the same as in the AfterEffects project, and in every new project this structure will repeat, we can save much time. In such a case we don’t need to recall where the file is stored, how to import everything in the project and where to find the source file if we need to edit something.
Save as few nested folders as possible so that you don’t need to roam around them every time. You’ll have many folders in root directory, but this way you’ll make sure that the needed graphics aren’t hidden in the bowels of your folder system.
One folder should contain one object in all versions, skins and versions. Logotype, background, nameplate are objects.
There should be an editable source file in the folder along with the exportlable elements (for instance, logotype letters, graphic elements).
In the source file
*.psd source file should be structured in accordance with the general library guidelines. This will help speed up export of elements, as we won’t need to waste time on naming. It means that it’s better to name the *.psd-file itself as a library object with unique name and save it in the folder with the same name. It is necessary for “quick export *.png”. This is a Photoshop script which by default exports elements into the folder where the source file is stored and names them in the same way as in the source file.
A rule of thumb says that one folder should contain one source file (object) and many elements. Each element in the source file has to be separated by a layer, folder or smart object.
Here we name files by the “bottom-up” approach. First comes unique “element name_object name_project name”.
In the project
Project consists of two main sections:
OUTPUT – pre composes for output. Here you can find out more about my source file naming convention.
IMGs – copy of our library, where the structure must be identical to that on PC. It doesn’t mean that the you should import the whole library into the project, just the necessary elements.
Centralized graphic library eliminates the need to think where to save new graphic elements and where to look for the old graphics. If you work on a product, you’ll get more benefits from library than from decentralized storage system.