{"id":4690,"date":"2018-04-23T16:30:23","date_gmt":"2018-04-23T13:30:23","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=4690"},"modified":"2023-07-24T11:42:20","modified_gmt":"2023-07-24T11:42:20","slug":"case-study-real-racing-ux-ui-design-for-mobile-game","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/case-study-real-racing-ux-ui-design-for-mobile-game\/","title":{"rendered":"Case Study: Real Racing. UX and UI Design for Mobile Game"},"content":{"rendered":"<p><span style=\"color: #333333;\">The process of creating a mobile app UI design is usually focused on solving a problem or helping users to satisfy their needs, so designers have to think much about how to support the utility of the digital product. But what if UI is designed for pure entertainment, does it make any difference? Today we offer you to check the UI\/UX design flow for a mobile game called <a style=\"color: #333333;\" href=\"https:\/\/itunes.apple.com\/us\/app\/real-multiplayer-racing\/id1288436698?mt=8\" rel=\"nofollow\">Real Multiplayer Racing<\/a>.\u00a0One of our recent case studies showed a <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-real-racing-graphic-design-for-mobile-game\/\">big set of illustrations<\/a> for this game, so let&#8217;s continue the story to check how the bright mobile app user interface was created.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7654\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/racing-mobile-game-graphic-design-case-study-tubik-1-1.jpg\" alt=\"racing mobile game graphic design\" width=\"1500\" height=\"1000\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/racing-mobile-game-graphic-design-case-study-tubik-1-1.jpg 1500w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/racing-mobile-game-graphic-design-case-study-tubik-1-1-300x200.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/racing-mobile-game-graphic-design-case-study-tubik-1-1-768x512.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/racing-mobile-game-graphic-design-case-study-tubik-1-1-1024x683.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/racing-mobile-game-graphic-design-case-study-tubik-1-1-150x100.jpg 150w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Task<\/span><\/h2>\n<p><span style=\"color: #333333;\">UI design for a mobile racing game<\/span><\/p>\n<h2><span style=\"color: #333333;\">Process<\/span><\/h2>\n<p><span style=\"color: #333333;\">What is a game interface? Among the basic features for a mobile game UI design, both designers and users would definitely mention:<\/span><\/p>\n<ul>\n<li><span style=\"color: #333333;\">\u00a0player&#8217;s information: the profile, leaderboards, <a href=\"https:\/\/blog.tubikstudio.com\/onboarding-tutorial-design-greet-inform-engage\/\">tutorials<\/a>, data on progress and bonuses<\/span><\/li>\n<li><span style=\"color: #333333;\">&#8220;pre-play&#8221; screens: selections and settings of all kinds, for example, choosing the characters, weapons,\u00a0vehicles, routes and the like<\/span><\/li>\n<li><span style=\"color: #333333;\">&#8220;play&#8221; screens: the flow of actual gameplay<\/span><\/li>\n<li><span style=\"color: #333333;\">&#8220;post-play&#8221; screens: data about results of the level, &#8220;game over&#8221; screens or pop-ups, etc.<\/span><\/li>\n<\/ul>\n<p><span style=\"color: #333333;\">Designing game UI, creators are able to find the\u00a0shortcuts making the user flow simple and pleasant. Isn&#8217;t that what users typically expect from the games? Players aren&#8217;t ready to spend much time fiddling with unclear navigation, they want it intuitive and bringing them right to the game process &#8211; that is what game interface designers have to keep in mind.\u00a0For the mobile game UI design,\u00a0there&#8217;s also another challenge: comparing to video and computer games, designers deal with much less screen space.<\/span><\/p>\n<p><span style=\"color: #333333;\">The designer assigned to create the mobile game interface design for the project was Ludmila Shevchenko. Let&#8217;s check the creative flow.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8788\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/tubik-studio-Ui-UX-designer.jpg\" alt=\"tubik studio UI UX designer\" width=\"1500\" height=\"1000\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/tubik-studio-Ui-UX-designer.jpg 1500w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/tubik-studio-Ui-UX-designer-300x200.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/tubik-studio-Ui-UX-designer-768x512.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/tubik-studio-Ui-UX-designer-1024x683.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/tubik-studio-Ui-UX-designer-150x100.jpg 150w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">UX Design<\/span><\/h2>\n<p><span style=\"color: #333333;\">As well as with any business, educational or utility app we designed here in Tubik, the game UI design process started from <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/ux-wireframing-bedrock-of-interface-usability\/\">UX wireframing<\/a>. That is the stage when the designer lies the foundation of interactions and navigation. Wireframes present the set of monochrome\u00a0screens to think over the layout and transitions before considering the appearance and style. No images and animations, schematic icons and basic typography &#8211; all that enables designers to discuss all the flow of interactions simply and effectively. UI design in mobile games, whatever bright and entertaining it is intended to be, also needs that stage. Here you see some of the screens for the Real Racing game.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8793\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-UX-design.png\" alt=\"mobile game UX design\" width=\"1854\" height=\"1152\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-UX-design.png 1854w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-UX-design-300x186.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-UX-design-768x477.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-UX-design-1024x636.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-UX-design-150x93.png 150w\" sizes=\"auto, (max-width: 1854px) 100vw, 1854px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">The first screen (left to right) featured the game screen layout: hitting the CTA button, users started the game; under it, they saw the button connecting them to the invitations from other users to race together. The top part of the screen showed the basic data: petrol bar, number of coins, vehicle shop and notification, while the bottom part of the screen provided access to settings and leaderboard.<\/span><\/p>\n<p><span style=\"color: #333333;\">The second screen featured the process of car selection: the slider of cars swiped left and right showing the information about the particular car below it. Also, users could select the color for the car and hitting the button, select it for the game.<\/span><\/p>\n<p><span style=\"color: #333333;\">The third of the presented screens showed the functionality of challenging friends. The full name of the game is Real Multiplayer Racing, so users may not only have fun as lonely racers playing within limited time and petrol supply but also imitate a real competitive race with other players. The layout featured the cards of players informing how many of them are ready.<\/span><\/p>\n<p><span style=\"color: #333333;\">When all the interactions were agreed upon and tested, the designer continued to work on the UI design stage. It intended to make the already set interaction flow get a nice and catchy appearance and emotional appeal.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">UI Design<\/span><\/h2>\n<p><span style=\"color: #333333;\">Working on UI solutions, the designer started from color scheme options to try which one will correspond better to the client&#8217;s vision of the game style. So, the client was offered two different variants: one was based on warm color palette including much orange and red associated with fun and speed while another used cold colors combination, mostly based on blue,\u00a0belonging to the most popular among the <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/color-in-design-influence-on-users-actions\/\">users&#8217; favorite colors<\/a>. The graphic design assets such as diversity of vehicles, signs, weapons, obstacles and the like, were also designed from scratch for the game to give it fresh and original look &#8211; you can check all the illustrations in our <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-real-racing-graphic-design-for-mobile-game\/\">previous case study<\/a>.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8790\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-design_UI_Concept_1.png\" alt=\"mobile game design_UI_Concept_1\" width=\"1854\" height=\"1238\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-design_UI_Concept_1.png 1854w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-design_UI_Concept_1-300x200.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-design_UI_Concept_1-768x513.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-design_UI_Concept_1-1024x684.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-design_UI_Concept_1-150x100.png 150w\" sizes=\"auto, (max-width: 1854px) 100vw, 1854px\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>The style concept based on warm colors<\/em><\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8791\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-design_UI_Concept_2.png\" alt=\"mobile game design_UI_Concept_2\" width=\"1854\" height=\"1238\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-design_UI_Concept_2.png 1854w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-design_UI_Concept_2-300x200.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-design_UI_Concept_2-768x513.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-design_UI_Concept_2-1024x684.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-design_UI_Concept_2-150x100.png 150w\" sizes=\"auto, (max-width: 1854px) 100vw, 1854px\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>The style concept based on\u00a0cold colors<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">The client liked the idea of the cold color palette but wanted to add the feeling of night races in visual performance. So, the next iteration brought the final look based on the <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/light-or-dark-ui-tips-choose-proper-color-scheme\/\">dark color scheme<\/a>: it added the proper emotional appeal, set the needed atmosphere and gave the deep stylish visual perception of the graphics. Gradients based on the colors of the selected cars imitated the feeling of beaming reflections on the night road. Here are some of the screens.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8797\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/ui-design-for-mobile-game-racing.png\" alt=\"ui design for mobile game racing\" width=\"1854\" height=\"1238\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/ui-design-for-mobile-game-racing.png 1854w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/ui-design-for-mobile-game-racing-300x200.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/ui-design-for-mobile-game-racing-768x513.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/ui-design-for-mobile-game-racing-1024x684.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/ui-design-for-mobile-game-racing-150x100.png 150w\" sizes=\"auto, (max-width: 1854px) 100vw, 1854px\" \/><\/p>\n<p><span style=\"color: #333333;\">You can see that all the presented screens had multiple buttons so the designer used different colors so that users could distinguish them: the button connected to the start of the game has been the major element in the layout contrasting with the secondary options. The icons were also designed in a style setting harmonic visual combination with other graphics.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8789\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/game-ui-design-mobile.png\" alt=\"game ui design mobile\" width=\"1854\" height=\"1152\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/game-ui-design-mobile.png 1854w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/game-ui-design-mobile-300x186.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/game-ui-design-mobile-768x477.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/game-ui-design-mobile-1024x636.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/game-ui-design-mobile-150x93.png 150w\" sizes=\"auto, (max-width: 1854px) 100vw, 1854px\" \/><\/p>\n<p><span style=\"color: #333333;\">The background of various screens used the diagonal lines providing the visual association with race tracks. Above, you can see the flow of challenging other players for a game in the multiplayer mode.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8795\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-ui-design-racing-game.png\" alt=\"mobile ui design racing game\" width=\"1854\" height=\"1152\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-ui-design-racing-game.png 1854w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-ui-design-racing-game-300x186.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-ui-design-racing-game-768x477.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-ui-design-racing-game-1024x636.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-ui-design-racing-game-150x93.png 150w\" sizes=\"auto, (max-width: 1854px) 100vw, 1854px\" \/><\/p>\n<p><span style=\"color: #333333;\">This set of screens features the process of car selection: slider lets the user swipe the options and quickly review their characteristics. Having chosen the model, the user can also select the desired color. As you can see, the designer applies the approach of <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/light-or-dark-ui-tips-choose-proper-color-scheme\/\">mixed background<\/a>: the cars are shown on the light background while the rest of the information and controls are on the dark one. It creates an interesting contrast and provides harmonic separation of content on the screen layout.\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/266112605?title=0&amp;byline=0&amp;portrait=0\" width=\"320\" height=\"570\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Also, the process of car selection was supported with interesting animation of spinning cars, adding fun and making the interaction lively, as you can see above.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8798\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/ui-design-mobile-game-interactions.png\" alt=\"ui design mobile game interactions\" width=\"1854\" height=\"1152\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/ui-design-mobile-game-interactions.png 1854w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/ui-design-mobile-game-interactions-300x186.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/ui-design-mobile-game-interactions-768x477.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/ui-design-mobile-game-interactions-1024x636.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/ui-design-mobile-game-interactions-150x93.png 150w\" sizes=\"auto, (max-width: 1854px) 100vw, 1854px\" \/><\/p>\n<p><span style=\"color: #333333;\">Above you see the finalization of the pre-play stage for the multiplayer game, the actual screen of the game with a progress bar in the bottom part, and the results screen. The results screen contains a social element: users can share their results right to their social networks, which is great support for growing brand awareness and spreading the word about the app. Fonts do not look too serious but are tested to provide a high level of <a href=\"https:\/\/blog.tubikstudio.com\/ux-design-readable-user-interface\/\">readability<\/a>.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8794\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-ui-design-racing-game-application.png\" alt=\"mobile ui design racing game application\" width=\"1854\" height=\"1152\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-ui-design-racing-game-application.png 1854w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-ui-design-racing-game-application-300x186.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-ui-design-racing-game-application-768x477.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-ui-design-racing-game-application-1024x636.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-ui-design-racing-game-application-150x93.png 150w\" sizes=\"auto, (max-width: 1854px) 100vw, 1854px\" \/><\/p>\n<p><span style=\"color: #333333;\">No secret, leaderboards play a big role in user motivation, especially in game apps. So, the leaderboard screens of the app gave a user the idea of the best players and their progress and enabled to invite them to the game right there.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8796\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/UI-design-for-a-mobile-game.jpg\" alt=\"UI design for a mobile game\" width=\"1500\" height=\"1000\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/UI-design-for-a-mobile-game.jpg 1500w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/UI-design-for-a-mobile-game-300x200.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/UI-design-for-a-mobile-game-768x512.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/UI-design-for-a-mobile-game-1024x683.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/UI-design-for-a-mobile-game-150x100.jpg 150w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/p>\n<p><span style=\"color: #333333;\">User interface design for a mobile game is an interesting challenge. The project on Real Multiplayer Racing was a bright experience in Tubik history: as well as other game applications, it showed that even entertainment and fun need thorough work on style, navigation, and transitions, deep analysis, and testing, attention to details and original approaches. The combination of these factors will make the players happy and allow the game to stand out in the world of tough competition.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Useful Case Studies<\/span><\/h2>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">If you\u00a0are interested to see more practical case studies with creative flows for\u00a0UI\/UX\u00a0design, here is the set of them.<\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-manuva-uiux-design-gym-fitness-app\/\">Manuva. UI\/UX Design for Gym Fitness App<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-cuteen-uiux-design-for-mobile-photo-editor\/\">Cuteen. UI\/UX Design for Mobile Photo Editor<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-tasty-burger-ui-design-for-food-ordering-app\/\">Tasty Burger.UI Design for Food Ordering App<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-watering-tracker-ui-design-for-home-needs\/\">Watering Tracker. UI Design for Home Needs<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/ui-experiments-options-for-recipe-cards-in-a-food-app\/\">UI Experiments: Options for Recipe Cards in a Food App<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-home-budget-app-ui-for-finance\/\">Home Budget App. UI for Finance<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-night-in-berlin-ui-for-event-app\/\">Night in Berlin. UI for Event App<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-big-city-guide-landing-page-design\/\">Big City Guide. Landing Page Design<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-vinnys-bakery-ui-design-for-e-commerce\/\">Vinny\u2019s Bakery. UI Design for E-Commerce<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-upper-app-ui-design-for-to-do-list\/\">Upper App. UI Design for To-Do List<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-health-care-app-ui-for-doctors\/\">Health Care App. UI for Doctors<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-toonie-alarm-app-ui-design\/\">Toonie Alarm. Mobile App UI Design<\/a><\/span><\/p>\n<hr \/>\n<p><span style=\"color: #333333;\"><em>Welcome to read the case study on <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-real-racing-graphic-design-for-mobile-game\/\">graphic design for Real Multiplayer Racing<\/a><\/em><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The case study shows the flow of UX wireframing and UI design for a mobile game application Real Multiplayer Racing: screens, interactions and bright layout details.<\/p>\n","protected":false},"author":3,"featured_media":8792,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4,6,9],"tags":[256,502,277,503,319,515,322,580,324,602,327,603,20,329,604,57,331,108,390,144,440,147,457,201,464,202,465,203,466,204,485,212,492],"coauthors":[],"class_list":["post-4690","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case_study","category-illustration","category-ui_ux","tag-interaction-design","tag-ux","tag-ios-game-design","tag-ux-design","tag-mobile-app","tag-uxui","tag-mobile-design","tag-tubik-arts","tag-mobile-design-inspiration","tag-game-design","tag-mobile-game-design","tag-game-art","tag-app-design","tag-mobile-screens","tag-game-illustration","tag-case-study","tag-mobile-ui","tag-design-case-study","tag-racing-game","tag-design-services","tag-tubik","tag-design-studio","tag-ui","tag-game-app","tag-ui-design-case-study","tag-game-ui","tag-ui-design-examples","tag-game-user-interface","tag-ui-design-inspiration","tag-gamification","tag-user-experience-design","tag-graphic-design","tag-user-interface-design"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Case Study: Real Racing. UX and UI Design for Mobile Game<\/title>\n<meta name=\"description\" content=\"The case study shows the flow of UX wireframing and UI design for a mobile game application Real Multiplayer Racing: screens, interactions and bright layout details.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/case-study-real-racing-ux-ui-design-for-mobile-game\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Case Study: Real Racing. UX and UI Design for Mobile Game\" \/>\n<meta property=\"og:description\" content=\"The case study shows the flow of UX wireframing and UI design for a mobile game application Real Multiplayer Racing: screens, interactions and bright layout details.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/case-study-real-racing-ux-ui-design-for-mobile-game\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2018-04-23T13:30:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-24T11:42:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-ui-design-case-study-tubik.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"1000\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marina Yalanska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marina Yalanska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-real-racing-ux-ui-design-for-mobile-game\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/case-study-real-racing-ux-ui-design-for-mobile-game\/\",\"name\":\"Case Study: Real Racing. UX and UI Design for Mobile Game\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-real-racing-ux-ui-design-for-mobile-game\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-real-racing-ux-ui-design-for-mobile-game\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-ui-design-case-study-tubik.jpg\",\"datePublished\":\"2018-04-23T13:30:23+00:00\",\"dateModified\":\"2023-07-24T11:42:20+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"The case study shows the flow of UX wireframing and UI design for a mobile game application Real Multiplayer Racing: screens, interactions and bright layout details.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-real-racing-ux-ui-design-for-mobile-game\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/case-study-real-racing-ux-ui-design-for-mobile-game\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-real-racing-ux-ui-design-for-mobile-game\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-ui-design-case-study-tubik.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-ui-design-case-study-tubik.jpg\",\"width\":1500,\"height\":1000,\"caption\":\"mobile game ui design case study tubik\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-real-racing-ux-ui-design-for-mobile-game\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Case Study: Real Racing. UX and UI Design for Mobile Game\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\",\"name\":\"Marina Yalanska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"caption\":\"Marina Yalanska\"},\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Case Study: Real Racing. UX and UI Design for Mobile Game","description":"The case study shows the flow of UX wireframing and UI design for a mobile game application Real Multiplayer Racing: screens, interactions and bright layout details.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tubikstudio.com\/blog\/case-study-real-racing-ux-ui-design-for-mobile-game\/","og_locale":"en_US","og_type":"article","og_title":"Case Study: Real Racing. UX and UI Design for Mobile Game","og_description":"The case study shows the flow of UX wireframing and UI design for a mobile game application Real Multiplayer Racing: screens, interactions and bright layout details.","og_url":"https:\/\/tubikstudio.com\/blog\/case-study-real-racing-ux-ui-design-for-mobile-game\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2018-04-23T13:30:23+00:00","article_modified_time":"2023-07-24T11:42:20+00:00","og_image":[{"width":1500,"height":1000,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-ui-design-case-study-tubik.jpg","type":"image\/jpeg"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/case-study-real-racing-ux-ui-design-for-mobile-game\/","url":"https:\/\/tubikstudio.com\/blog\/case-study-real-racing-ux-ui-design-for-mobile-game\/","name":"Case Study: Real Racing. UX and UI Design for Mobile Game","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-real-racing-ux-ui-design-for-mobile-game\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-real-racing-ux-ui-design-for-mobile-game\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-ui-design-case-study-tubik.jpg","datePublished":"2018-04-23T13:30:23+00:00","dateModified":"2023-07-24T11:42:20+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"The case study shows the flow of UX wireframing and UI design for a mobile game application Real Multiplayer Racing: screens, interactions and bright layout details.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-real-racing-ux-ui-design-for-mobile-game\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/case-study-real-racing-ux-ui-design-for-mobile-game\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/case-study-real-racing-ux-ui-design-for-mobile-game\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-ui-design-case-study-tubik.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/mobile-game-ui-design-case-study-tubik.jpg","width":1500,"height":1000,"caption":"mobile game ui design case study tubik"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/case-study-real-racing-ux-ui-design-for-mobile-game\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Case Study: Real Racing. UX and UI Design for Mobile Game"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f","name":"Marina Yalanska","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd","url":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","caption":"Marina Yalanska"},"url":"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4690","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=4690"}],"version-history":[{"count":4,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4690\/revisions"}],"predecessor-version":[{"id":14459,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4690\/revisions\/14459"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/8792"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=4690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=4690"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=4690"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=4690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}