Cybertropy

Designing something personal can be challenging because it is tempting to put aside traditional development guidelines to try to be original or unique, which increases the chances of failure when we make this bet. In addition, among the main risks of challenging some of these guidelines is losing the ability to be understandable, what your job consists of, what your role is and what you have to offer.

My role

  • UI design
  • Illustrator
  • Animation
  • Admin system

Released

2021

Mobile view

Homepage Desktop

Info page Desktop

About page Desktop

Challenge

Thales of Miletus, the famous greek philosopher, used to say: “The hardest thing in the world is to talk about yourself, and the easiest thing is to talk about others.”, which in a certain way we have adopted by adjusting our resources thinking about the user: the product is for others.

Bearing in mind the above and on the verge of entering the field of the uncertain, I resorted to the conceptual ‘old reliable’ of balancing the trend with something of my personal taste: noir novel.

In noir novel, the places usually determine the circumstances and the actions of the characters, that is, the places as protagonists. Once the place/container was defined, the next step consisted of shaping the interactivity through vertical narrative based on mobile devices.

Solution

I outlined the idea, the possible user experience according to the device, the sections, and the accessibility in the presentation of the information.

I did some estimations to check the angles, the depth of elements and the impact on navigability depending on the perspective.

To define the visual style, I relied on the architectural aspect of a comic by the french illustrator, Jean Giraud (Moebius): The Long Tomorrow [1977], to adjust the perspective according to the geometric planes and projections.

Finally, I extracted the design elements that did not have a functional purpose in the composition to avoid distracting too much attention with too many elements and determined the visual hierarchy.

Design guide

Type-setting

Barlow
Display & Headlines
Barlow Condensed
Callouts & Body text

Iconography

Buttons

Button 01

Button 02

System colours

Graphic
Graphic
Graphic
Graphic
Kanjis
Buttons
Titles
Texts