CRANE

INTRO

TL;DR - Crane is a design language used for 6DoF XR interactions. Crane implements motions and interactions inspired by origami into the design.

This is Ke Ding's graduate thesis project and is still a work in progress.

  • Parsons School of Design, Graduate Thesis
  • Aug 2018 - Now
  • Interaction Design + XR
  • Unity/C#/Sketch/Principle/C4D

STATE OF XR INTERFACES

ss_5744a28a3ace66a9b0f67ef0798d2c6c945c24ae.600×338

One direction of XR application design is to use existed interfaces on the 2D screen. Although we have systematic design experience on 2D screens, the environment and control methods change dramatically in XR (to ray-based control/hand). The interactions become less robust and it did not use the extra space in XR well. 

ss_8188c54925a3ddf4d05927187e15130b62b6185e.1920×1080

Another direction is when the designer gets too excited entering XR, the design of the application start abusing the space which causes a cognition overload and the users get lost immediately.

ORIGAMI

guywearingmiragedark

Crane tries to utilize the space that surrounds the user. It’s not necessary to have a huge space to navigate through XR, especially when we are using our hands as controllers and cannot reach too far away.

butterfly

Also, the visual style and the interaction feedback in today’s XR sometimes feels inconsistent. With a systematic design language, we can unify the experience and make it even more intuitive.

OrigamiDemo
cut-and-fold-techniques-for-pop-up-designs__41zw0hjp72L

Cut and Fold Techniques for Pop-up Designers

by Paul Jackson

81aTU8nYAEL
PaperButton1

Crane uses a set of interfaces and interactions that inherit & simulate an “invincible” origami structure.


The goal is to make the experience in XR more robust, tangible & intuitive.

CraneDrawDemoRender
ButtonCloseRender

The interactive parts are designed in a consistent style so the user can learn it immediately. Interactions with XR contents should be spontaneous and enjoyable.

pastedImage0
pastedImage0 (1)
pastedImage0 (4)
pastedImage0 (2)
pastedImage0 (3)
MusicPanelAnimation

PROTOTYPING IN MAQUETTE

UNITY MOTION PROTOTYPING

Fold_Side
Fold_Drawer
Fold_Horizontal
Fold_Album
Fold_AlbumHover

Current prototype is designed for usage in a close and reachable distance, especially for hand tracking interactions in XR.


It would also be adaptive in similar use case such as see-through VR and mixed reality.

CraneUIIsometric
DrawerPrototype

to be continued...

Other Projects

Crane: an Ongoing ProjectA Design Language for XR

XR Presentation @GoogleProfessional Tool in XR

Project Kiosk10 Foot UI

SingularityA Game about AI

Master of Fine Art Candidate

Parsons the New School of Design

Design & Technology 

Bitnami