This is a UI reskin concept for Azgaar Fantasy Map Generator. It is a surface-level demo designed to introduce the design concept, so it is missing further parametric window options and overall polish.

It is built purely with HTML, CSS and JS just to demonstrate the UI/UX look and feel.

It introduces some new UX features but keeps the original UI/UX DNA largely the same as the original.

You can try it out here: https://landonikko.github.io/Fantasy-Map-Generator

Demo.mp4

Features

• Some core functions have been moved around, such as introducing a top panel with functional icons.

• The panel has a drag-bar, instead of drag-corner. There are also buffers, so the user can't drag the panel off screen.

• Toggling between the sidebar option resets the floating panel position.

  Demo_Panel_Drag.mp4

• Introducing a toggleable sidebar in a fixed position for a more balanced user experience, as navigating between panel settings dynamically changes its size, which can be frustrating.

  Demo_Sidebar_Toggle.mp4

• The sidebar also serves as a solution for mobile UI.

  Demo_Sidebar_Toggle.mp4

• The panel can still be hidden to see the map fully and have the panel be accessible.

  Demo_Panel_Hide.mp4

• Moved tooltips at the top for better visibility and introduced a toggle -option in the toolbar for quick accessibility.

  Demo_Tooltip.mp4

• Preset UI themes. The Legacy option isn't fully realized, but serves as a possibility.

  Demo_Panel_Themes.mp4

• Randomizing made more interactive with animation.

• Introducing a Back-button, instead of navigating to History.

  Demo_Roll.mp4

• Dropdowns have left and right arrow buttons for faster testing and navigation.

  Demo_Dropdowns.mp4

• Higher visual contrast with new icons and animation.

  Demo_Lock.mp4

• Same functionality with new flavor for organizing layers.

  Demo_Multiselect1.mp4
  Demo_Multiselect2.mp4

• Introducing a button style that is more visualized to function as radio.

  Demo_Radio.mp4

• Keeping slider functions the same.

  Demo_Slider.mp4

• Moved map Zoom reset from bottom to toolbar.

  Demo_Zoom_Reset.mp4

Motivation

The goal of this UI reskin prototype was to explore a new design direction for the Azgaar Fantasy Map Generator. This prototype is intended to enhance the user experience with an updated look while maintaining the original functionality and core design principles. It also served as a personal design challenge for fun.

At this time, I do not plan to continue the development of this prototype or branch it, unless there is community interest or approval from the original project creator. If you'd like to see further development, feel free to reach out and share your thoughts via the Discussions page on the main branch, or through the official Discord server (you can find me under the same username).