Building a Journey through Middle-Earth

Intro

Final project "A Journey through Middle-Earth" Mini Website for my Immersive Experiences I Design class. Had a lot of fun working on this and learned how to use Framer in depth. The website allows users to explore locations from Middle-Earth, drawing inspiration from The Hobbit and The Lord of the Rings books and movies.

Thought process...

I needed to decide how I was going to go about giving the user an actual useful guide to the universe of Lord of the Rings. What features should I add that would help expand the experience for someone who is new? What about someone who is already very familiar with Lord of the Rings?

I also decided to use Framer as my website builder as it offers a clean start with useful interface features and interactions.

First feature

I landed on creating my first feature which involved the map of the Lord of the Rings.

 

One of the main features of the website is an interactive map. When users hover over a location on the map, a label appears, and clicking on a location, like Mirkwood, scrolls the user down to a detailed card for that location.

 

This would help the user visualize the geography and locations of the universe, as well as something they can interact with and since it's tangible it can help them understand the map.

Design decisions

As I built out this project I wanted to focus on what the design of the project would be. What colors, typography and font evoke Middle-Earth? I went for an old map feel combined with an elegant green color, and without overwhelming the user the site still needed to be accessible.

I wanted a warm and handcrafted feeling, something that is inviting for people interested in the Lord of the Rings universe.

Thinking of a second feature...

The second feature I envisioned was the locations below the map, each with a snippet of text and a picture to help the user visualize what each location is.

The idea here is pairing visual cues with text so the user can connect the locations to what each place represents in the marker.

When you click on a location on the map, it would bring you down to the location.

What I learned

Setting out to create A Journey Through Middle-Earth helped me learn how storytelling and interaction design can create an immersive digital experience. I focused on translating the world of Lord of the Rings into a modern, usable microsite by balancing visuals with clear UX. The final result is an intentional and interactive guide that allows users to explore Middle-Earth in a intuitive and engaging way.