DCAF-ISSAT e-Learning re-design

RE-DESIGN OF RESPONSIVE E-LEARNING PLATFORM

Responsive, adaptive illustrations and charts were created and uploaded into the platform as interactive SVGs (designed in Illustrator, then imported into Adobe Muse for interactivity and responsiveness). There are 4 versions for each illustration, based on device size breakpoints.

A system was designed to meet the needs of: end-users with differently sized devices, end-users with different connection speeds, internal editors (who need to upload background images and text, but have no access to graphics software).

Prior to detailed design (Hi-fi), a basic structure was developed on paper first, to work out how to accomodate text, background images and videos at different sizes, and how these would adapt to different screen resolutions, sizes and aspect ratios. These were then developed into clickable prototypes and tested with end-users on different devices, which gave front-end developers important clues for the correct sizing and placement of various elements.

Let’s Work Together!