🎨 The Power of Cohesive Design in Atobi

A cohesive design isn’t just about making things look good—it’s about creating a seamless experience that enhances navigation, builds habits, and reflects a company’s identity. 🚀

Let’s break it down! 👇

Introduction

A consistent design works like a clear path, guiding users smoothly through information. When everything follows the same structure and format, finding what you need becomes second nature.

Example: A uniform layout for articles ensures that employees can quickly scan for key information without confusion.

Repetition forms habits! When a platform is structured consistently, users learn how things work faster. 🎯

🔄 The result? A natural learning flow that makes it easier for people to absorb information, complete tasks, and engage with content over time.

Best Practice: Stick to a standardized format for images, fonts, and article structures to make learning and engagement more intuitive.

Design isn’t just about usability—it’s also about storytelling. Every color, font, and layout choice reflects the company’s values, tone of voice, and culture. 🎨

🏡 Think of it like a home: The decor, colors, and style of a house tell you something about the people living in it—just like a well-designed platform communicates a company’s brand identity.

✅ Example: A retail brand might use bright, energetic colors, while a corporate organization might prefer clean, minimalist layouts—both set the tone for how employees engage with content.

Key Considerations for Developing a Strong Design Concept

Creating a compelling design concept isn’t just about aesthetics—it’s about connecting with your audience, reinforcing your brand, and maintaining consistency. 🚀 A well-thought-out design enhances usability, engagement, and brand identity.

Let’s explore the essential elements to keep in mind when developing your design concept. 👇

1️⃣ Consider Your Audience 👥

Your design should be user-centric—tailored to the people who will engage with your content.

Ask Yourself:

What visual style resonates with your audience?
What modern and attractive design elements appeal to them?
How can the design reflect your brand while staying relevant to users?

Best Practice: If your audience is young and dynamic, a bold, playful, and interactive design might work best. For a corporate audience, a clean, professional, and minimalistic look could be more effective.

2️⃣ Integrate Branding 🎯

Your design should reflect the company’s brand identity—so that every article, image, or video feels familiar and recognizable.

Use company logos, brand colors, and fonts consistently.
Ensure images, videos, and materials align with the brand’s personality.
Maintain a cohesive design language across all content.

Best Practice: Think of your design as an extension of your brand’s voice—it should be instantly recognizable without needing a logo on every page.

3️⃣ Use Engaging Visual Content 🖼️

First impressions matter! The right images, videos, and design elements can capture attention and enhance engagement.

Best Practice:

✔️ Use high-quality images and videos relevant to the content.

✔️ Choose visuals that resonate with your audience and reinforce the message.

✔️ Keep visual storytelling in mind—your design should guide users through content effortlessly.

✔️ Avoid using generic stock photos—custom visuals that align with your company’s culture work best!

4️⃣ Keep Tone & Messaging Consistent 🗣️

Your tone of voice should match the visual identity to create a seamless user experience.

📌 Think About:

Should the design feel corporate, fun, quirky, or innovative?
What adjectives best describe the look and feel you’re creating? (e.g., bold, minimal, sophisticated, playful).
Are the text, colors, and layout reinforcing the same message?

Best Practice: A consistent tone and design make content more trustworthy and memorable.

5️⃣ Regularly Update & Refresh Visuals 🔄

Design trends, branding, and user expectations evolve. Keep your content fresh and relevant by regularly reviewing and updating your visuals.

📌 Why It Matters:

Outdated visuals can make your content feel irrelevant or untrustworthy.
A refreshed design keeps engagement high and prevents content fatigue.
New branding elements should be seamlessly integrated into updates.

Best Pratice: Schedule regular design audits to ensure your visuals stay aligned with company goals and audience needs.

By considering these elements, you’ll create a visually compelling, user-friendly, and brand-aligned experience that makes your content stand out! 🚀

Where Does Your App’s Design Reflect in Atobi?

Your app’s design plays a key role in branding, user experience, and engagement. 🎯 From the app name to the logo and interface, every design element sets the tone and ensures a cohesive look and feel.

App Name & Logo (Web App Only)

The app name and logo are the foundation of your platform’s branding and identity.

📝 Choosing the Right App Name

Your app name should be more than just your brand name—it should reflect its purpose.
- Example: Instead of just “Brand Name,” you could use “[Brand Name] Academy” to highlight a learning focus.
The maximum length for an app name is 30 characters—but shorter is better for readability!

Best Practice: A well-thought-out app name sets the tone of voice and helps users instantly recognize the platform’s purpose.

Logo Style & Placement

Your logo is one of the most visible elements of your app’s branding. It will be displayed in:

The Sign-In Page – The first thing users see when they log in.
The Sidebar Menu – Always visible for easy brand recognition.
App Icon (Desktop or Home Screen) – The shortcut icon for quick access.

📏 Logo Requirements

Size: 1024x1024px
Format: PNG

Note: You can use the same logo across all placements or create different variations for each.

Best Practice:

✔️ Keep it Simple – Avoid cluttered designs that make the logo hard to recognize.

✔️ Avoid Text – Small text can be difficult to read at smaller sizes.

✔️ Use Icons or Symbols – Graphic-based logos work better than detailed photos.

✔️ Stay On-Brand – Use your company logo or an icon your audience already knows.

✔️ A recognizable and clean logo strengthens brand identity and consistency across the platform!

By choosing the right name, logo, and branding elements, you create a seamless, professional, and engaging user experience! 🚀

Channel Structure & Images

Channels act as folders that help organize published articles based on themes, topics, or functions. They can also serve as social feeds to encourage engagement.

A well-structured Channel system makes it easier for employees to find relevant content—and a carefully chosen Channel image helps set the tone and reinforce branding.

