Thumbnail Design

How to ensure your thumbnails are engaging and enhancing your application's brand experience.

Thumbnails: What are they and why are they important?

In a digital space where video content is a key aspect of the user experience, a thumbnail serves as a visual indicator of the theme of the various content you have on your platform. Thumbnails offer an introduction to what your audience can expect, enhance their understanding and set the stage for the content to follow. A well-designed thumbnail is essential for enriching user experience and showcasing your brand's unique identity.

In your application, when you upload your content into your Knowledge bank of the Knowledge Graph workflow, the content item will be unpublished.

Before publishing your content into the Knowledge Graph Workflow, you have the option to add a thumbnail image. This image will show on the content item’s card in the Content Discovery and Content Player features of your application.

Below is an example of how thumbnails will show in the user-facing front end of your application.

---

Designing Your Thumbnail

Things to be aware of:

• Embrace simplicity: A clean and straightforward design helps viewers quickly identify the content's theme.

• Always ensure brand consistency: Use visuals that not only reflect the content’s message but also reinforce your brand identity to build recognition and trust.

• Prioritise quality: Sharp, high-quality images reflect a professional image and high contrast between text and background ensures readability.

• Use colour wisely: Consider using colour to display the categories or themes of your content pool.

• Keep text to a minimum: Text on the thumbnail should be minimal and central, serving to complement the visual. Thumbnails will display at very small sizes at different points in a user's experience, especially when displayed in the Knowledge Assistant Segments panel.

• Always pay attention to accessibility: Use clear imagery that maintains its quality without becoming pixelated or blurry when scaled up or down. If including logos, icons or text, ensure they are visible and recognizable no matter the device.

---

Things to avoid:

• Don’t clutter your canvas: A busy thumbnail can obscure your content's message - too many images and text will make your thumbnail illegible.

• Don’t obscure your brand: Consistent branding is crucial for easy identification of your content and maintaining your brand experience.

• Avoid using screenshots of your video: Screenshots will often be unclear and blurred.

• Don’t neglect Composition: Balance and spacing are important, even when the title is separate.

• Avoid flashy or clickbait thumbnails: As the sole creator of content on your platform, your thumbnails should be easy to understand and show what the content is about, without being flashy or misleading. They should enhance your brand experience, not overwhelm the visual experience of your platform.

---

Optimising the Display of Your Thumbnail

• Pay attention to the aspect ratio: Thumbnails should be designed in a 16:9 aspect ratio which is the widely accepted standard for video players and display screens.

• Keep an eye on file size: When exporting thumbnails for configuration, keep the file size under 200KB to ensure you retain a quick loading time of your application without sacrificing the quality of the image.

• Test for Consistency: Test how your thumbnails on various devices to ensure the design communicates effectively across all platforms. You can do this easily by checking the preview of the Discovery part of the knowledge graph workflow.

---

Thumbnail examples

Below is an example set of thumbnails designed to represent a variety of content types and topics. As you’ll notice, these all use colour, line and imagery in a simple yet effective way.

Tools to Help You Design Your Thumbnail

There are many design tools available to help you design thumbnails - some more complex to use than others. For the purpose of thumbnail designs, we’d recommend the products listed below as these offer a variety of features for both novice and experienced users.

• Canva: This easy-to-use product offers an extensive set of features to help you design your thumbnails. It also has a variety of 16:9 templates to start with, which you can customise to your brand and content’s theme.
• Adobe Express: Much like Canva, Adobe Express allows you to design within the recommended aspect ratio. It offers a free tier with basic features and a premium subscription that includes access to Adobe's extensive stock library and more advanced design tools.

Remember, your thumbnail is not just an accessory to your content; it's an integral part of your brand experience that communicates your content's theme at a glance. By adhering to these design guidelines, your thumbnails will be both visually appealing and perfectly primed to deliver an exceptional visual experience to your users.