As part of my graduation internship I created these templates, to be used with e-learning modules by the teachers who create the modules for their classes. The templates are there to assist the teachers in the creation of these modules and to ensure the continuity of the corporate identities. There are two versions of the templates, one for the Radboudumc and one for the OOR-ON.

My entire graduation internship was graded with an 8/10, and the templates were implemented and are still in use today.

templates_lectora

A live display can be found here: Live Display Radboudumc
and here: Live Display OOR-ON

During my internship at Radboudumc I developed templates for Lectora Online, a program to create e-learning modules, following the styles and creating everything from scratch. I created an intuïtive and minimalistic design to keep the cognitive load as low as possible. For this I created wireframes, icons, buttons, everything except the logo. To achieve this I researched interaction design, cognitive load theory and UI design. You can view the wireframes and sketches at the bottom of this post.

For this I worked with Photoshop, CSS and JavaScript.

As mentioned, the icons for the buttons were designed and created by me as well. To illustrate them, here they are together. Most of these are not used in the templates but can be used by users to apply in their modules. The bottom row of the both sets is the mouse-over, with two of those in an on-click state. All of them have a normal, mouse-over and on-click state.

Icons and buttons for the templates.
Icons and buttons for the templates.

Gedurende mijn afstudeerstage bij het Radboudumc heb ik templates voor Lectora Online ontwikkeld, een programma waarmee e-learning modules gemaakt kunnen worden. Ik heb de huisstijl gevoelgd en afgezien van de logo’s alles zelf ontworpen en gerealiseerd. Ik heb hiervoor wireframes, iconen, knoppen, etc gemaakt. Ik heb vastgehouden aan een intu├»tief en minimalistisch ontwerp om de cognitieve belasting zo laag mogelijk te houden. Hiervoor heb ik mij o.a. verdiept in interaction design, cognitive load theory en user interface design. De wireframes en schetsen kunnen onderaan deze post worden bekeken.

Ik heb gewerkt met Photoshop, CSS en JavaScript.

Een live demonstratie kan hier gevonden worden: Live Display Radboudumc
en hier: Live demonstratie OOR-ON

De iconen en knoppen heb ik ook ontworpen en gerealiseerd. Deze komen niet allemaal terug in de templates maar kunnen door gebruikers van de templates gebruikt worden. Daarom staan deze ook in bovenstaande afbeeldingen. De bovenste rij van beide sets is hun normale status, de onderste rij de mouse-over. In de onderste rij zijn twee knoppen weergegeven in een on-click status. Alle knoppen hebben een normale, een mouse-over en een on-click status.

 

 

—- Wireframes and sketches —-

Wireframe of the version table of contents
Wireframe of the version table of contents
Wireframe of the version with table of contents
Wireframe of the version with table of contents
Sketches for icon design
Sketches for icon design
Experimenting with header colours
Experimenting with header colours