tales-02
tales-logo-00

Art Direction, UI/UX - Entertainment, 2019

Inspired by tabletop role-playing games, forged with passion for fantasy and storytelling, Tales invites you and your friends to write your own adventures together. A tailored, dedicated interface supports shared writing and roleplay, helping you portray your characters in unique stories. To ensure a comfortable and fluent experience, Tales required a frictionless user flow and a subtle fantasy driven art direction.

01. BRANDING

Concept

Writing untold stories

Tales is all about you roleplay writing ongoing stories with your friends. Creating a cosy yet fantasy induced place was all about visual balance. Inspired but highly functional, inspiring but not influencing, the entire branding was created keeping users expectations in sight, all set with a fantasy book visual feeling.

Writing untold stories

Tales is all about you roleplay writing ongoing stories with your friends. Creating a cosy yet fantasy induced place was all about visual balance. Inspired but highly functional, inspiring but not influencing, the entire branding was created keeping users expectations in sight, all set with a fantasy book visual feeling.

Logotype

tales-02-1

Logotype

tales-02b

Typography

tales-03a

Roleplay/narrative areas titles, subtitles, CTA, copy - Regular, italic, bold

tales-03b

Functional interface titles, subtitles, CTA, copy - Regular, italic, semibold, bold

Color scheme

tales-03c

#131920/#282e36
Panels, background, copy

tales-03d

#e3dfda/#c3b8ad
Roleplay areas

tales-03e

#d5d5d5
Separating lines, outline

tales-03f

#ffffff
Header color, contrasting

tales-03c

#131920/#282e36
Panels, background, copy

tales-03d

#e3dfda/#c3b8ad
Roleplay areas

tales-03e

#d5d5d5
Separating lines, outline

tales-03f

#ffffff
Header color, contrasting

02. WEBSITE

UX/UI - Desktop & Mobile

sirenes_05_screen1
sirenes_05_screen3

Deep dive into a fantasy world

The log-in page is made of three separated key arts one fading into another. As an invitation to discover, to start or to continue your adventure, the page could be summed up by simply diving into fantasy. Once users are ready, the experience starts, inviting them to create a new story, invite friends, or simply continue any story they’re involved with.

For players and game masters

Either users only monitor a story, plays in it or both at once, the interface displays a wide range of various and dynamic controls dedicated to make the experience as fluent as possible. The horizontal user flow is exclusively facing user’s needs, with stories, characters and profile creation & management pages. Not to mention the actual story live writing page split in two separated sections: roleplay and off-chat feature.

tales-05

03. STYLEGUIDE & DESIGN SYSTEM

Overview

tales-06

Documenting form & function

The service and experience Tales is bringing to its users implies high degree focus and memory, specially in its first steps. Making sure this control level won’t mean action-busy interfaces required to plan in details every expected interactions, animations, call to action hierarchy and so on. Here’s a short sample of what could be described in the Guidelines & Design System document.

tales-divider

Icons - Sample

tales-07a

Stories

tales-07b

Characters

tales-07c

Friends

tales-07d

Notifications

tales-07e

Map

tales-07f

Dice roll

tales-07g

Character frame

tales-07h

Is talking

tales-07a

Stories

tales-07b

Characters

tales-07c

Friends

tales-07d

Notifications

tales-07e

Map

tales-07f

Dice roll

tales-07g

Character frame

tales-07h

Is talking

Containers - Alignment behavior

tales-08a

Centered

tales-08b

Aligned left

tales-08c

Aligned right

Toast notifications - Style

Anticipating interactions

To ensure design and functions consistency during the development phase, the Design System document also mentions contextual alignments and position of various interactive key elements. Not to mention this is coming with defined shapes, colors and other styling descriptions.

Hand drawn UI elements - Sample

tales-10a
tales-10c
tales-10d
tales-10b
tales-10a
tales-10b
tales-10c
tales-10d

Hand drawn UI elements are implemented to catch the attention or simply enhance the overall fantasy mood. This short CTA sample was part of a wider documentation easing the project development phase.

Thank you for your time!

2022

2022

Back to top Arrow