{"componentChunkName":"component---src-templates-project-js","path":"/portfolio/daydream","result":{"data":{"markdownRemark":{"html":"<p>I did a few things for the Daydream system UI. There were lots of explorations on things like app launching and settings. Here, the icons transition from 2D to 3D on hover:</p>\n<p><img src=\"/uploads/02-ice-cube-expanding-hover.gif\" alt=\"Icons turn from 2D to 3D when pointed at\"></p>\n<p>These menus scroll beneath the surface of the portal and hover closer to the surface. You can see how it progressed over time:</p>\n<p><img src=\"/uploads/03-daydream-settings-small.jpg\" alt=\"Hovering a panel menu\"></p>\n<p><img src=\"/uploads/cast-window.gif\" alt=\"Scrolling a 2.5D settings menu\"></p>\n<p>I used After Effects to try out this design, then built it in Unity:</p>\n<p><img src=\"/uploads/dashboard-small.gif\" alt=\"After Effects animation of the dashboard\"></p>\n<p><img src=\"/uploads/2017-05-05-dashboard_prototype.gif\" alt=\"Unity prototype of dashboard\"></p>\n<p>Here you can see what some of the specs looked like:</p>\n<p><img src=\"/uploads/scrolling-redlines.gif\" alt=\"Scrolling cards\"></p>\n<p><img src=\"/uploads/button-consistency-redlines-small.jpg\" alt=\"Button redlines\"></p>\n<p><img src=\"/uploads/dialog-positions-2.gif\" alt=\"Opening and closing stacked windows\"></p>\n<p><img src=\"/uploads/dialog-button-redlines-small.jpg\" alt=\"Dialog button redlines\"></p>\n<p><img src=\"/uploads/slider-component-side.gif\" alt=\"Slider component\"></p>\n<p><img src=\"/uploads/grabbing.gif\" alt=\"Grabbing a notification\"></p>\n<p><img src=\"/uploads/dashboard-animated-small.gif\" alt=\"Dashboard transition\"></p>\n<p>I also spec'ed support for Android 2D apps. The idea for the cursor was to morph depending on its moving/resizing functionality:</p>\n<p><img src=\"/uploads/cursor-states-demonstration-small.gif\" alt=\"Cursor transitions to arrows\"></p>\n<p>The edges show which direction you are resizing and corners are an affordance for the minimum size:</p>\n<p><img src=\"/uploads/pill-bar-animated-cursor.gif\"></p>\n<p><img src=\"/uploads/redlines-small.jpg\"></p>\n<p>Daydream's 6dof headset needed a stationary safety system that was not roomscale, and had to be a relatively small radius around the user. I suggested we use vignetting based on a sphere to suggest the directionality.</p>\n<p><img src=\"/uploads/standing-stepping-out.gif\"></p>\n<p>I used the assets from a Unity tutorial to make a VR game to collect data on how far people moved while dodging with a UI to try different radii and colors.</p>\n<p><img src=\"/uploads/asteroid-dodging-ver-2.gif\" alt=\"Safety prototype\"></p>\n<p><img src=\"/uploads/message-redlines-small.jpg\" alt=\"Messaging redlines\"></p>\n<p><img src=\"/uploads/internationalization-small.jpg\" alt=\"Internationalized messaging suggestions\"></p>\n<p>Of course, there was a bunch of other cool explorations and stuff I wish I could post, this was just as far as the shipping product got.</p>","frontmatter":{"title":"DAYDREAM"}}},"pageContext":{"id":"3c40c72c-14dc-5273-a086-370d735c906d"}},"staticQueryHashes":["1946499362","2606206317","3275389545","3649515864","4249971475"]}