Image source map insect: used by the stationmaster’s home
Author: Justinmind
This is an era in which everything is getting faster. On the Internet, everything started to move, short videos became popular, and Gif charts have long occupied every corner of the network like viruses. Users use Gif diagrams to convey information, express emotions, and even record life. How can I not love the Gif chart?
But like all good things, quality Gif images are never easy to come by. Whether it’s creating a dynamic UI interface, a fun expression, or a fun little dynamic illustration, it’s not a simple matter to make sure it’s appealing enough to the user.
However, don’t worry, it’s tricky to design a competent Gif diagram. Next, share 10 tips to make your Gif diagram better.
1, do not provide extra invalid content
Although designers will invest more in the projects they love, when doing Gif dynamics, they should try to simplify the content while conveying the information. In general, less information can make you Get more freedom and possibilities when you animate!
Be sure to refrain from the urge to add a lot of content. When users watch your Gif diagram, they are easily overwhelmed by too much content, especially when you want to use Gif diagrams to convey specific emotions and feelings. Extra colors and content can easily weaken them.
Don’t over design. Designed around the core elements and palettes to make them unique and enticing.
2. Establish consistent vision in the Gif diagram
The Gif chart is the shortest movie in the world. You can use it to communicate branding.
You can use the brand’s color scheme to design it at the time of design, presenting the brand’s image, logo and other elements in the Gif diagram, allowing brands, businesses and products to be presented in a more dynamic way.
Users can use these elements to relate to the brand itself. Under certain circumstances and needs, Gif diagrams can help users understand the functionality of the product and other information, while branded color matching can reinforce this association.
For example, GE provides a very desirable atmosphere in the Gif map, sharing these interesting Gif diagrams in the official Tumblr, showing GE’s accomplishments in science and mechanical design. Use tags like #badassmachines to spread them more effectively on social media.
3. Delete all extra frames in the Gif diagram
When you design a Gif diagram, no matter which type of animation you use, there will always be some time in the Gif diagram. After creating the Gif diagram, you should adjust it, remove the extra, stop the difference. Frame.
Deleting extra frames, leaving only one of them, and adjusting the duration of the frame according to the state and rhythm of the animation, can reduce the size of the Gif and the pressure during playback.
Such an adjustment not only keeps the overall quality of the Gif diagram intact, but also reduces unnecessary space usage.
4. Maintain good accessibility when uploading Gif diagrams
As a designer, you should be familiar with the user community and remove visual content from the Gif diagram that may be distracting.
Most typically, if you are faced with a visually impaired user group and use screen reading or epilepsy, try to balance their needs, text content should be placed outside the Gif, displayed separately, and avoid frequent flicker effect.
A constantly moving Gif diagram will largely divert the user’s attention, especially when using multiple Gif diagrams in a single screen. If there is a large amount of text content, the colors and effects in the Gif diagram should be as close as possible to the number, as they may capture too much attention from the user.
Avoid automatic playback of Gif diagrams, which makes the user feel controllable and saves traffic.
5. Use the storyboard to sort out the contents of the Gif diagram.
Many times, the simple form of the Gif diagram itself makes it seem uncomplicated, but this actually makes many designers make mistakes. Usually, the Gif diagram itself is fascinating in its story, even if it is short, it also contains narrative, story, even complex transitions and changing transitions.
Basic story changes and elements, these are the basis for Gif diagram production. When designing animations, it is easy for us to forget these things. With the help of storyboards, we can help you better sort out the direction of the story, the changes in the lens, the direction of the plot, and the key plots and transitions worth noting.
Especially when you are not alone in making Gif diagrams, the entire team can use the storyboard to unify the progress, greatly improve communication and unification issues, and speed up the creative process.
6. If you use PS to make a Gif chart, be sure to keep it clean and concise.
When designing a Gif diagram, many designers choose to use PS to make it. On the one hand, it is enough habits and enough, but on the other hand, the layer management and production mechanism of PS itself is very easy to lead to confusion.
Element and layer management in PS need to be taken care of too much, so that when making Gif diagrams, adding or deleting or moving some content, it is easy to output an unsatisfactory and uncontrollable Gif diagram.
At the same time, if you don’t label the layer correctly, and then perform relatively complicated operations, it will easily lead to the same error as dominoes. What’s even more troubling is that after modifying a place, many subsequent layers need to be adjusted and modified, which will eventually lead to a lot of repetitive work.
Therefore, to make a Gif chart in PS, try to keep it clean and organized.
7. Increase creative elements and keep looping
Gif diagrams are automatically looped in most cases, and users are often happy to watch them for a long time, but it is not easy to make it smooth and natural.
If you want to keep the loop in the Gif diagram, then I suggest you start with a simple design element, such as geometry. This makes it easier to match the head and tail positions.
Creating a loop in a Gif diagram is largely a matter of wanting to retain the user, because any inconsistency and misalignment will be noticed, and not perfect enough to be smooth, it will make the user feel a sense of jumping out and remove the attention. This requirement also means that designers should pay attention to the design of each frame.
Of course, the end result of the effort is worth it!
8, the state of motion should remain blurred
The blur effect in the Gif diagram is actually consistent with the motion capture effect in the old camera. Many movements in the middle state are actually not so clear. And this is consistent with our vision. The image quality of cameras is getting higher and higher, but our eyes have not evolved rapidly.
In the Gif diagram, the number of frames is usually not too high. If the details of the image are always clear, it is easy to present the frame skipping. The moving object is properly blurred. It is closer to the details of our daily observations, thus making the Gif band. To get close to the effect of video shooting, users will feel real and wonderful.
9, Gif map should be as small as possible
As you know, social media, blogs, websites, emails, and even apps are big Gif users, and Gif images have penetrated into every aspect of our lives. However, the picture specifications are different in different places, and the usage scenarios are different. Therefore, Gif needs to be small enough to be compatible with different needs. Here are some ways to help you reduce the size of your Gif:
Try to keep the number of frames in the Gif graph within 150 frames, otherwise it will be limited in many places, because it is too big.
When exporting Gif diagrams, set the lossy compression between 5 and 10, which will compress the final image size to a greater extent. You can try more and try to find a balance between quality and size.
Use as few colors as possible. This is not just for design considerations, but less color can greatly reduce the size of the file, meaning that the Gif diagram can be smaller, or last longer, and load faster.
Try to avoid gradients. Whether transparency is turned on or off directly affects the size of the Gif map. If you want to make sure the file is not so large, try to avoid it.
10, design for mobile devices
In fact, you should also anticipate this precaution. Most of today’s users are spending a small amount of time on the mobile side of the screen.
When designing, pay attention to using smaller visual elements to avoid overloading smartphone user information. On the other hand, if some elements need to be more attractive to the user, you can use bolder colors, or with animation effects, you can.
At the same time, considering the display form of the picture material on the social media, the Gif chart can be designed to be square, so that it can be better compatible with different screens and different platforms, and is also convenient for cutting.
Conclusion
Gif diagrams are very interesting in design and creation, but they also have a lot of questions and techniques to be aware of. Fortunately, they don’t go beyond the designer’s skills. With these principles in mind, I believe you can design a better Gif diagram.