rihapat 236 Posted June 7 Ahoy Ylanders, The term "GOOD GAME UI" doesn't necessarily imply that the user perceives a smart or enhanced user experience. In fact, the best UI is achieved when the user does not think about it at all.Allow me to briefly outline our UI process for you in this diary. The initial phase of designing a new UI feature always involves extracting as much information as possible from the feature designer. This primarily entails understanding their vision and the intended user experience. The subsequent phase typically involves research and brainstorming. If similar features exist in other games, I review those UI visualizations and distill the vision into simple wireframes and sketches, based on those precedents, to avoid reinventing the wheel. These preliminary mockups (which I refer to as "grayboxes"), utilize mainly text and gray boxes to represent buttons, headers, tabs, text areas, scroll areas, etc. I use shades of gray because, for conveying UI ideas, nothing more in this phase than contrast and size is essential. These elements resonate universally. Colors I usually incorporate later, recognizing that color perception varies among individuals.If any ambiguity persists after discussing the mockups and the flow or user experience remains unclear to anyone, we turn to Figma prototypes - For those unfamiliar, Figma is a brilliant tool for facilitating idea communication among designers, UI programmers, and UI artists. Anyone can test the feature in a working prototype within a few hours. Once the design is crystal clear, I commence creating visual mockups tailored for the various platforms we support. This phase involves collaboration with the art director to ensure alignment with the visual style. Screen design is influenced not only by diverse display sizes (resolutions and aspect ratios) but also by the method of control: Touch display (mobile, tablet) Mouse + Keyboard (PC) Controller (Xbox, PlayStation) Controller + touch display (Switch) Each platform comes with its own set of rules and requirements, necessitating seamless and predictable accessibility for every aspect of the feature. For instance, standardized text sizes differ between mobile and PC, while mobile touch buttons are typically substituted with controller hint icons on consoles, and so forth. Subsequently, we create Unity Engine UI layouts based on the visual mockups. And let the UI programmers do their magic. Then comes the polishing phase – replacing placeholders, animating buttons, localizing texts, incorporating hover elements, adding subtle visual effects, fine-tuning transitions, etc. Following that, QA tests and optimization ensue. This phase often involves resolving numerous bugs, glitches, and incorporating implementation feedback from playtests. A particularly challenging scenario (my private nightmare) arises on Switch with russian language. Switch is using large standardized texts and other large UI element sizes with long texts alongside controller hints. That's it for today. Thank you and Stay Classy! 1 Share this post Link to post Share on other sites
