Visual guidelines (Countries websites)
Formats
- Use PNG for logos
- Use JPEG, SVG or animated GIF for images
- Use youtube for videos
Dimensions
Main navigation
- Spotlight = 360 x 224
- Highlight = 260 x 190
Page types
Solution pages (domain/subdomain/solutions) - Target Group pages - Content pages - Event Overview page - Homepage - Publication Overview page - Podcast Overview page - Video Overview page - Tool Overview page
- Hero image = 960 x 540
- Search image = 960 x 540
Resources
- Pillar page: Hero image = 960 x 540
- Blog article - Podcast:
- Main visual at the top of the page = 1200 x 800
- Visual within the text = 1200 broad
- White papers/guide/Studien/eBooks:
- Hero image = 1200 x 800
Blog posts - Press releases - Cases - Podcasts
- Main visual at the top = 1200 x 800
- Search image = 1200 x 800
- Overview image = 1200 x 800
- Specific for Case page:
- Logo = fixed height of 40, width depends on logo
Events
- Hero image = 1200 x 800
Tools
- Hero image = 1200 x 800
Person
- Image = 300x300
Paragraphs
Solution pages (domain/subdomain/solutions) - Content pages - Event pages - Homepage
- Content block section = 960 x 540
- 4X Content block= 960 x 540
- Call to action = 960 x 540
- In the spotlight: 120 x120 in png
- Teaser list/Data Block/USP block = 120x120 in png
- Icon tiles = 120x120 in png
- Multifeatures Block = 960 x 540
- Referral Link Block = 960 x 540
- Multi Sub Domain = 960 x 540
- Logo list = Please use the logos available in the Logos Bank, if the required logo is not available, please user the following Form
- The clickable logo list = Please use the logos available in the Logos Bank, if the required logo is not available, please user the following Form
Blog posts - Press releases - Cases - Podcats
- Text + media
- Main visual at the top of the page = 1200 x 800
- Visual within the text = 1200 broad
- Article content block = not a strict guideline, but 16:9 will work, advised pixel size for width is max 850
- Call to action = 960 x 540
Images upload is limited to 1 megabytes!
Naming conventions
The naming convention of the visuals has the following structure:
Description of the image in English_withd imagexheight image_position on the page
For example:
• Formula1_960x540
• People_laughing_during_meeting_1200x800
Do you want to make your website even faster?
Heavy images can slow down your website, to decrease the weight of your images, you can use: TinyPNG
