Skip to content

Image guidelines

Jump to bottom
Mika Tompuri edited this page Dec 4, 2024 · 19 revisions

This page gives you a rough guide for creating images for the platform.

Color palette

  • A reference for colors used in the MOOC platform UI elements: colors page.

  • For example the greens in palette are used widely across the platform.

  • Visual artists do not need to strictly use the palette colors. Feel free to experiment with colors that complement the palette colors.

  • NOTE: Some colors are currently missing from the palette, for example the exercise block blue. These will be added later.

Hero images

  • Large images that stretch from one of the students screen to the other.

  • Image format: .svg (Scalable Vector Graphics)

  • Smaller is better: Make hero images as small possible in file size.

  • Do NOT include a background color. Background color will be added in the course platform.

  • Only use images up to 1 MB (1000 KB).

  • Make images repeatable, pattern-like. This we can seamlessly repeat the same image on wider screens. OR Make image edges (left and right) end in the image background color. This way the image blends to the background on larger screens.

  • Leave space in the middle of the image for the title of the course (automatically rendered on top of the image by the system). See 5G MOOC hero image for example.

Landing page hero image

  • The first image that students see when they open the course material.
  • Format:.svg (Scalable Vector Graphics)
  • Size: Depends on the art direction, but if you want to use the full width of the screen: width 1920px and height 602px (ratio roughly 3.19). If you wish, you can make the image wider, but you'll have to keep the image height. See 5G MOOC hero image for example.
    2024-08-15_front_page_hero_image

Chapter front page hero image and (lesson) page hero image

  • The first image on the front page of a chapter and on each lesson page. Each page can have a different image.
  • Format:.svg (Scalable Vector Graphics) 2024-08-15_chapter_and_lesson_page_hero_image

Chapter card images

  • Chapter card images are displayed in the chapters grid on the course front page.
  • You can, for example, use the chapter hero image on chapter cards as well, or a variation of the image. This way the identity of the chapter stays consistent.
  • Do not place visual elements on the very edge of the image.
  • How to add chapter card images: Instructions on this wiki pageChapter cards and chapter images
  • Format: .svg (Scalable Vector Graphics) is recommended.
  • Size: width 528px and height 370px (ratio 1.43). Background color is applied and edited separately in the system. New ratio: width 528 px height 393 2024-08-15_chapter_card_images

Images on (lesson) pages

  • Images that are used
  • Format: Both vector (.svg) and raster (.jpeg, .png, etc.) images are ok.
  • Size: Maximum width 768px; the height is not defined - any height is fine as far it doesn’t break the aspect ratio of the image. 2024-08-15_body_text_image

How to make sure images work on the platfrom

Send images to the MOOC Center team to see that they work within the course platform. Alternatively add the images to the course platform yourself and notify the MOOC team, so they can check that the images meet the requirements of the platform.

Clone this wiki locally