Creating a Teddy Bear Avatar and Redesigning the U.I.
Watch the full 10-minute devlog video below using (or watch on Cinnamon.)
Welcome! This #Slumberpartyio #Devlog covers the 3D modeling, rigging and animation of the teddy bear avatar (a process I'm still not fully confident with) and a redesign of much of the application's look and feel. (Slumber Party is an upcoming social accountability tool with #WebMonetization. Learn more here.)
It's going to take some experimentation to find a balance in these devlogs between quick updates and longer-form logs of how I worked. Personally, my favorites to read (The StoryGraph, Scrabdackle, Eastshade) are focused on what's changed since the last update and why, sometimes with motivations of certain features and notes of any roadblocks. My favorites to watch (Equilinox, Dauphin, ThinMatrix's unnamed city planner) are often longer, including slice-of-life-style updates, trips to the park or aquarium updates, and time lapses of working, with more emphasis on process. I'm going to try for something like that for a while—these written devlogs will be shorter and focused on updates, and the accompanying videos will be longer and more focused on chronicling development (and all that goes into it). Watch this week's video below.
No More Little Aliens
I'd used these little alien assets from Kenney for about a month, largely out of necessity for a proper placeholder. Before there were little aliens, there were small white circles. In the earliest (very small) user tests I conducted, users had no way to know these white circles were meant to represent player avatars, so I added the aliens as a placeholder for the second round of testing. They did the trick, but they were never meant to be permanent.
After thinking about what the avatars could be (they were originally going to be Mii-like characters), I realized teddy bears would be a natural fit because I they'd match well with the cozy nighttime aesthetic I'm trying to cultivate and be relatively easy to customize later on. So I created these cute little teddy bears in Blender to represent players in-game, gave them a rig using Blender's rigify and made a simple walk cycle for them. I used a color ramp to give them a toon-like color effect.
Overall, I'm happy with how it turned out, especially considering that it had been a while since I'd made anything in Blender, let alone a character that moved. I'm definitely no animator, and the animation I made is very robotic, but I think it does the trick.
A Modern Redesign
I redesigned the Slumber Party interface. The original design was very flat, paneled and colorful.
I devised this color palette, with (from left to right), red (English Vermillion) for warning buttons, a bluish off-white color (ghost white) for the moon, Languid Lavender for sleep, Oxford Blue for the night sky and Yellow Crayola for the stars.
However, the final look felt childish, de-saturated and outdated, and even as I was working with it, the interface looked old.
After a few months, I finally got sick of it and overhauled the design, removing the lavender color completely and relegating the blue to a background color, changing the text color to black. Similarly, I completely replaced Ghost White with white. I then rounded the corners of the tabs, navigation menu, and the room, but only the top corners that faced another part of the application (i.e. only the navigation's top right corner is rounded), changed the title background color to white (and generally significantly toned down the paneled look), and re-created the tasks tab to look more clean, with lists appearing as more cohesive floating collections of tasks. The “Add new...” inputs are no longer disguised as lists and tasks respectively, so while I believe this looks much nicer, I'll have to conduct more user testing to see if users still understand these.
When I was creating the color palette, I wanted colors people would associate with the night sky. I remember looking up the cover for a children's book I remembered, Goodnight Moon.
It wasn't what I remembered, featuring lots of red and green. In hindsight, I'd probably been looking for this alternate cover:
My next target is accessibility via WCAG 2.1, especially in the tasks tab (which relies heavily on clicking and dragging) and the room (which is just a canvas element with no
aria-live or other way to interface with screen readers).
Once again, I'd love to hear any thoughts you have on this update: 3D modeling, aesthetic changes, or anything else! Leave any comments here, on Cinnamon, or on Twitter! To get these updates in your inbox, enter your email address below or follow Innkeeper Games another way. Thanks for stopping by, and I'll see you again soon!