TIM online textbook
Custom interface re-design of the online platform “TIM – The Interactive Material” for Aalto University. TIM is an online textbook platform that enables teachers to share not only written content, but also give students interactive exercises to further explain the lessons.
The re-design, done by Lisa Staudinger, was focused on improving the legibility of the textbook material on screen, as well as increasing the attractiveness of the platform for teachers and students alike. A combination of Source Serif, Source Sans [rather IBM Plex Sans, see comments] and Source Code Pro was chosen for this task.
With its highly readable shapes even in small sizes, and extensive number glyphs (many lessons on the platform contain complicated mathematical formulas), Source Sans Pro proved the perfect fit for the body text and additional UI elements. Headlines set in Source Serif Pro compliment the body text, and add a classic touch not often found in digital online learning materials. Source Code Pro is used for code snippets and exercises, since much of the material on the platform is programming related, as well as to clearly separate user comments from the main content.
The redesign had to be mostly cosmetical, without touching the actual underlying site-structure, as the custom Aalto University version had to stay as compatible as possible with the main branch of the platform at Jyväskylä University.
Screenshots from “Object-oriented programming in C++” and “Basic Course in C programming” courses, CC BY-NC-SA 3.0 Pasi Sarolahti, Essi Jukkala, Jussi Hietanen.
3 Comments on “TIM online textbook”
Aren’t the body text and UI elements set in IBM Plex Sans?
Thanks for catching this, John! The images indeed seem to show a combination of IBM Plex Sans with Source Serif and Source Code. Lisa, could it be the case that Source Sans was used in an early version, and eventually replaced by Plex Sans?
Oh, you’re right! I did indeed use Source Sans in my early Sketch Prototypes, but changed it later on in the actual implementation. Thanks for pointing it out!