Interactive Map
The Objective
Creating an interactive mockup of a fictional world map.
The Method
This interactive map mockup is a personal venture that I've converted into additional prototyping practice, which is of course an essential skill to have as a web designer and developer. I consider it one of my most extensive projects.
The first iteration, created in 2024, features forty total buttons integrated into the map. These buttons toggle a respective "description" window. It was not developed for mobile devices and thus the interactivity may only be viewed in a desktop browser, but the live preview can be viewed here.
Screenshot of the initial prototyping setup in Adobe XD.
Following the fantasy setting of the fictional world, the visuals of this first release would take on an elegant medieval style as well. Users are encouraged to interact with text buttons in order to explore different locales. Upon clicking a locale name, its description and a scenic image representing that specific territory are shown. The description window may be closed with another click.
Two years after the original was completed, I would decide to "remaster" this project with responsive web interactivity in mind. The map design received a sleek make-over - which can be seen at the very top of this page - and once completed, it will feature full JavaScript functionality!
The Lesson
While prototyping this project, I was compelled to view the experience from a user's perspective and solve problems accordingly. Questions such as "Is the design convenient?" and "Could the directions be simplified or improved in any way?" encouraged me to develop a sturdy and user-friendly interface. Constructing the map has also made me confident in my ability to design online user experiences.