Deliverable #3:Â Design Document
Narrative Dialogue UI Example:
In our first example, here is what the final layout might look like for our narrative dialogue interface. In these scenes, there are two characters facing against each other showcasing that a conversation is about to happen. We discussed to either have Retaliation of Odar as a RPG game or an interactive narrative. We have decided not to break the immersion of the story by using less UI interfaces, as long as the narrative is legible and the story is being told. The font that is used here is Din Pro. This particular scene is categorized as a narrative scenario. The interface is similar to other visual novels as it is what we feel is the best method to tell a linear story.
This particular scene takes place in the first chapter and right after the prologue. Our main character Amfelisia has just escaped from the castle that is currently under attack by the Dark Lord Wizard Hanâtoef, who betrayed his brother and the Kingdom of Odar. Here, the narrative is describing the scene before the conversation begins. The person who is brighter and slightly larger indicates to the audience that this character is the main focus. When the next character being their dialogue, itâll shrink the first character slightly and darkens, and the other character would be enlarged and brightens.Â
Here is a slightly different scene, this is the same format what we call a narrative scenario. This render shows whom the character is speaking, a click next indicator on the lower right, and the dialogue/narrative box has changed its style. Every chapter will have a totally new environment, we felt that if the same narrative dialog box were to be reused in every chapter, sometimes the color gradient and design does not go hand in hand with what is happening in the story.
In this scene which takes place in chapter 4, Amfelisia and her band of followers recently recruited Sir Rohnaâs old friend. He is an accomplished warrior wizard class that has been rescued by Amfelisia from the last chapter. Here they travel North to find the legendary Monks to seek aid on taking down the new ruler. In the same fashion we see the character who is speaking, and the next character that is going to speak next is shown but not yet highlighted.
General UI Iterations:
Here are some of the design choices in mind. We had the option to either go for a more simplistic narration box interface, a more comic interface, or retro rpg interface. For now, by looking at our background gradient and character designs, we find that the first and the third interaction dialogue boxes would work the best. The third design fits our medieval style narrative and its simplicity does make a better candidate compare to the other 3 designs.Â
 Narrative Environment and Interaction Scenario
The next type of interface interaction is what we call a narrative environment and interaction scenario. These two sketches just quickly captures a scene and are slightly different from our narrative dialogue examples. Here the environment is much more detailed and a lot more is going on. That is because these are focused environment where certain parts of the environment, the reader is able to click these objects and a small narrative will show them the importance of the item. If the user decides to ignore it, sometimes it will actually lead to a different story path.Â
This is our render of the scene, here we can see the usual dilogue interface, however the angle of the shot is different and it breaks apart from our narrative dialogue interface. Right after the reader clicks the final dialogue, the reader will be able to click around the envrionment to investigate and pick up clues, which will help the reader to make better decisions on the next events.
In this scene it takes place in chapter 2, after Amfelisia has found an old friend of hers SIr Rohna at the bar in our first example, Rohna invited her to his place to rest before they head off on their journey. However, things turn to the worst they found out someone has broken into his house. Here the investigation begins.Â
In this scene takes place in chapter 3, Sir Rohna, Amfelisia, and the bandit head off to a nearby village to find the Grand Wizard who was Rohnaâs childhood friend. However, on their way to his village, a nearby mass market area has been destroyed. Here is another example of an narrative environment and interaction scenario. The same indicators will show up, these are icons that indicate either it is an investigation sequence or a chat sequence. Again, these can be ignored if the reader choose not to bother with these interaction. However, less investigation and interaction will not lead to a better ending. (Character designs are still work in progress).
Direct decision making scenario
The last example would be our third UI design. Here is the more direct way to let the readers know each action leads to a different path. In this example, it takes place during the prologue. In each chapter, there will be a scene where the reader must make a decision for the characters in the story. Compare to our interactive narrative environment where it is more subtle, Here the readers can clearly see that they have to make a choice in order to continue. If the reader chose to skip some interaction during the narrative environment stages, some cards will be blanked out and the reader will know there would have been options for them to chose but somehow they were not able to choose them. In other words, some options will not be available to them.Â