Your Channel image helps set the mood and visual identity for the content inside. It should align with your brand and the purpose of the Channel.

📏 Image Guidelines

Aspect Ratio: 1:1.3 (Height: Width)
Minimum Size: 312x408px
Automatic Resizing: Images are adjusted automatically based on the user’s device.

Best Practice: Choose high-quality images that enhance readability and engagement.

The visual style of a Channel impacts how employees perceive and interact with the content. Here are some ideas on different Channel aesthetics:

🎯 Corporate – Clean, professional, and structured.

🎉 Fun & Playful – Bright colors and dynamic visuals to spark engagement.

🏢 Corporate with a Twist – A blend of professionalism and creativity.

🌿 Subtle & Minimalist – Soft tones and sleek design for a calm, refined look.

Best Practice: Select a design that fits the purpose of the Channel and keeps your branding consistent.

Article Cover Images

Your article cover images play a crucial role in engaging employees and guiding them to the right content. 🌟 They should not only look great but also align with your Channel design for a consistent and professional feel.

📌 A good cover image should:

Match the design of its Channel – Keeping a cohesive look makes navigation easier.
Visually represent the article’s topic – Giving employees an instant preview of what they’ll learn.
Encourage engagement – A compelling cover image draws people in to explore the content.

Best Practice: The right image reinforces messaging and makes your platform more intuitive for users.

✅ Recommended Image Guidelines

Aspect Ratio: 2.1:1
Minimum Size: 800x360px
Optimal Size: 1600x725px
Automatic Resizing: Images are adjusted automatically for different devices.

Best Practice: Use high-resolution images to ensure clarity across all screens!

By optimizing article cover images, you create a seamless, visually engaging, and well-structured experience that keeps employees informed and engaged! 🚀

Best Practice: For articles with similar topics, use similar cover images and headlines—this makes it easier for employees to recognize related content!

Using Visuals Inside Articles: Enhance Engagement & Storytelling

Adding images, videos, and GIFs to your articles is a great way to reinforce your message, inspire action, and create visually engaging content. 🎯 Well-placed visuals can clarify complex ideas, make content more memorable, and keep readers engaged.

📌 Visuals help to:

Tell a story – Images and videos can communicate concepts faster than text alone.
Enhance readability – Breaking up text with visuals makes articles more digestible.
Boost engagement – Visually appealing articles keep readers interested.
Support learning – Diagrams, step-by-step guides, and instructional videos reinforce knowledge.

Best Practice: Use visuals strategically—every image or video should complement and enhance the message.

🖼️ Choosing the Right Image Orientation

Use horizontal visuals – These display best on both desktop and mobile.
Be cautious with vertical images – On mobile, vertical images can take up the whole screen, unless they serve a specific storytelling purpose.

Best Practice: If using vertical images, ensure they add value rather than disrupt the reading flow.

Want to add personalized GIFs? You have two options:

Upload GIFs using an Image Block.
Use the Embedded GIPHY Block to insert fun, relevant animations.

Best Practice: GIFs are great for tutorials, reactions, and creating an engaging experience—use them wisely!

🎬 Video Guidelines

Max File Size: 500MB
Best for: Training, tutorials, product showcases, and engagement boosts.

Best Practice: If your video is too large, consider compressing it before uploading to ensure smooth playback.

When adding images as answer choices in a quiz, use the following guidelines for the best display:

📏 Recommended Size & Ratio:

1:1.6 aspect ratio
Minimum size: 844x510px
High resolution: 1688x1020px for optimal clarity

Best Practice: Well-chosen quiz images increase engagement and make quizzes more interactive and memorable!

By using the right visuals in the right way, your articles will be more compelling, easier to read, and more engaging for your audience! 🚀

Feed Posts: Keeping Your Visuals Aligned & Engaging

If you’re using the Feed to share news, campaign updates, or announcements, your posts should match the overall look and feel of your Channels and Articles. 🎯

Consistent visuals help strengthen your brand identity, improve readability, and create a seamless user experience.

📌 A well-designed Feed post should:

Reinforce brand consistency – Aligns with existing Channels & Articles.
Enhance readability – Ensures posts stand out and are easy to engage with.
Adapt to different formats – Images are automatically adjusted for the best experience.

Best Practice: Using the right image sizes prevents awkward cropping and maintains a polished, professional look.

🖼️ If Uploading One Image:

Use a 16:9 aspect ratio (wide format).
Best for: Single campaign posters, banners, or featured news images.

📸 If Uploading Two Images:

Use a 1:1 aspect ratio (square format).
Best for: Side-by-side comparison posts or simple campaign visuals.

📷 If Uploading Three or More Images:

Use a 9:16 aspect ratio (vertical format).
Best for: Story-driven content, behind-the-scenes glimpses, or multi-image storytelling.

📌 When you upload multiple images:

Atobi will automatically crop images to fit the recommended ratios.
Users can still open and view images in their original aspect ratio in full-screen mode.

Best Practice: Preview your images before posting to ensure key elements are not cropped out!

Summary: The Power of Visuals in Atobi

Visuals in Atobi serve two key purposes:

1️⃣ They represent the company’s identity – Every image reflects the brand’s values, personality, and culture. 🎨

2️⃣ They guide users through the platform – Thoughtfully chosen visuals act like a map, making navigation intuitive and seamless. 🗺️

When used correctly, images create a familiar and engaging environment, making the app feel like home for employees. 🏡 This strengthens learning, communication, and connection across the organization.

💡 The Takeaway? Visuals aren’t just decoration—they enhance usability, reinforce branding, and improve the overall user experience! 🚀