17. The controller
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.
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.
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 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.
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.
Once the rune is correctly drawn by the player, the perfect shape of it is displayed.
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.
End of post 17 — Next post : 18. The characters design
Every week, a new post. Follow the upcoming articles here @kokopako
