Overall Interface Foundation

After establishing the core branding and character design for Sign Pals, I turned my attention to creating the foundation for the overall user interface. In this blog, I'm sharing the UI design process that took this sign language learning application from concept to reality.

User Needs

Before diving into visual design, I take note on what users would need from the interface:

  1. Clear instructions for learning sign language gestures
  2. Intuitive navigation between different game modes and features
  3. Visual feedback to confirm when signs are performed correctly
  4. Progress tracking to motivate continued learning
  5. Accessibility for users with varying abilities

With these needs identified, I began the wireframing process to map out the user experience.

Wireframe Sketches: Mapping the User Journey

Before diving into high-fidelity designs, I created a series of wireframe sketches to map out the user journey and interface layout. These initial sketches helped me:

  • Visualize the overall flow from opening screen to gameplay
  • Experiment with different navigation patterns
  • Determine the hierarchy of information
  • Plan screen transitions and interactions

I found Procreate to be the perfect tool for this early ideation phase, as it allowed me to quickly iterate and explore different concepts without getting bogged down in details. These wireframes were intentionally rough, focusing on structure rather than aesthetics.

Key screens I wireframed included:

  • The opening splash screen
  • Profile creation and character selection
  • Mode selection interface
  • Learning mode layout
  • Practice mode layout
  • Duel mode configuration and gameplay

It's worth noting that while wireframes provided an essential starting point, many layouts and systems evolved significantly during actual development. By remaining flexible and willing to adapt my designs during development, I will be able to create a more cohesive and functional final product while still maintaining the core visual identity established in these early sketches. 

Color and UI: The Psychology of Learning

An essential aspect of my design process involved researching and applying color psychology principles specific to educational environments. As color is "believed to be the most important visual experience to human beings," I wanted to ensure my color choices were not arbitrary but scientifically supported to enhance learning outcomes.

Warm Color Foundation

For the Sign Pals logo and primary brand identity, I deliberately chose warm yellow and orange tones backed by educational research showing these colors:

  • Maintain learner attention more effectively than cool colors
  • Stimulate active participation in learning activities
  • Increase energy and enthusiasm for the learning process
  • Create positive emotional associations with the learning material
  • Enhance creativity and conversation - essential elements for language learning

As one study noted, "Warm colors such as red, orange, and yellow have been recognized as the preferred colors to maintain learners' attention and stimulate their active participation." This scientific backing validated my intuitive design choices for the brand's primary colors.

Background Alternatives

1. Bold Yellow Grids

I started with a warm, yellow bold grid pattern that evoked notebook paper—a familiar, friendly visual associated with learning. This grid provided structure while maintaining the playful aesthetic essential for engaging younger users.


2. Orange Gradient

To test different approaches, I created a version with a warm orange gradient background that removed the grid entirely. While this created a clean, modern look, it lost some of the educational feel that the grid pattern provided.


3. Grid + Gradient

I then tried combining approaches by placing the grid pattern with a subtle gradient overlay that radiated from behind the logo. This maintained the structured, educational feel while adding visual depth.


4. Final Refined Design

The final background design returned to the notebook-inspired grid but with significantly thinner lines that created a more clean, polished aesthetic. This refined grid strikes the perfect balance—structured enough to provide visual organization without being distracting, clean but not plain.


This iterative process helped me find the perfect balance between aesthetic appeal and functional design. The final grid pattern creates a sense of organization that supports the educational nature of the app while the warm yellow tones maintain the friendly, approachable feel essential for an application designed to reduce anxiety around learning sign language.

Typography

Typography plays a crucial role in an educational interface, especially one designed for language learning. My font selection was careful and deliberate, choosing a style similar to the playful CherryBomb font family that features friendly, rounded letterforms.


The rounded, bubble-like letterforms echo the friendly character designs and reinforce the game's approachable nature. The typography immediately communicates that this is a fun, non-intimidating learning environment.

Final UI Implementation

It's worth noting that the final UI implementation didn't follow a strict linear process from design to development. Instead, I took an integrated approach where refinement of the visual interface happened simultaneously with actual programming. While this blog focuses on the design thinking and visual decisions, the final UI elements for each scene can be found in my other development blog posts. Throughout the coding process, I will maintain consistent adherence to the foundational design choices established early on—the warm color palette, refined grid background, and typography remained constant anchors as the functional interface took shape. This parallel design-development approach allowed me to make pragmatic adjustments when necessary while ensuring the final product stayed true to the original vision of creating an approachable, engaging learning environment. The result is a UI that not only looks cohesive and thoughtfully designed but also functions intuitively in service of the educational goals at the heart of Sign Pals.

Comments

Post a Comment

Popular posts from this blog

UDP vs TCP

After successfully implementing hand sign detection and classification in Python, my next challenge was connecting this system to Unity for a more interactive learning experience. At first, I saw a video from the same YouTube channel that showed how to connect Python to Unity using UDP. This inspired me to explore network protocols more deeply to understand what would work best for my project. Initial Discovery: UDP from the YouTube Tutorial When I first started researching how to connect my Python classifier to Unity, I came across a tutorial video from the same YouTube channel ( Murtaza’s Workshop - Robotics and AI)  that taught me about hand detection. The video suggested using UDP (User Datagram Protocol) for this connection. This piqued my interest, but before implementing it, I wanted to understand why UDP was recommended over TCP (Transmission Control Protocol). My Understanding of the Two Protocols Through my research, I found that TCP and UDP represent two different philos...
Read more

Initial Research

Image
Bridging Family Gaps for Deaf Teenagers Communication is one of the most important aspects of building strong family relationships. However, for many deaf teenagers raised in hearing families, communication is often one of the biggest barriers. Everyday conversations, emotional expressions, and even simple family interactions can become sources of frustration or isolation when a shared language is missing. These experiences may go unnoticed by hearing family members, but for deaf teens, they can have long-term effects on emotional well-being, self-identity, and social development. Inspiration This project was inspired by the Korean drama Twinkling Watermelon . In the story, a young deaf girl is discouraged by her mother from learning sign language. Despite this, her boyfriend takes the initiative to learn sign language so that he can communicate with her and eventually teaches her as well. How Sweet! Later in the story, he becomes deaf due to an accident. The two eventually marry and r...
Read more

Final Approach: Python OpenCV

Image
After experimenting with 3 different approaches, I realized that fully implementing them would be too risky. Each required a deep technical understanding and advanced knowledge of complex systems that I don’t yet possess. While the concepts were promising, I ultimately decided to take a more practical route that aligned with my current skills and ensured the project would be functional and deliverable within my timeline. Luckily, when I decided to broaden my research and look into more practical solutions, I came across a fascinating YouTube tutorial on building a hand sign detection system specifically for American Sign Language (ASL) alphabets that offered a more systematic approach. Learning From Mr. Murtaza The tutorial I discovered from the YouTube channel called "Murtaza's Workshop - Robotics and AI" presented a comprehensive step-by-step guide for building a robust hand sign detection system using ASL alphabets A, B, and C. What caught my attention was its two-step...
Read more