Prototype
EXPLORE 001: Sign Up
Style Guide
Trying to fall back to sleep in the middle of the night can be annoying, so I wanted to make the visual design a little cutesy. For my color palette, I found colors that emulated dawn / dusk—transitory times the body generally wants to wind down.
🪴 Grows : Points for Iteration
💫 Glows : Points of Pride
-
The transition at the end from "awake sun" to "tucked-in sun" I spent a lot of time trying to make that as smooth as possible
-
All visual design from scratch with some attention to how light might look behind a cloud
-
Smooth out sunset as sign up progresses
-
Smooth out a few positions where the screen moves between sign-up stages
-
Prototype keyboard element in Framer / Axure—something that can have a corresponding type input
EXPLORE 004: App Icon
Mockup
Proto Research:
" I like that it’s one color, so it’s easier to distinguish when searching through app icons"
Style Guide
Seven-foot frame, rats along his back... We don't talk about Bruno.
With the Encanto soundtrack firmly stuck in my head, Bruno Madrigal's visions anchored
the decisions behind this app icon. The final icon incorporates the hourglass embroidery found on Bruno's clothing.
The icon (enlarged here 3x for clarity) was designed for iOS.
💫 Glows : Points of Pride
-
Reduce, reduce, reduce! I simplified from glassmorphism down to just vectors
-
Icon is responsive across iPhone and iPad devices
🪴 Grows : Points for Iteration
-
Workflow - check largest and smallest breakpoints after nailing down concept. Scaling down took a little longer than expected
-
Figma file was MASSIVE with some of the unnecessary techniques and took forever to process any changes
-
Design for Android Launch Icon