![art game Interface UI game ui concept design Gaming UI/UX Video Games](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/862faf194990251.66056a6863e04.png)
CONCEPT
Inspired by the animation "Spider-Man: Across the Spider-Verse," I crafted the UI in a cartoon rendering style. My goal was to utilize PostProcess Material and camera direction that interacts with the UI, capturing the process of solidifying intentions and concepts. Using Unreal Engine, I applied character and background resources and incorporated a cartoon rendering style with PostProcess Material.
The UI structure draws from Marvel's Spider-Man: Miles Morales game, and external resources used in the project are listed below.
MOOD BOARD
Drawing from keywords such as Comics, SpiderMan, Cartoon, Hand Drawing, Rotoscoping, Benday effect, Vintage, Newspaper, I combined colors, fonts, shapes, and direction.
Especially in areas requiring attention, I employed techniques reminiscent of comic books, utilizing textures and contrasting colors to make elements stand out.
![art game Interface UI game ui concept design Gaming UI/UX Video Games](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/dab23e194990251.66056a686555c.png)
COLOR
POINT COLOR
POINT COLOR
Drawing inspiration from characters and backgrounds, I used a variety of vibrant colors.
![art game Interface UI game ui concept design Gaming UI/UX Video Games](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/04e638194990251.66058b303ca00.png)
BASE COLOR
I used black and white as the base in areas where it contrasts with the point color and where text readability needs to be high, and in parts that occupy a significant portion of the screen.
![art game Interface UI game ui concept design Gaming UI/UX Video Games](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/575c66194990251.66058b303e055.png)
FONT
EMPHASIS FONT
EMPHASIS FONT
Based on keywords, I adopted a distorted and carefree scrap font as the emphasis font.
This font is used in parts requiring attention.
![art game Interface UI game ui concept design Gaming UI/UX Video Games](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/180097194990251.66058b303ec53.png)
MAIN FONT
To contrast with the emphasis font, I selected a normal font, opting for a narrow typeface for space efficiency.
![art game Interface UI game ui concept design Gaming UI/UX Video Games](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/65d6f1194990251.66058b303d4a9.png)
SHAPE
Dot patterns, hexagons, torn paper
![art game Interface UI game ui concept design Gaming UI/UX Video Games](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/323732194990251.66058b303f887.png)
MOSTION / TEXTURE
I created dot patterns, glitches, and death effect presentation materials.
I created dot patterns, glitches, and death effect presentation materials.
Glitch effects were transformed from character glitches into UI materials.
![art game Interface UI game ui concept design Gaming UI/UX Video Games](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/0fa3e2194990251.66057784a20d4.png)
I created a circle pattern and adjusted the pattern size based on the Circle Scale value.
![art game Interface UI game ui concept design Gaming UI/UX Video Games](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/ee2fea194990251.660577849790d.png)
Combining vignetting and textures, I created it using PostProcessMaterial.
![art game Interface UI game ui concept design Gaming UI/UX Video Games](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/0ffd9a194990251.66057f24a68b6.gif)
![art game Interface UI game ui concept design Gaming UI/UX Video Games](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/10dfe1194990251.66057784951b4.png)
HUD
While playing Spider-Man games, I found it inconvenient to check stamina or skill cooldowns during combat as the HP, Energy, and Skill UI were placed on the top side.
In response, the UI was moved next to the character to allow for easy data recognition during battles. The implementation method involved adding HP, Energy, and Skill widgets to the character's BP.
These were created with a Billboard to adjust the Pivot to the center of the character and ensure they always face the camera. The Compass UI is placed at the top, considering that the user's focus remains at the top, primarily because the characters move above the buildings.
![art game Interface UI game ui concept design Gaming UI/UX Video Games](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/40f40f194990251.66057784a0666.png)
I divided the screen into three zones and categorized the UI based on importance, ensuring that elements outside the central area wouldn’t diminish focus.
Because it can be difficult to pinpoint what appears in the surrounding view when you stare at the center, the size of the [TIER 3] UI is 1.2 times the size of the [TIER1] UI.
![art game Interface UI game ui concept design Gaming UI/UX Video Games](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/d1ad22194990251.660577849cbbd.png)
TIER 1 HP / ENERGY / SKILL TIER 2 Combo TIER 3 Levelup / Compass / Message / Mission
FNSM APP
I added frequently accessed pages such as Social Feed, DataBase, and Mission to the FNSM App category in the OutGame tab menu so that they can be quickly accessed even while playing.
The app icon is designed in a cartoon style, inspired by the phone screen, to make it easy for users to identify.
*thumbnail were designed using the image generated by AI.
![art game Interface UI game ui concept design Gaming UI/UX Video Games](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/f48eb5194990251.660577849ecf1.gif)
![art game Interface UI game ui concept design Gaming UI/UX Video Games](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/2c58f7194990251.660577849dcc8.gif)
![art game Interface UI game ui concept design Gaming UI/UX Video Games](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/dad539194990251.660577849b546.gif)
![art game Interface UI game ui concept design Gaming UI/UX Video Games](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/a5207c194990251.660577849f8ec.gif)
OUTGAME
In the OUTGAME UI, I worked on the SUITS and SKILLS pages.
I changed the font to provide users with a stronger reverse feeling when the tab is clicked. Additionally,
I set the page to move when the tab is clicked.
![art game Interface UI game ui concept design Gaming UI/UX Video Games](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/18e1ea194990251.6605778498bf6.gif)
When a user clicks on a skin item, the camera zooms in on the character.
By switching between dot patterns and background colors on the thumbnail, it helps users directly recognize what they clicked.
![art game Interface UI game ui concept design Gaming UI/UX Video Games](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/8a27cd194990251.66057784931a5.gif)
![art game Interface UI game ui concept design Gaming UI/UX Video Games](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/61c222194990251.66057784943a3.gif)
SCENE MOTION
This is the death scene presentation.
To convey tension when entering dangerous areas, I applied PostProcess Material using glitch effects on the character and vignetting and painting textures on the screen edges.
![art game Interface UI game ui concept design Gaming UI/UX Video Games](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/cfa75d194990251.6605778499fa8.gif)
The reference link for character glitch effects is provided at the bottom.
Upon the character's death, a 2D effect sequence is displayed, followed by a transition to a top-down view to visually showcase the character's death state before displaying the UI.
![art game Interface UI game ui concept design Gaming UI/UX Video Games](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/f635d5194990251.6605778492691.gif)
The 2D effect sequence used external resources.
QUIT POPUP
I placed the UI on the right side of the screen to avoid obstructing the character, and it was created using paper textures and materials.
![art game Interface UI game ui concept design Gaming UI/UX Video Games](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/a4c783194990251.66057784a2bf7.gif)
Thank you
Source
Character : https://artstn.co/m/JwpOq
Character Animation : https://www.mixamo.com/#/
Character Glitch Material : https://youtu.be/t0hktndC_Lg?si=3xurlSEn9xOi0Ak0
2D Effect : https://zrr.kr/ITAC
Extraoin Zhurdlyou Total War Missing Font: https://www.dafont.com/extraoin-zhurdlyou.font
PP Formula Font : https://www.behance.net/gallery/70085477/Formula-Consensed-Free-Font