Hi everyone
After tireless work from our frontend development team, we are very happy to finally introduce our newest user interface iteration to everyone starting today.
Key targets
In 2020 we launched a complete refresh of our design language. This year we set out to improve on that work and fix many of its shortcomings. In the process, the design language has received some major updates as well. Our objectives were clear:
- Drastically improve performance
- Increase modularity and extensibility
- Create a better user experience for everyone
Whatâs new
CfxUI Framework
Weâve built our UI framework including both a well-defined design system and a solid components library to serve us not only in the in-game UI but for all of our applications.
This framework started as a components library for our Cfx.re Development Kit, also known as FxDK, but has now matured into a full-fledged framework for building not only in-game UI, but also the web version of our servers list for FiveM and RedM (they will be updated soon!).
Using industry-leading tools such as React and MobX allowed us to make the framework fast and responsive, not only for end-users but also for our developers.
Home screen
Weâve iterated through a dozen of home screen layout and design iterations, starting with very radical changes to its layout in pursuit to make it both better for players and more appealing for server owners, but after receiving a lot of feedback from our most active users, decided that it was way too radical and eventually came up with only one big change.
The layout of the home screen has been kept the same, same familiar âPlayâ button and other navigation elements, but instead of always showing just one top region server, weâre now showing 10 of them.
We believe this change benefits both our players, giving them more immediate choices, and server owners that were previously struggling to get attention from players.
Servers list screen
While preserving the same familiar look, it is now lightning fast and responsive when it comes down to filtering and/or sorting the list, thanks to offloading these tasks to a background process.
Weâve also added a cheat sheet of what is possible when searching for servers.
The âDirect Connectâ functionality of the search bar has been reworked: type >
followed by the server IP address or join link, and the UI will react immediately. This functions the same as connect <ip>
!
Server details screen
The server details screen has been reworked to allow for more room to display important server information such as the DLC it is running on, current Pure Level, game mode name, map name, and other server-defined information.
Feedback, questions, and bug reports
Your feedback is important! As with every big update, weâre happy to hear about your input. Did you find any bugs? Perhaps you have an idea that would make the UI even better? Donât hesitate to let us know.
We hope you enjoy the new UI as much as we do!