17. The controller

Clément Pavageau
Wido, rifts of destiny
3 min readJun 30, 2015

Our approach for the design of the controller was the same approach as if we had a physical controller rather than a smartphone. Which means we wanted the player to focus on the TV screen and not on his controller. So the design had to be really intuitive. We kept the same universal interaction principles : control Wido on the left side of the screen, do actions on the right side of the screen.

So the visual design elements needed to be quite big and easily recognizable for the player if he had to look at his smartphone.

We first designed a version where the interface elements were a little bit off the Norse mythology universe. At that time of the project we didn’t know yet what will be the style of our video game.

The V1 of the controller.

We worked on the second version right after our logotype was created. So we decided to implement the rock aspect into the visual design of the controller. It needed to feel old and magical. We created the rock feeling shapes in illustrator and then we played with textures and lights in Photoshop, to bring more life and personality. The final touch was to add a little bit of noise on the UI elements. We were pretty satisfied with this second version.

On the left the outline of the joystick. In the middle the original illustrator shape. On the right the final photoshop joystick (lights + noise).
The V2 of the controller. Final version.

We added a menu button at the middle bottom of the smartphone and an exploration book button (only visible when player receive a new notification) at the middle top.

The Exploration Book button only appears for a limited time when the player receives a new notification. Via the Menu button the player is always able to access it though.

The left side of the controller worked as a traditional joystick in term of interaction. The central part of the UI element moves around circularly following the directions chosen by the player.

When the player is moving around, the interior part of the joystick follows his thumb.

We spent some time to work on every small details. For instance, when the player is drawing a rune on the right side of the screen, a UI element follows his thumb while he is drawing the shape. As the use of magical runes was a strong feature of our video game, we treated this element to be as detail as possible by adding some graphical symbols related to the Norse mythology spirit. The look of the drawing shape has been treated to reflect a magical feeling by playing with colors, lights and particles. It needed to also feel organic as it was a realtime drawing shape draws by the player, so not a perfect and clean shape.

Magical rune drawing in progress.

Once the rune is correctly drawn by the player, the perfect shape of it is displayed.

Magical rune drawing done and approved.

To visually separate the magical actions (runes) from the classic action (attack, QTE), we decided to choose different color codes : blue for magic and green for classic.

Action by drawing a line.
QTE drawing.

End of post 17 — Next post : 18. The characters design

Every week, a new post. Follow the upcoming articles here @kokopako

--

--

Clément Pavageau
Wido, rifts of destiny

Independent Designer - Design Director | former @gobelins_paris