Design Guidelines

Introduction

A cohesive design is crucial for several reasons. First, it acts like a clear path through a big forest of information. With everything looking and working the same way, it's much easier for everyone to find what they're looking for.

But it's not just about finding stuff—it's also about creating habits. Cohesive design helps people develop learning routines. When things are consistent, it's like following a well-marked trail. It becomes natural to navigate and learn.

And here's something cool: the design also tells a story about the company. It shows its personality, its tone of voice, and its culture. Think of it like the colors and decorations in a house—they give you a sense of what the people living there are like.

So, cohesive design isn't just about making things look nice—it's about making them easy to use, helping people learn better, and expressing a company's values.

What should you consider when developing a design concept?

Consider your audience: An end-user-centric approach will help you develop a tone of voice that speaks to the public. Questions could be: What is modern and attractive for them? What connects them to the brand?
Branding Integration: Incorporate the company's branding elements, such as logos and brand colors, into images, videos, and uploaded materials to reinforce brand identity and familiarity.
Engaging Visual Content: Use visually appealing images and videos that effectively capture attention and convey information. Choose high-quality visuals relevant to the content and resonate with the target audience.
Consistent Tone and Messaging: Maintain consistency in tone and messaging across all visual content to reinforce key messages and create a cohesive user experience.
Regular Updates: Keep visual content up-to-date and relevant by regularly refreshing images, videos, and uploaded materials to reflect changes in content, branding, or industry trends.
The tone of voice/ Look and feel: What will the tone of voice be? Do you want to create a look and feel that is more corporate, fun, weird, unique, or interesting? Think about adjectives that best explain the look and feel you will be building.

Where do designs reflect in the app?

App Name & Logo (webapp only)

First decide on the name and logo of the app, which will be your foundation in developing look and feel.

Giving your app a special name serves more than just identification—it adds depth and purpose to the project. The name will also set the tone of voice and purpose to the platform. Example, would be instead of just have your brands name, you would add "[name of the brand] Academy".

Keep personalising your app with creating a logo, which will reflect the name of the app (if you chose to have one), your brand and the tone of voice, look and feel you are intending to build.

The name can max be 30 characters long. But the shorter, the better.

Logo Style

This logo will be displayed:

On the Sign in page.
In the sidebar menu.
App icon on the desktop or homescreen.

You can use the same logo for all 3 places or have different variations of it.

The requirements are: 1024x1024px and png.

Our advice for your logo:

Embrace simplicity so the icon doesn't seem cluttered.
Avoid text as it can be hard to read.
Graphical images instead of photos - as photos have too many details.
Use your logo or an artifact that's well-known by your audience.

Channel Structure & Images

Channels are like folders for organizing published articles based on theme or topic or functions as social feed . The goal is to make it easy for your audiences to find and engage your employees in your published content. Channel images should also reflect the look and feel you want to build.

Recommended ratio: The ratio of channel covers should be 1:1.3.
Recommended size: We advise that you use a minimum size of 312x408px.
We will automatically convert images to different sizes depending on the user's devices.

Here are some ideas on how different could different type look and feel of the channels look like: corporative, fun, corporative with twist, subtle.

Guides for article cover images

Article cover images should reflect the design of channels, to keep communicating the same message. Furthermore, articles should also guide a member to what information article consists.

Recommended ratio: The ratio of article covers should be 2,1:1.
Recommended size: We advise you a minimum of 800x360px or 1600x725px.
We will automatically convert images to different sizes depending on the user's devices.

PRO TIP: For similar content have similar article headline.

Visuals inside the article

Consider using videos and images and how it will complement the message. Visuals in the article tell a story and can funtion to reinforce what is sadi in the text, inspire and create a visually pleasing article.

We suggest to have horizontal visuals, as vertical ones can take over the whole screen on mobile devices unless the vertical picture tells a story.

If you have personalized GIFs you can also upload them in image block or use our embedded Giphy block.

Video Max Size: 500mb

Pictures as Quiz Options:

When adding pictures as answer options to a quiz question:

Recommended size & ratio: 1:1,6 or 844x510px / 1688x1020px.

Feed posts

If you use feed for news, campaign announcements the posts should also reflect the look and feel you are building with channels and articles.

Recommended ratio if one picture uploaded: 16:9
Recommended ratio if two pictures uploaded: 1:1
Recommended ratio if three plus picture uploaded: 9:16

Note: If there is more than one image, we will crop the images to the specified ratios to fit the carousel. However, users can still open and view the images in their original aspect ratios.

Summary

Visuals do two important jobs. First, they show what the company is all about, like its values and personality. Second, they help users find their way around the app. So, every image you see matches the company's vibe and helps you find what you're looking for. It's like having a map with pictures! This makes the app feel more like home for employees and helps them learn and connect better.