Experiential Design / Task 2

Experiential Design - Task 2 : Trending Experience

WEEK 5: SCREEN PROTOTYPING

On the fifth week of Experiential Design, Mr. Razif taught us more in detail on how to implement animation and utilize the buttons in a more efficient and effective way.

Animating and Creating a Toggle Animation Button

We are going to create a floating sphere animation for every time the image is scanned and also one button to toggle the pause and play animation.

Animating a Floating Sphere

Create a Sphere Object under ImageTarget and press the Animation Tab at the bottom. Press the Create Button and name your file whatever.
Press the red button to record and move the sphere a bit, then paste the keyframe onto 1.00 second to create the first and last of the animation cycle.
Below is the example of the animation playing when scanned.

Making a Working Toggle Button

Create a "Script" folder to put your C# Script inside, then create a new C# Script and name it "AnimationToggle" for convenience-sake.
Open the AnimationToggle Script and type all of this for the code.
Click on the Sphere and drag the Script to the right side to link the Sphere to the Script.
After saving the script, double click the Toggle button on the hierarchy panel and drag the sphere from the hierarchy panel onto the [On Click()] box and set the function to Animation Toggle.
Below is the button working.

Pausing The Object by Tapping on it

Create a new C# Script and name it "TapToToggle" and drag the script to the Sphere.
Click on the script, and follow this code below.
Below is a demonstration of the example.

Creating a Toggle Button for the Video and Tap to Pause.

Create another Script, name it "VideoToggle" and drag it to your plane object.
Click on the code and write down this code.
Below is the demonstration of the button and tapping working.

CONCLUSION

In conclusion, this week taught me how to be more efficient with coding and how to not clutter the User Interface with too many buttons if they can be put into one, thus not hindering the User Experience.

___________________________________________________________________________________

WEEK 6: USER INTERACTION

On the sixth week of Experiential Design, Mr. Razif taught us of how to build a 3D Model of an art gallery and make it appear in the real world using AR.

Creating a 3D Virtual Art Gallery

We are going to create a mini version and a scaled up version of an art gallery using a package from Unity.

Installing "ProBuilder" Package Manager.

Go to the top "Windows" tab and go down to [Package Manager]
Change the "Packages: Unity Registry" to "In Project", now you can search "ProBuilder", then install probuilder.

Building the 3D Model [MyRoom_RoomSize]

Place "ImageTarget" and make a "Create Empty" under it, name it "MyRoom_RoomSize". Then create a huge "Plane" under "MyRoom_RoomSize".
Open the "Tool" tab on top of the program and put the ProBuilder Window beside the hierarchy tab for convenience.
Click "New Shape" from the ProBuilder window and choose the Cube. Create 4 walls on each side of the plane.
Create folder "Materials" then right click and choose "Create > Material". Change the Color to anything you want. Then drag it to your floor. Create another one for your walls.

Decorating Inside the 3D Gallery with Images [MyRoom_RoomSize]

Drag any image into the project and then change the texture type to [Sprite (2D and UI)]
Put the Images on the walls, and change the "Order in Layer" to 999

Putting UI in the real world (Buttons) [MyRoom_RoomSize]

Right Click on Hierarchy and create a Canvas. Change the "Render Mode" to [World Space] and put the "Event Camera" as [ARCamera]
Resize the Canvas down and put it under one of the images
Add a button, the press shift +alt. then on the right side of tab, press scale it to fit the entire canvas then name it "Details".
Make another Canvas and resize it to be the same as the image, then create a panel under it then press shift again and scale it to make it the same size.
Make CanvasPanel order in layer to 1200, then change the source image for panel to None and change the color to something darker.
Put a Text onto the Panel. Then hide Canvas details.
On the original canvas, go to Add Component, search for ArtDetailsToggle and enter, which would make a new script
Go to the script and copy the code below.
On Button, Put Canvas in the [On Click] box.
In OG Canvas, drag CanvasPanel onto the script.

Making a Miniature Version of the Gallery [MyRoom_RoomMini]

The miniature version doesn't need to have interactive features. Duplicate the roomsize gallery. Delete all Canvas.
Change the Scale of it.

Making it so You Can Toggle Between Mini and RoomSize

Create a Script "RoomScaleToggle". Follow the Code.
Drag the script onto the RoomMini model, then assign Mini Room and Room Scale.

CONCLUSION

In conclusion, this week has given me the lesson on how to create simple 3D Models, specifically of an art gallery. The lecture this week even taught me how to create the illusion of shrinking and enlarging a 3D Model, even hiding text and popping it out on command with the button.

___________________________________________________________________________________

WEEK 7: PROJECT PROPOSAL

On the 7th week of Experiential Design, I started on my Project Proposal for my augmented reality app.

Below are the instructions that were given for said task:

Developing a detailed proposal for your AR app.
Defining problems and goals of the project.
Researching the target audience and the user journey of the troubled users.
Coming up with visuals such as mockups.

My idea is to make an Augmented Reality app for Stage Blocking App where you can prop up your phone in landscape mode towards a stage and start dragging props onto the field to plan out your vision of the scene in the play.

Project Title
Stage AR

Problem Statement
Directors and Stage Managers for certain events such as a theatrical performance would often have a hard time figuring out where props/objects should be in certain scenes and also how and where the actors should be positioned and moving in scenes as well.

Goals of the Project

Helping users figure out the placement of props and objects in different scenes of a theatrical play.
Assisting users to figure out the positioning and movement of actors in different scenes of a theatrical play.
Easing users to plan out the blocking of scenes of a theatrical play without needing to move objects on the stage physically.

What the product is
The product is an app that uses Augmented Reality to help users plan out the blocking of props and actors for a theatrical event. The application will provide users the ease of planning out the positions of props and actors in scenes without the hassle of doing it physically by allowing users to point their cameras at the designated stage they want and drag 3D models of props and actors onto the scene and let them plan the movement of actors in said scenes.

Target Users

Target users are users who are in the entertainment industry or users who are into filmmaking and stage plays. This includes;

Stage Managers
Those who need to manage the stage and the decorations.
Directors of stage plays/theatrical events
To make it easier for them to visualize the story they created.
Filmmakers
To make/visualize the shots of the scenes in the film they want.

User Personas

I've conducted interviews with my fellow acquaintances whom are well-versed in the theatre/stage industry. Each of them voicing their pain and concerns on being a stage-manager and director. Below are their User Personas:

Sketches
Before going straight to figma and designing the mockup. I first sketched how I imagined the UI and program would look like. Below are my sketches for it.

Color Scheme
I decided that the color scheme will be bold and brash, like a theatrical play. The main colors of the Stage Blocking App will be Black, White, and Gold.

Mockups
Before designing the UI straight, I set up a mood board dictating how my Augmented Reality app would look like. I looked up clean, bold, and brash theatrical posters and took heavy inspiration from the works of Shigenori Soejima for my UI.

I decided that Canva was a far easier tool to make my mockups.

Below are are the full mockups.

I made the famous sad and happy theatre masks as the Logo for my Augmented Reality app as it is a very iconic symbol in the world of stage plays.

Proposal Document Submission

Proposal Presentation Submission

CONCLUSION/REFLECTIONS

This task really required some perseverance from myself, due to how tiring it was researching the needs and the must of this augmented reality app that I will be creating. From this is where I must finally realize that I have to start working on a prototype of my project as soon as possible. It may seem simple for now, but new ideas for my app are popping in my mind as I write this.

___________________________________________________________________________________

Search This Blog

MUHAMMAD ZAKY AULIA (0367842)