{"id":3957,"date":"2018-03-23T18:35:25","date_gmt":"2018-03-23T18:35:25","guid":{"rendered":"http:\/\/digm.drexel.edu\/uxid\/?p=3957"},"modified":"2018-03-23T18:35:25","modified_gmt":"2018-03-23T18:35:25","slug":"the-basement-exhibition","status":"publish","type":"post","link":"https:\/\/philsinatra.net\/branches\/uxid\/2018\/03\/23\/the-basement-exhibition\/","title":{"rendered":"The Basement Exhibition"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-3958\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/03\/article-image.png\" alt=\"\" width=\"1660\" height=\"928\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/article-image.png 1660w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/article-image-300x168.png 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/article-image-768x429.png 768w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/article-image-1024x572.png 1024w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/article-image-1440x805.png 1440w\" sizes=\"(max-width: 1660px) 100vw, 1660px\" \/><\/p>\n<h2><b>A Visualization of Punk Aesthetic\u00a0<\/b><\/h2>\n<p>by Jake Bender &amp; Jake Culp<\/p>\n<h3><b>Introduction<\/b><\/h3>\n<p>This project was created by combining the ideas of wanting to recreate what it is like at a house show \/ punk concert in a 3D space and as well try to use augment reality to fully surround a user in visuals via a faux portal.<\/p>\n<p>These two concepts were brought together and the result is The Basement Exhibition.<\/p>\n<h3><b>Goal<\/b><\/h3>\n<ul>\n<li>Provide users with an immersive experience that includes both visual and audio elements<\/li>\n<li>Give the user the sense that they are stepping into a different world<\/li>\n<li>Allow for the user to interact with the exhibit and be able to step in and out of it with ease.<\/li>\n<\/ul>\n<p>With these goals in mind and the short time frame we were given, it was crucial to immediately start development and begin wireframing and creating moodboards so we could see how the application would look and run.<\/p>\n<h3><b>Audience<\/b><\/h3>\n<p><img loading=\"lazy\" class=\"size-full wp-image-3959 alignleft\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/03\/punk-person1.png\" alt=\"\" width=\"193\" height=\"289\" \/><img loading=\"lazy\" class=\"size-full wp-image-3960 alignleft\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/03\/punk-person2.png\" alt=\"\" width=\"433\" height=\"289\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/punk-person2.png 433w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/punk-person2-300x200.png 300w\" sizes=\"(max-width: 433px) 100vw, 433px\" \/><\/p>\n<p>Before creating a moodboard and wireframes, we needed to identify who exactly our audience was. We determined that the majority of users would be between the ages of 13-21 and would have some sort of punk music background. These meant moving forward we needed to heavily focus on incorporating the punk aesthetic into our design layouts.<\/p>\n<h3><b>Inspiration<\/b><\/h3>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-3961\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/03\/moodboard.png\" alt=\"\" width=\"898\" height=\"339\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/moodboard.png 898w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/moodboard-300x113.png 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/moodboard-768x290.png 768w\" sizes=\"(max-width: 898px) 100vw, 898px\" \/><\/p>\n<p>We took inspiration from old punk flyers, posters, and zines that we had collected online. We noticed after awhile that the punk aesthetic was very jarring and in your face. The colors were very bright and text would sometimes be placed directly over images without the thought of design in mind. We drew so much inspiration from these pieces of art and wanted the experience we were developing to really allow for the user to see up close and in detail these pieces of art.<\/p>\n<h3><b>Technology<\/b><\/h3>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-3962\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/03\/unityArKit.png\" alt=\"\" width=\"1204\" height=\"426\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/unityArKit.png 1204w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/unityArKit-300x106.png 300w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/unityArKit-768x272.png 768w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/unityArKit-1024x362.png 1024w\" sizes=\"(max-width: 1204px) 100vw, 1204px\" \/><\/p>\n<p>To create the application we used Unity game engine along with Apple\u2019s ARKit to allow for the user to place their exhibition wherever they want.<\/p>\n<p>To allow for the user to simulate a teleportation into a new world we had to implement custom shaders and materials into our Unity project. This was our biggest challenge with getting this functionality up and running. Once this process was complete the rest was creating the room in Unity and refining the details of the user interface.<\/p>\n<h3><b>User Flow \/ User Interface<\/b><\/h3>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-3963\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/03\/ui-1.png\" alt=\"\" width=\"720\" height=\"369\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/ui-1.png 720w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/ui-1-300x154.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>When it comes to the design of the user interface, we wanted for the setup process to be easy as possible for the user. This is due to the fact that the biggest impact the application has on the user is done after they have finished setup.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-3964\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/03\/ui-2.png\" alt=\"\" width=\"720\" height=\"362\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/ui-2.png 720w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/ui-2-300x151.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>Keeping our punk aesthetic and moodboards in mind, we decided to have a simple layout of steps that the user would complete in order to properly place their exhibit.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-3965\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/03\/ui-3.png\" alt=\"\" width=\"720\" height=\"370\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/ui-3.png 720w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/ui-3-300x154.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>Once the user has properly placed their exhibit, they are prompted to then walk through the portal and be seemingly taken into a different world. This world has the feel of being in a basement where a punk show is about to take place. Along the walls of the basement are posters and flyers that the users can view and look at.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-3966\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/03\/ui-4.png\" alt=\"\" width=\"720\" height=\"363\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/ui-4.png 720w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/ui-4-300x151.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-3967\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/03\/ui-5.png\" alt=\"\" width=\"720\" height=\"362\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/ui-5.png 720w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/ui-5-300x151.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>As well, there are future goals to implement interactive objects and videos in the basement space. Users could then tap onto the items to learn more about them. This gives the users more ways to interact with the exhibit and can create a more long lasting and enjoyable experience.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-3968\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/03\/ui-6.png\" alt=\"\" width=\"720\" height=\"362\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/ui-6.png 720w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/ui-6-300x151.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-3969\" src=\"http:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2018\/03\/ui-7.png\" alt=\"\" width=\"720\" height=\"362\" srcset=\"https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/ui-7.png 720w, https:\/\/philsinatra.net\/branches\/uxid\/wp-content\/uploads\/2018\/03\/ui-7-300x151.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/p>\n<h3><b>Takeaways<\/b><\/h3>\n<p>A huge takeaway from this project is seeing how much 3D objects can really help sell an augmented reality experience. Seeing the graphics that we had implemented into the design of the basement in AR made them seem almost life like and we think that they alone could have been enough to fully immerse a user into the exhibit.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; A Visualization of Punk Aesthetic\u00a0 by Jake Bender &amp; Jake Culp Introduction This project was created by combining the ideas of wanting to recreate what it is like at a house show \/ punk concert in a 3D space and as well try to use augment reality to fully &hellip;<\/p>\n","protected":false},"author":2,"featured_media":3958,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[8,54,9],"tags":[50],"_links":{"self":[{"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts\/3957"}],"collection":[{"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/comments?post=3957"}],"version-history":[{"count":1,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts\/3957\/revisions"}],"predecessor-version":[{"id":3970,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/posts\/3957\/revisions\/3970"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/media\/3958"}],"wp:attachment":[{"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/media?parent=3957"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/categories?post=3957"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/philsinatra.net\/branches\/uxid\/wp-json\/wp\/v2\/tags?post=3957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}