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
Display & Headlines
Callouts & Body text
Iconography
Buttons
Button 01
Button 02
System colours