Devblog #1: UI and UX

Crossroads Inn 2 - Tavern Manager

Dive into Crossroads Inn 2, a real-time tavern management sim set in the vibrant fantasy realm of Delcrys. Customize and manage your inn, create intricate menus, and lead your staff to fame. Craft your tale, shape your world!

[h2][b]Hi Folks![/b] It's been a while since the announcement and we're ready to share some new details about the sequel to Crossroads Inn! [/h2] [h3]In today’s dev blog, we’d like to share the main goals and inspirations for the [b]UI/UX[/b] design in [b]Crossroads 2[/b]. [/h3] When we started designing the interface we knew that we needed to improve on the UI from the original game. We wanted it to be [b]more functional and clearer[/b] in conveying information and feedback that the player needs. However, we wanted it to retain a [b]Mediaeval-like feeling[/b], so that it remains in line with the game and the general visual aspects of it. [img]{STEAM_CLAN_IMAGE}/44304953/7be99a54afdff3ff816c831f44a1d5a073aa2b84.jpg[/img][i]Crossroads Inn vs. Crossroads Inn 2[/i] As you can see, the new UI design is [b]lighter, and smoother,[/b] while also being much clearer as to its functionality, details of objects, and so on. [h1][b]Main Inspirations[/b][/h1] [img]{STEAM_CLAN_IMAGE}/44304953/d487c55254cb6e299733135b92845d01f9693759.jpg[/img] As it often happens during a creative process, we went to some of our favourite games to find inspiration for the new UI. First of them was [b]Anno 1800[/b]. With its clear division of elements of the UI, it creates a functional system that’s not obscuring the game itself, while t[b]he colours, textures, and slight decorations create a visual feeling bringing the setting to life. [/b] [img]{STEAM_CLAN_IMAGE}/44304953/5630f3b901d4ea522dabe5695590fcceeb7d2540.jpg[/img] While completely different in mood, [b]Two Point Campus [/b]is another of our inspirations. The UI is not overly stylized and it conveys all the important feedback and information in a clear way, never leaving the player wondering what exactly is going on and where, how, and what they can do. [img]{STEAM_CLAN_IMAGE}/44304953/8a55fd35450e166afaf7d1b2d5206915876237df.png[/img] Another game worth a mention is [b]The Witcher: Monster Slayer.[/b] While it’s a game aimed at a different platform, the use of clearly defined icons and brackets, combined with aptly chosen textures and ornaments, creates a perfectly clear and yet climactic UI. [h1][b]New Look[/b][/h1] There are a couple of things that we wanted to change from the UI design of Crossroads Inn, and one of those is the colours - and textures. We also wanted to avoid design choices typical for most Mediaeval-set games wherein choices of colours and textures create a very heavy and morose atmosphere. There is no denying that that does fit many games, but in case of Crossroads Inn 2 we wanted the UI to be something that’s pleasing to look at not just within the setting of the game, but also aside from it, for when the player needs to forget for a moment about world immersion and focus on purely managerial, technical, and strategic elements. [img]{STEAM_CLAN_IMAGE}/44304953/60c5dd579b8dae8edbaec117b0272b5606cd5246.jpg[/img] [i]Colour palette and textures.[/i] Of course, keeping the Mediaeval tone of the UI was still very important for us. But to make it lighter, we decided to avoid [b]overabundance of dark colours or metal and stone textures.[/b] Instead, we chose b[b]eige and dark, navy blue, combined with paper, wood, and textile textures. [/b]We’ve also added some Medieval-inspired ornamental patterns to finally achieve a[b] clear, functional, but also era-appropriate UI. [/b] And, since the art direction is overseeing UI, 2D, and 3D graphics, it all fits together nicely, having been designed together simultaneously from the start. [h1][b]Functionality[/b][/h1] Taking into consideration all that we’ve learned from Crossroads Inn, and with new people on the team bringing new ideas, we’ve decided to step away from the UI of the original game which seemingly [b]favoured visuals over functionality[/b]. The visuals themselves also did not fit our vision for Crossroads Inn 2, so, in the end, we went in a completely different direction, creating a much clearer UI that makes the navigation much easier, while making the visuals [b]equally stylized, but in a more complex fashion.[/b] [img]{STEAM_CLAN_IMAGE}/44304953/89322dd129b891f0d27815a70b18ac4b927a4eda.jpg[/img] [i]Placing furniture in Crossroads Inn and Crossroads Inn 2.[/i] As you can see, the UI is much clearer, while also offering much more data and feedback to the player. [img]{STEAM_CLAN_IMAGE}/44304953/48bf93348fa76239686e32741f4d8b3907e1a571.jpg[/img] [i]Guest list and guest details in Crossroads Inn and Crossroads Inn 2.[/i] Aside from offering more information, the design ideas behind the new UI included avoiding creating empty spaces often present in the UI windows from the first game. [img]{STEAM_CLAN_IMAGE}/44304953/f7f75fb8cfcc4380911d8b82873d2368875a9093.jpg[/img] [i]Worker list and details (and worker promotion window) in Crossroads Inn and Crossroads Inn 2.[/i] As it’s been said - [b]more details, more data, everything much clearer.[/b] And last, but not least: event windows: [img]{STEAM_CLAN_IMAGE}/44304953/ca1b505a357ef5a1bba7ea0233590fe9378204ea.jpg[/img] [i]Crossroads Inn and Crossroads Inn 2 events.[/i] [b]Again - less empty space, clearer, and stylistically pleasing.[/b] [h1][b]Art Direction[/b][/h1] According to [b]Maja,[/b] our [b]Art Director[/b], the aim of the design team and the art direction is ‘[i]to create a unified but unique feeling of all the artistic aspects of the game - UI, 3D assets, and 2D illustrations. We are trying to find a sweet spot between the gray and grim medieval world and colorful and free realm of fantasy.[/i]’ Thanks to this clear vision, Crossroads Inn 2’s visuals are all working in tandem, bringing to life the same vision of the world, no matter if it’s through the guests that arrive in the inn, the graphics representing different elements, or the interface through which the player navigates. [h2][b]…and that’s it for today’s blog! Thank you for reading and if you have any questions, feedback, or opinions, we’ll be thrilled to read them. The comments section belongs to you! [/b][/h2] And keep an eye out for our next dev blog - there’s a lot more that we’d like to share with you! We've got one more thing, Here are some questions you've often asked: [b]FAQ: Question[/b]: Is the new system going to be more responsive than in the previous game? [b]Answer:[/b] Yes, one of our main goals was to make the UI clear and intuitive, while also providing the player with all the feedback they may need. [b]Question:[/b] Have you improved the readability of text from the original Crossroads Inn? [b]Answer: [/b]Yes, it was one of the more important items on our Fix-It list, since it is a management game with narrative elements, meaning the player needs all the information and feedback served in the most coherent way possible. Join us on Discord where you can ask devs directly about Crossroads Inn 2: https://discord.gg/gmrTUWsgpq