One of the largest over-arching development projects I am currently working on for AirlineSim is a general overhaul of the UI. This involves two parts:
- A technical upgrade - generally referred to as “gen-3” - that unifies how the UI is rendered across all parts of the game, including legacy bits (generally referred to as “gen-1” and “gen-2”).
- A visual upgrade that gives the game a fresh and more modern look, but that also makes it feel a tad more like a game and less like accounting software.
The first part has the highest priority, as it’s effectively a blocker for any new feature that is supposed to be built on top of gen-3. The visual part will happen over time and/or in the future.
In this post, I want to document the current state of development, near-term plans, known issues and anything else one should be aware of when playing with this preview.
State of development
As of 2026-06-25
- The page header (selected enterprise, main navigation, etc.) is rendered “client-side” by the new gen-3 framework and injected into all pages, regardless of framework generation, creating a single source of truth and removing code duplication.
- Next to the airline selector, a square logo placeholder showing the airline code as a fallback is displayed. The color is pseudo-random based on the airline name at the moment (see upcoming changes below) and it is also used for a gradient background effect across the whole header. Both the square logo and the background effect take inspiration from design work that went into the AirlineSim Technology Demonstrator.
- Structure and content changes of the page frame compared to gen-1/2
- The page footer has been removed and the elements it held have been rolled into the header:
- The game world name and game world end date are now combined in a header component that opens a menu with links to game world-specific pages, including the game world info popup.
- The language selector is now part of the “game menu” as by the time people arrive in a game world, their language should already be selected and changing it is a comparatively a rare event.
- The credit balance has also been moved to the account menu.
- The clock is now a header item.
- The main navigation has been expanded 5 menus.
- One item is the “database” menu that was previously located in the top header and that can be accessed without being authenticated or having an airline selected.
- The new Airline menu holds all pages regarding the company as such (HR, Finance, etc.)
- The Network menu holds all items that are concerned with planning, well, the network.
- The Fleet menu obviously deals with everything related to the fleet, including procurement and operations.
- The Distribution menu is about managing and actually selling the generated capacity and is the area were the most new features are likely going to be added in the medium term.
- The Help and Community menus from the former top header have been reduced in content and rolled into a single menu: It now points to the handbook, the game rules and support channels channels right next to community resources like Discord and forums. Links to social media channels have been dropped, the official blog is linked to from the game menu.
- The header now has a game world element that holds - besides the things mentioned above - the link to the simulation status as well as any settings/actions relating to a user’s account within the respective game world.
- The new “game menu” is the only remaining nod to the AirlineSim brand/logo as I felt like it’s not common for a game to wave its logo in front of people’s faces while playing, as the previous design did. The menu now holds the language selector, account operations not specific to the respective game world, the credit balance, links to news and the about page as well as legal information.
- The current version has moved to the account menu as well. When new release notes are available, a small indicator appears next to the account menu and next to the version number.
- The page footer has been removed and the elements it held have been rolled into the header:
- Mobile Adjustments
- The new UI frame features a much more mobile-friendly design, with more items directly accessible when the game is viewed on small screens.
- The main navigation collapses to a fixed nav bar at the bottom of the screen to be “thumb-reachable” on a smartphone.
- The currently selected enterprise and its cash balance are always visible, as are the search and mail icons.
- All other elements (help menu, game world, clock, account menu) are tucked away in a drawer that opens when clicking the “burger menu icon”.
As of 2026-06-26
- The mobile main navigation does not cover content at the end of long pages anymore.
- The game world menu now has a new item "World Homepage. It leads to the homepage that was previously reachable by clicking the AirlineSim logo in the upper left corner.
As of 2026-06-29
- The header on a (static) gen-1/gen-2 page now always matches the airline for which the page was originally loaded, even if the user has selected another airline in another tab.
- On desktop, the main navigation now opens on click rather than hover. This is so that on mobile, one does not have to close an open menu before being able to open another one. This is a constraint of the headless UI library we use and will be addressed in a future update of said library.
- Airlines with huge cash balances were not selectable due to a silent parser failure.
- A handful of changes in an attempt to reduce “flicker” during page-load.
- The mobile header/footer did not cope well with content that exceeds the page width. Case in point was the arrival/departure boards on the airport page. That particular issue has been fixed. If you come across other cases where the content is clipped horizontally without a way to scroll sideways, please let me know.
- The backdrop of legacy modals (like the turnaround info window) covered the new UI frame.
Upcoming enhancements/changes
- On desktop, the search field is merely an input field that redirects to the search page when submitted. On mobile, it’s just a link to said page. There’s a roadmap item for a proper inline search as it’s common practice in many web apps these days (search opens via hotkey, search results update on keystrokes, search results can be navigated to immediately).
- I might add a warning indicator on the account menu (similar to the “new version indicator”) when the credit balance drops below a certain threshold as it’s not permanently visible anymore.
- I might replace the current “generic” burger menu in the mobile view with the AirlineSim signet, just like the account menu in desktop mode.
- Eventually, the classic theme will be removed and the switch between dark and light theme will be possible from the game menu, including an option to pick the theme based on OS/browser preference.
- It will be possible to
- upload a square logo
- manually select a brand color to be used in the header (and potentially elsewhere)
- It might make sense to detect an airline change in another tab and show an overlay rather than just ensuring that the header on a static gen-1/gen-2 page always matches the airline the page was originally loaded for.
Known Issues/Limitations
Obviously (and as warned about in the May development update), the visual design is by no means finished and is subject to continuous iteration. There will be inconsistencies between the page frame and each page’s content for a while until we find the time for a proper design pass and/or seek external help for frontend design.- Since the page frame is rendered client-side, there might be flickers when navigating between legacy pages that are rendered server-side. This is because the page is already loaded and visible when the header is rendered. I’ll monitor how noticeable this is in production and will look into ways to make it less jarring if I get too many complaints
The gen-3 framework automatically reloads state sometimes, which means the “unread messages” counter might update automatically, for example. This is nice, but has the side effect that on static gen-1/gen-2 pages, the content on the page night not actually match the airline in the header when the airline has been switched in another tab. Will look into this asap.When scrolling all the way to the bottom on mobile, the part of the page behind the mobile navigation stays hidden.In the old design, clicking the AirlineSim logo would bring you back to the “game world homepage”. This is currently missing.New header covers parts of the turnaround info modal.The mobile navigation width scales with the page content if the content is too wide.The main navigation currently requires closing one menu before one can open another one. This is a limitation of the 3rd party library we use, but I’ll look into options.- Several users have reported issues with the search bar/icon on mobile.
Things to look out for
- Related to the general note regarding design inconsistencies: The classic theme is effectively deprecated and I only did the most basic adjustments to keep it working. Don’t expect any improvements here.
- Due to content adjustments, some items that have been previously localised in a community translation might now fall back to English until a new translation has been provided.
- I did my best to come up with sensible breakpoints for the mobile/reduced view on smaller screens. But there will likely be edge-cases that I missed. Please let me know if you find one.