Textbox Design Process - UQdeco2800/2022-studio-1 GitHub Wiki

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

1 2 3

Basic Paper Ideation

Paper Idea #1 Paper Idea #2

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

#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

#2 Crystal Shaped Textbox

  • 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

#3 Textbox design – First iteration

  • 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

#4 Final textbox design - thicker outline

  • 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