The guidelines are flexible and accommodate a broad spectrum of needs, while contributing to a recognisable expression across UiO's channels.
On this page you find an overview over general design principles for the design of posts.
You'll also find information on available ready-made UIO templates for social media, and instructions on how you can implement our design principles directly in the social media apps.
Do you need information about the creation and configuration of social media accounts?
Rules of thumb for designing posts in social media
The main principles of UiO's design profile should be used in all social media formats.
- Always use UiO's profile fonts and profile colours. Also, make sure to follow our?chart for universal design approved colour combinations for text and background.
- Text should always be left-adjusted, with defined margines
- UiO's photo brief should be followed as far as possible, also in social media.
Design principles
In the following we summarise the design principles you should follow when creating content for social media.?
Colours and colour combinations
Use only the colours included in?UiO's colour palette. See information on colour codes.
When choosing colours from the palette, you must also take accessibility into account. As a main rule, we recommend to using black text on light colours, and white text on dark colours.
You can also choose other colour combinations for text and background, but note hat there are a lot of profile colours that cannot be combined:?See overview of accessibility-approved combinations of text and background (Norwegian).
Font sizes
As a general guideline, we have defined font sizes that should cover most needs for both short and long texts. You can adjust the font sizes a bit up and down if needed.
- Heading (large) = 125 px/115%
- Heading (small) = 90 px/115%
- Body (large) = 70 px/115%
- Body (small) = 45 px/120%
Fonts
Swiss 721 is UiO's main font and should be used if possible. If you do not have Swiss 721 available, you can use Arial.?
Adjustment of text and margins
- All text elements on images must be placed to the left. Exceptions are subtitles in videos, which may be centred.?
- Content tags should as a rule be placed in the top.
- Headlines and subtitles should as a rule be placed in the bottom.
- Body text should as a main ruled be placed at the bottom, but can be placed anywhere along the Y-axis where it makes the most sense.
- There should be margins of 75 pixels on all sides.
Grids for different formats
The general design principles should be used in all social media surfaces, and here we illustrate how the principles apply to different standard formats.
Reels and safety zones on Instagram
For text to be shown properly in reels, it must be placed within the safety zone:
- top margin = 220px
- bottom margin = 420px
For text to be shown in thumbnails, it must be placed within the safe zone. The safe zone is 1080x1080px and must be centred vertically.
- Top margin = 220px
- Bottom margin = 420px
Dividing of surfaces
Surfaces can be divided in the middle, either by use of a contrast colour or an image. On vertical formats, the surface should be split at approximately 1/3.
Video and final poster
Guidelines for text on videos and final posters are described on the page about design elements for videos.
Variations in layout and expression
The following examples illustrate different options for variations in layout based on the design principles.
Examples
Ready-made templates for Photoshop and Adobe Express
We have created ready-made templates for Adobe Photoshop and Adobe Express that can be used for different types of social media content.
The templates are developed to facilitate a unified expression and strong identity across UiO's channels, while also making it easier to be creative and to adapt content to different channels.
If you'd like to use the templates, contact us at sosialemedier@uio.no.
If you use other tools, such as Premiere or Canva, we recommend creating an equivalent template in these. You find a summary of guidelines for setup of posts above.
Using the design manual directly in apps
For some tools, for example stories on Instagram, it can often be convenient to create content directly in the app.
- Open story-mode, and start with a blank canvas.
- Transfer an image of UiO's colour palette to the image gallery on your phone, and paste the image in story-mode.
- Eye-drop the wanted background colour from the palette.
- Press and hold on the story-background until the colour you have selected replaces the original background colour.
- Start creating a tag by writing text and choosing either black or white as text box coloir
- Write in the desired text and choose the app's standard Sans Serif alternativ.
- Scale and adjust the text.
- If necessary, copy and paste image in story mode.
- Adjust and place the elements.
- Left align the text elements.
