Microinteraction

Design micro-interactions for a brand of your choice.  Make the interactions go beyond 'usable' to achieve 'delight'.

Roles

Visual Design, UI/UX, Motion, VFX

Tools

Photoshop, Illustrator, After Effects, Trapcode Particular, Blender

Duration

15 Weeks (currently revising)

Client

Genshin Impact is an online action-based role-playing game that takes place in a fantasy open world enviorment. As a game enthusist, I had never designed for a game’s interface before. So I chose to work with my favorite game of all time.

Final Results

Primary Button

I wanted to enhance the basic button to be more. This button concept is to be used for the most important button on the screen. 

Active: Lightly blinking.

Hover: A star appears and rotates slowly. 

Clicked: Star zooms behind the button.

Active: Button turns white.

In-game use: Start/enter buttons

Menu Toolbar Hybrid

This interaction is accessed when the player presses tab, and with left click (select) and right click (back), players can navigate through three levels. Levels are indicated with the two circles in the middle of the menu. 

Level 1 Menu: no circles glow

Level 2 Menu: inside circle glows

Level 3 Menu: outside circle glows

The center of the menu will show the controls available or the parent category that was selected. This helps players remember which item they selected. 

In-game use: Menu access with a hotkey

Radio Buttons

I added elemental animations to further distinguish between characters  and add a magical touch for the hover state when users quickly pass their cursor over characters. 

The background was made with Blender to imitate the in-game character background scene.

Hover: Elemental animation and border appear. After one second, element icon will appear behind character.

Selected: Border disapears and character background becomes fill. Background scene becomes the same hue as selected character's element.

In-game use: Character select

Fancy Button

This button is the most embellished and takes up most of the user’s attention and time. It is used sparingly, as it can be distracting on complex screens.

In-game use: Startup screen or entering a special domain

Active: Infinite loop of tiles moving back and forth

Hover: The floating tiles will align and the portal will light up

Click: Camera will zoom into the portal. The next screen will take the user to their saved game.

Ideation

Designing interactions for a game was very fun because I was designing for a whole different universe and feel. Sometimes it’s hard to come up with creative ideas for basic tasks while sticking to a certain aesthetic, but it forced me to brainstorm and push the celestial style.

Takeaway

Designing interactions for a game was very fun, it felt like I could go wild because I was designing for a whole different universe. Sometimes it’s hard to come up with creative ideas for such basic tasks while sticking to a certain aesthetic, but it forced me to brainstorm a lot.

By the time I handed in the assignment, I realized I wasn’t satisfied with some interaction animations. I plan on making the motion of each interation feel more (in consideration of the users), and for slower motions, I want to achieve a more 'ethereal' or floating motion.

Get in touch.

Email: cindyuphan.design@gmail.com