AGI S2 - Week 11 UI & Font Research

This week I played around with more UI and curated a collection of fonts.

This week was spent on primarily two UI elements: frame overlays for captured images and inventory display.

The first image showed my various attempts. A bit more detail about each individual frame is provided below:

Top Left: Attempt to recreate the common exhibition style for Chinese paintings where the painting itself is mounted against a different coloured paper as back drop. Text would follow the traditional practice of 'top to bottom, left to right'. The title is shown to the right, its year and creator names are to the left of the title, signing off with a personalised stamp. Soft, layered edges to create an organic feel?

Top Right: Ancient writing style, sort of incomprehensible even to native Chinese speaker (me). Gives off the ancient vibe really well. It serves more as a decorative totem rather than actual informative text. Harder edge (more defined) to compliment the sharper font.

Bottom Left: Attempt to put both English and Chinese on there so it's comprehendible to more people. Had a really hard time with choosing the English fonts. Normally script-ive and cursive fonts would serve the ‘ancient’ feel but in this case it’s the wrong kind of ancient (not the right culture?) Using modern font is also odd and it looks like a lack of effort in maintaining the same aesthetics.

Bottom Right: No border, no framing, presents the piece just as it is. Some edge ‘wash’ effects where added to make it appear more like a painting. The placement and style of the title and stamp also adheres how people would’ve signed off back in the time (does maintaining it serves the traditional look?)

The second image is a finallised version that will be utilised in game. The arrows are used to suggest scrolling/navigating through the album.

The third image shows the initial brainstorming for inventory layout. Prompted by the suggestions under my post in teams, I also tested out manually hand writing certain fonts to produce more organic fonts (fourth image). Realising that I had no talent doing hand writing, I resorted to sifting through font sites. I did rough cutouts of the previews provided (to save me from downloading a lot of fonts), to quickly test style, readability and aesthetics. I was feeling quite stuck at this point as thicker fonts were distracting (too much going on through the whole page), thinner fonts didn't give enough of the stylized/brush feel.
Seeing my struggles, Amber actually reached out to me to provide guidance on general UI/UX designs. She taught me basic principles, and opened my eyes to the power of cleaner fonts. I eventually arrived at the sixth image, which is a much cleaner, very readable version for my inventory system.

Downloads:

Download File: chinese-fonts.pdf