Textbox Design Process

Textbox Design Process

• Important not to over complicate
• Must not take the attention away from the visual cues, e.g., the images
• Simplistic design – easy to spot and straight forward
• Must stand out on the page to a degree – must not blend in with background

Inspiration

Basic Paper Ideation

Following the notes and guidelines from above, I explored different text box designs to get an idea of how it would look in general before experimenting further with pixel art.

Pixel Art Ideation - Changes with User Testing & Feedback

The user test subjects were young university students between the ages 18 and 25.

The question we asked were:

• Is the textbox too big or too small?
• Is the textbox clear?
• What would you like to change?

1 Basic Square Textbox design

• Users mentioned that it is too basic and does not fit theme.

2 Crystal Shaped Textbox – fits the theme, but appears too thick

• Updated based on user feedback to better fit theme (Crystal Shape). 2 users mentioned that it would take up too much of the screen and it is currently too thick.

3 Textbox design – First iteration – basic but functional

• Shrunk design down and adjusted accordingly - fitting pixel art design, unanimously liked by users. User additionally suggested that it be made slightly thicker so as to not blend into background.

4 FINAL textbox design

• Thicker outline to accentuate the box as a whole. Simple but aesthetically pleasing design. Takes up just enough screen space. Big enough to fit readable pixel art font dialogue.

References

• Inspiration #1 - https://images.app.goo.gl/1sb8NwmKCwvXa4VN8
• Inspiration #2 - https://images.app.goo.gl/khuTzNFax4H2xTym8
• Inspiration #3 - https://images.app.goo.gl/uhkvGxxs4BdEycig8