I worked on one particular project to explore different layout and styling options for a mini online course. The course in particular was a case study about Casco Viejo, a costal city in Panama. The vibe intended for this custom mini-course was frequently described as immersive and fluid.
Immersive
The opening activity in each section is full-screen, including a colorful video of the city, a map of important landmarks, and a large interactive graph.
Fluid
Two immersive features, the introductory video and the full width graph, stick to the right of the screen as a learner scrolls. This is intended to make it easy to refer back to the core material of a section while also reading through more detailed information.
Get a sense for the whole project in the video below. I've stitched together screens from the exploration to show a general idea of the types of interactions I envisioned.
Final Thoughts and Reflection
With more resources, I would test this design with a scroll heat-map to see how frequently learners scrolled past content versus stopping to play with interactive elements and read chapters paired with photography or graphs.
Additional concerns include the hidden sidebar navigation. I would want to know how frequently a learner refers back to the sidebar to understand whether the chapter titles should be visible at all times or if they are distracting and encourage skipping ahead.
As of September 2017, I have tentative plans to collaborate with an experienced front-end developer to bring this vision to life. I look forward to sharing the results!