{"id":1942,"date":"2026-05-20T15:08:18","date_gmt":"2026-05-20T15:08:18","guid":{"rendered":"https:\/\/sites.wsagames.com\/ckhs1c22\/?page_id=1942"},"modified":"2026-05-21T04:51:40","modified_gmt":"2026-05-21T04:51:40","slug":"sprint-5-long-and-fun-ui-mechanic-design-music-design-new-role-unlocked","status":"publish","type":"page","link":"https:\/\/sites.wsagames.com\/ckhs1c22\/sprint-5-long-and-fun-ui-mechanic-design-music-design-new-role-unlocked\/","title":{"rendered":"Sprint 5- Long and fun Ui\/ mechanic design + music design + new skill unlocked??\u00a0"},"content":{"rendered":"\n

After a long run of environment and character design, I finally got to work with the Ui. I am so excited to work on them as I know there will be bunch of drawings needed to be completed and I have the confidence to finish them nice and quickly <\/p>\n\n\n\n

I have researched some ideas for our Ui art, the concept will still remain cute\/ childish\/ crafty.<\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n<\/div>\n<\/div>\n\n\n\n

Dialogue box<\/h2>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/div>\n\n\n\n

First draft + Esi’s response <\/strong><\/p>\n\n\n\n

I had some stitches surrounding the box, creating a crafty aesthetic, some stitched cloth flowers and glass beads as decoration around the name box. I was planning to design a font for each character and a logo of  the mini game they are representing (e.g. Makenah- braids for hair braids , Ines- brush for painting), but Esi thought font design might be unnecessary, we will see<\/p>\n\n\n\n

\n
\n
\n
\n
\n
\n
\n
\n
\n
\"\"
My dialogue box & Esi’s serious dialogue box<\/strong><\/figcaption><\/figure>\n<\/figure>\n\n\n\n
<\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\"\"<\/figure>\n<\/div>\n\n\n\n

I wanted the dialog box to remain pink ,matching with the simple, serious version dialog box at the opening of our game. <\/p>\n\n\n\n

\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

Esi decided to withdraw the font, but I still want to specify characters by narrative Ui. Esi suggested to change the dialogue box to blue\/green when interacting with Ines. But I think the color contrast between blue\/green and pink is too strong for the big area of the dialogue box + I need to redraw most of the elements but we were running out of time, so I suggested to have the color of the name box as characters\u2019 signature color <\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/figure>\n\n\n\n
\n
\"\"<\/figure>\n<\/figure>\n<\/div>\n\n\n\n

Colored\/ second draft<\/strong><\/p>\n\n\n\n

Esi found the dialogue box is too big, it was almost covering up half of the screen, so I am reducing the width of them (2 stitches width)<\/p>\n\n\n\n

Final:<\/strong><\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/figure>\n\n\n\n
\n
\"\"<\/figure>\n<\/figure>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n<\/div>\n\n\n\n

Before VS After<\/strong><\/p>\n\n\n\n

Setting & UI (Button and doodles) <\/h2>\n\n\n\n

This UI was first done by Esi for testing, I am going to design the buttons also adding some doodles onto the note sheet, as if Karima was haaing fun drawing <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

For the buttons, Esi liked to have them pink. I was thinking I have already done handcraft element for the dialogue, so I am going to have those buttons with hair related design. Since the buttons are small, I reviewed to make it simple, I added a little hair clip at the top of it <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

For the doodles they are “bad’ drawings and storytelling, some of them are Karimah’s self reflection\/ inner thoughts. The whole concept is Karimah wip on her papers <\/p>\n\n\n\n

\n
\"\"
Doodle 1<\/strong> Her parents arguing, that was what Karimah often heard but could not see, so she imagined it and drew it out. She could not understand some of the “adult words” so they remain as symbols <\/figcaption><\/figure>\n\n\n\n
\"\"
Doodle 2<\/strong> Karimah herself she felt helpless towards the quarrel between of her parents, she was seating in front of her paracosm (cardboard sheets) crying <\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
Doodle 3<\/strong> Karimah and Makenah. She feel helpless towards her parents
while she has no one to talk to. Makenah is her imaginary best friend,
and her role model at the same time. She wish she can be happy as
Makenah and do not have to worry about anything<\/figcaption><\/figure>\n\n\n\n
\"\"
Doodle 4<\/strong> A tulip, presenting out nature theme<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\n
\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

Doodle 5 <\/strong> Karimah’s hair plan, she is going to do this hair style next, rather for herself or or Makenah, presenting our hair braiding theme<\/p>\n<\/div>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

Doodle 6<\/strong> Paper cuts, presenting our craft theme<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\"\"
Doodle 7<\/strong> Random shapes drawing<\/figcaption><\/figure>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

Doolde 8<\/strong> Cute scissors <\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

Doodle 9<\/strong> Daisy flower with different facial expressions on each petal<\/p>\n<\/div>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

Doodle 10<\/strong> Hair plan for Ines<\/p>\n<\/div>\n\n\n\n

<\/p>\n<\/div>\n\n\n\n

\n
\n
\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

After arranging the the designs , the setting menu looks like this now<\/p>\n\n\n\n

<\/p>\n<\/div>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

So as the diary paper <\/p>\n<\/div>\n<\/div>\n\n\n\n

Setting logo<\/h2>\n\n\n\n

We also need to change our setting logo, the size of it was 512×512 pixels, I was trying to make it playful so I added a smiley face in the middle of cogwheel<\/p>\n\n\n\n

\n
\n
\n
\"\"<\/figure>\n<\/figure>\n<\/div>\n\n\n\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

Visual <\/strong><\/p>\n<\/div>\n\n\n\n

Music Design<\/h2>\n\n\n\n

After making the theme song of “Karimah’s Parascom”, I got familiar with MuseScore, I am making a new song for our opening. The opening was about a day in Karimah’s life, she heard their parents arguing in the living room again. Karimah gets scared whenever this happens, she is scared to go out from her room or even speak.

Story about inner world reminds me of movie inside out, I find their theme song atmosphere matches our concept, it is giving clam, curious aesthetic. I wanted to recreate this atmosphere for my opening but sadder. <\/p>\n\n\n\n

\n