Loading word count...
Production
User Interface
Tools used during the user interface design was ChatGPT 5.2. I managed to get the more premium version as it had a one month offer which I thought would have been good to help with Harlowe CSS. In the end I wanted AI to do all. This is also because I realised that I was falling behind on my work and not in the place I wanted to be in. Therefore, I copied and pasted it in hopes that it would work and described issues which was happening and asking for full css so I can just copy and paste it in whist I was creating the story.
This is because of the Harlow CSS which I used in order to generate the menus I will be using. I did use AI this is because Harlow had a different CSS syntax which for example body{} not working it was tw-story{} this caused a few frustrations and therefore, I decided that it would be best if I was AI. However, I do understand each part of the CSS so if I need to make changes to it then it will be easy to do. One big issue when using Twine in my opinion is that everything is in one huge CSS file which makes it harder to edit at times.
This was my first design and although it looked good I wanted to go with something more basic and would have fitted the mock up design that I made originally this is because I felt that the first attempt was too diced up into sections with multiple text boxes.
I didn’t want to use a image as my main interface this is because it lacked consistency and didn’t always work. I also noticed when trying a image the scale of device matters and as I would like to add mobile support in the future a image was not the write way to go about this. Due to this the user interface has to change which personality I think was better it looks a lot more softer. One change I did have to do is positioning this was normally very off when the AI did it.
This new design is very good this is because it doesn’t look to boxed of and fits better with a simple design. I was quite happy to do this. However, I didn’t like the amount of blank space therefore, I got the AI to fix this. I think blank space would make it look too empty and low effort. Which led to the final design.
This was my final design on all different variants. As each serve a different purpose and action.
I used raw HTML to display the user interface this is because I was more understanding doing it this way and it made it more easier to understand the styling. However, was painful having to copy and paste each HTML div to the correct node. I do believe there was a easier way of doing it.
When linking the Twine nodes together I used 3 different ways which lead to inconstancies with how the player would use the user interface. However, I made this choice as I believe that it would of shown a better story experience.
This is what the User Interface look with it’s HTML code. This was a simple way of doing it and I think I should of made every node like this instead of changing it.
During the production of the story I heavily focused on the visuals however, this was my downfall. I should have focused on the story before planning and playing with the visuals this is something that I was warned about but still did anyways. However, I do think that if I expand the story it would have been better.
To play my Twine story visit the link below ↓