Jared Delamora
UI/UX Designer | Art Producer
NOD
Motion Designer + Interaction Designer
NOD APP
SUMMARY
NOD is a visual messaging app where you to create a customizable avatar and send animated Emojis.
Date released:
- July 22nd, 2015 – iOS.
AWARDS
Rated as the Best New App in the Apple app store.
PRODUCT HUNT
4/5
ARTICLES
MY ROLE
As a Motion Designer + Interaction Designer, I handled the graphic design, motion design, interaction design, and animations for the Social Avatar chat app.
For a more detailed breakdown, please visit my linked-in profile😄.
MAIN CHALLENGES
CHAT WITH EMOTION
Our main focus was to create a social visual messaging application where visuals told simple stories. We focused on creating animated emojis –
Each user was able to create their own avatars and customize them however they like. The challenge was to figure out how to create immersive animations that told stories.
To solve this, we created animated emojis where the users customized avatar can utilize.
Some challenges we encountered was the users interactions with the animations – we realized users would want to combine animations together to portray a feeling. We created smooth transitions between animated emojis so the user can utilize more than once animation at a time.
To implement the animations, we needed to make sure the art can be used through SWIFT. To do so, we used a tool called SPINE.
SPLINE SOFTWARE
I had to pick up and learn a new software called SPINE. Its a software that allowed us to export the animations as a .JSON file. The tool was simple to learn and quickly became familiar with it.
ANIMATED EMOJIS
FROM START TO FINISH
Before starting a new animation, I would sketch out the idea and structure each animation by 3 states: IN state, LOOP state, and OUT state. When a user taps on a new Emoji, the currently playing animation will switch from the LOOP state into the OUT state and then into the IN state of the new animation.
Once the rough sketches are done, I would build quick animated mockups in Spine, once approved, I then imported the animation files into Xcode to debug on a mobile device. If all looks good, I then publish the animation to a build.
Main Menu
Main Menu – Submenus
Music – Sketch
Music – Animated Mockup
Music – Spine Build
Music – Final
ANIMATED EMOJIS PERSONALITY
Even though our characters were going to vary, it was important for each animation to have a cohesive art and animation style. We wanted our avatars to portray an emotion while retaining a certain animation style. To do this, I took into consideration of the product’s brand. I wanted to make each animation coexist with the product. I referenced a lot of American, Korean, and Japanese anime to help execute an animated direction for NOD.
USING PROPS
Another challenge we had, depending on which side the user was, we had to figure-out which direction the prop will be appearing from. We used transitions such as fade in, slide in, etc. Below are 3 animations using props: Gaming, Sadness, and Disco.
You can download the app from the apps store.
Note: The app was created in 2015 and has been inactive since 2017.
Thank you for viewing