Skip to content

Ways of Word

Playfulness needs a readable interface response.

Connecting playful interaction, game interface design and expressive motion.

A game-interface study that connects visual design to animated presentation. It shows another side of my practice: motion, playful interaction and game UX working together.

  • Interaction
  • Visual design
  • Motion & presentation
My role
Visual direction, product presentation & design
Focus
Interaction · Visual design · Motion & presentation
Project status
Original published work
Period
Published portfolio work
Ways of Word / Original published motion studyDribbble ↗

01 / Ways of Word

The context

A game-interface study that connects visual design to animated presentation. It shows another side of my practice: motion, playful interaction and game UX working together.

Reading the problem / Ways of Word

Expression needs a legible response.

The published game-interface study focuses on playful interaction and motion. Its scope differs from the current Unity builds.

Source materialOriginal motion

Ways of Word / Original published motion study

Constraint to preserveIntroduce the game UI

Ways of Word is a published UI and motion study, not one of the current Unity game builds.

The design questionRecognition & sequence

How can a game-interface study communicate playfulness through hierarchy and timing?

Evidence: the project account and the attributed artifacts on this page. Process drawings and interaction studies are reconstructed explanations; numerical research or business results are included only where separately supported.

02 / Ways of Word

The design focus

  • Game UI and visual direction
  • Animated interface presentation
  • After Effects and Figma exploration

The process / Ways of Word

A direction.
A way to build it.

The game-UI study makes an action and its expressive response legible inside a motion sequence.

A schematic of sequence and overlap, not a dated project schedule.

01

Establish the starting state

Introduce enough interface context for the viewer to recognize a later response.

02

Define the interaction beat

Identify what action the animation is intended to communicate.

03

Explore expressive feedback

Connect visual direction, Figma exploration and animated presentation around that response.

04

Review the resolution

Let the feedback finish communicating before introducing another competing beat.

01 / The journey

How can a game-interface study communicate playfulness through hierarchy and timing?

The study introduces a game interface, shows an interaction and resolves it through visual feedback. The viewer should understand the relationship between action and response even inside an expressive motion presentation. That is a different goal from demonstrating a complete playable game.

Journey map / Ways of Word

See the whole task in context.

Choose a step to connect the person’s intent with the interface and the design decision.

01020304
Current intent
Introduce the game UI

Ways of Word is a published UI and motion study, not one of the current Unity game builds.

Interface context
Game interface
Review question
How does the interface make turn ownership unambiguous?

Representative task sequence and recovery path, not a measured emotional curve or historical research map.

Behind the experience

From composition to a consistent deliverable.

For Ways of Word, this map connects “Introduce the game UI” to “Resolve the sequence”. Read across to follow the task, then select a layer to inspect the interface, design and delivery references behind it.

Ways of Word / Task, interface and delivery dependencies
LayerIntroduce the game UIShow an interactionGive visual feedbackResolve the sequence
The taskIntroduce the game UIShow an interactionGive visual feedbackResolve the sequence
Visible interfaceGame interfaceGame interfaceInteraction beatFeedback beat
Design checkpointWays of Word is a published UI and motion study, not one of the current Unity game builds.Introduce an understandable game-interface state.Make the action behind the animation recognizable.Resolve the response before adding another expressive beat.
Implementation referenceIntroduce enough interface context for the viewer to recognize a later response.Identify what action the animation is intended to communicate.Connect visual direction, Figma exploration and animated presentation around that response.Let the feedback finish communicating before introducing another competing beat.
RecoveryUnsuccessful landing → communicate the result → allow the next valid turn

A reconstructed delivery map: the implementation row summarizes design-process dependencies, rather than claiming to document the original backend architecture.

Design exploration / Ways of Word

Give the response a readable beat.

Reconstructed comparison of design approaches. These are review studies, not a claim that both directions were historically tested or shipped.

What this direction changes

Give the response a readable beat

Lets visual expression reinforce what the player just did.

02 / Sequence & composition

Give the interaction and its feedback separate beats.

The reconstructed storyboard distinguishes the initial UI, an interaction moment and its response. This makes the source of the motion understandable: the interface is reacting to something, rather than animating continuously without a reason.

Storyboard reconstruction / Ways of Word
01 / Game interface
Ways of WordIntroduce the game UI
OpeningResolve
Show an interaction

Introduce an understandable game-interface state.

02 / Interaction beat
Ways of WordGive visual feedback
OpeningResolve
Give visual feedback

Make the action behind the animation recognizable.

03 / Feedback beat
Ways of WordResolve the sequence
OpeningResolve
Resolve the sequence

Resolve the response before adding another expressive beat.

Try the interaction

Ways of Word / Composition study

Reconstructed prototype
Ways of Word01 / 03

View 01

Game interface

Introduce an understandable game-interface state.

Ways of WordIntroduce the game UI
Composition
Starting context

Introduce the game UI

A local interaction study explaining the design principle. It does not submit data, operate the original product or reproduce an unverified historical prototype.
03 / Typography & guidelines

Game character should not obscure the next action.

Separate expressive game headings, interaction prompts and response labels. Typographic personality should leave the animated feedback understandable.

Illustrative type-role specimenWays of Word

Introduce the game UI.
Resolve the sequence.

HeadingInteraction beat24 / 30 px · regular
BodyHow can a game-interface study communicate playfulness through hierarchy and timing?16 / 26 px · regular
LabelResolve the sequence12 / 18 px · regular
StateUnsuccessful landing → communicate the result → allow the next valid turn12 / 18 px · regular

Portfolio-font hierarchy illustration; the source does not establish the exact client font or token scale.

04 / Discussion & decisions

Make expression serve the response.

Discussion 01

How does the interface make turn ownership unambiguous?

The interaction beat needs a recognizable starting state. Without it, the viewer can enjoy the movement without understanding what the interface is communicating.

Discussion 02

What feedback explains a valid landing without distracting from the physics interaction?

Feedback can be expressive while still resolving the action clearly. The visual treatment should reinforce the response rather than hide it under a second competing message.

05 / Handoff & maintenance

Connect the animated response to the UI state.

The original work joins game UI, Figma exploration and After Effects presentation. A motion reference should identify the state before the interaction, the response being illustrated and the point where the sequence resolves. That keeps the animation tied to interface meaning.

A proposed AI-assisted variation should reuse the existing game-interface language and a bounded interaction. Keep the presentation separate from current Unity development, and do not turn a polished response animation into a claim of implemented gameplay.

Ways of Word is a UI and motion study, shown separately from the in-development Unity games.

Accessibility & standards

Access belongs in the design.

For Ways of Word, carry accessibility requirements from the core user journey into component states, prototypes and engineering acceptance criteria.

WCAG 2.2 AA · EN 301 549 · APCA · WAI-ARIA · Platform guidance

Turn the palette into usable roles

Document approved text/background combinations for body text, large text and UI components. Assess functional content against WCAG 2.2 AA; use APCA to refine type size and weight.

Carry identity without losing meaning

Provide non-color cues, readable type hierarchy and accessible template reading order. Review captions and a reduced-motion alternative for product films and animated applications.

Make the rules usable in production

Include accessible color tokens, component states and content guidance in designer, developer and Claude/Codex references. Logo presentation alone does not establish interface accessibility.

Review scope & standards references

These are design references and review priorities, not a claim that this historical project passed a WCAG audit. Record criterion-level evidence, assistive-technology and device results, unresolved issues and retest outcomes before making a conformance statement.

APCA supplements the WCAG 2.2 contrast checks; it does not replace them. WCAG 3 remains a draft. EN 301 549 v4.1.1 is the latest published edition checked on 6 November 2026; its publication and its formal EU legal citation are separate matters. Confirm the applicable procurement or legal baseline with the client.

Outcomes & scope

What the work delivers.

  • A published UI and motion study. It is presented separately from the current Unity games.

Results are described within the documented project scope. Illustrative studies are identified separately from original project artifacts.

Review & next iteration

What needs to hold up in use.

Use these questions to review Ways of Word against the behavior the design is intended to support.

  1. 01

    Can the viewer identify the action that caused the response?

  2. 02

    Does the next interaction remain clear after the animation?

Project-specific acceptance questions for a future review, not reported usability-test results.

Reflection / Ways of Word

What I’d carry forward.

Playfulness becomes clearer when an action receives an understandable response. The useful next experiment is to vary the expression while preserving that interaction rhythm.

Next projectDovashi