Experiential Design / Task 3 Creative Experience Design Project Prototype
01.10.2023 - 09.11.2023 (Week 05 - Week 11)
Jacquline Lim Xin Ying / 0351304Bachelor of Design (Honours) in Creative Media / Games Studies
Experiential Design / Task 3 / Creative Experience Design Project Prototype
INSTRUCTIONS
[ Updated Proposal ]
After careful consideration and exploration, I have decided to shift
my focus from the AR navigation idea for travelers to the concept of AR
business cards. This decision was made based on several crucial factors that
align with the evolving needs of contemporary professionals and the dynamic
landscape of the design industry.
Firstly, the concept of AR business cards provides an exciting opportunity
for designers and other professionals to showcase their unique skills and
talents in an engaging and interactive manner. By leveraging AR (augmented
reality) technology, individuals can transcend the limitations of
traditional paper business cards and create a dynamic platform that allows
them to share a comprehensive portfolio, highlight their proudest works, and
provide real-time updates about ongoing projects, workshops, or events.
Secondly, the AR business card concept aligns perfectly with the current
trends in digital marketing and networking. In an increasingly digital
world, professionals need innovative tools to stand out and leave a lasting
impression on potential clients and collaborators. By integrating AR
technology into the conventional business card format, individuals can
create an immersive and memorable experience that reflects their creativity
and expertise.
Furthermore, this new direction allows me to explore the potential of AR
technology in promoting local businesses and fostering community engagement.
By empowering designers and other professionals to personalize their AR
business cards, I aim to contribute to the growth of a vibrant and
interconnected network of creative individuals within Kuala Lumpur and
beyond.
Here, you can find a detailed proposal outlining the key features and benefits
of the AR business card concept. Through this proposal, I aim to showcase
the immense potential of this innovative tool in revolutionizing the way
professionals connect and collaborate in the digital age.
Prototype in Figma
UI Elements Design
UI Elements Design
After conceiving how my project would be, I started to arrange the layout and develop all the UI elements that would be necessary to accomplish my project, utilizing Figma. The dimension of the frame is 390 x 844, the preset frame measurement of Iphone 13 & 14 in Figma.
UI Elements File (Excluding AR Cam Elements):
https://drive.google.com/drive/folders/1z9pa91ngDadHuu4imEX71OSdn_TklcLS?usp=sharing
Prototype in Unity
Progress in creating the AR aaplication
To start, the database need to be set up in vuforia engine. You may visit Task 1 to view in details. After that, include the image target in the scene so that I may add the desired image or animation to it.
|
| Fig 1 - UI Elements in Adobe Illustrator (Week 9, 25th Oct 2023) |
The majority of my visual components were made in Adobe Illustrator before
being imported into Figma as Figma is not as versatile as Illustrator
when it comes to designing.
Prototype in Unity
Progress in creating the AR aaplication
To start, the database need to be set up in vuforia engine. You may visit Task 1 to view in details. After that, include the image target in the scene so that I may add the desired image or animation to it.
[ Adding Video ]
Fig 2.1 & 2.2 - Video Player & Video Player > Play
Before anything else, I would like my image target to include a video of
my logo at the top. In order to put my video, I built a 3D plane on top of
my image target and added a video player component to it. I then drag the
plane which have my video on it to the
onTargetFound() in the
image target and select the function
to play my video when the image
target on found. To stop the video from playing, drag the
plane from
layer to
onTargetLost() and change the
settings to videoPlayerStop.
|
|
Fig 2.3 - Canvas > Render Mode Settings
|
In the next step, I created a
canvas on my
image target and changed its settings
which fall under inspector "Render Mode" to world space and drag
AR camera to
Event Camera. It will allow me to
resize to any dimensions, I adjust the canvas to the exact size that will
fit my image to target it. So I could add any kind of user interface (UI)
image or text to this canvas; but, for the UI to show with the image
target, the canvas needs to be inside the image target.
[ Clickable Icons ]
|
| Fig 3 - UI Elements Texture Type |
Following that, I then added the UI
Text (TextMeshPro) under the
canvas which contains the basic
information like name and email address. Furthermore, I have also include
some buttons for my social media or portfolio, like Instagram, Blogger and
Wix.com for instance. For those buttons, I inserted the social media icons
that in png format that I found online. In order to apply them to the
canvas, I change the texture type from 'default' to 'sprite 2D & UI' after importing the images to asset folder. Then, I apply the script "LinkManager" that I wrote which can link to the specific social media that I wanted
when I click on the button that illustrated on the device interface.
Notes
Scene > Vuforia Engine > add database
+ Image Target (type: from database) > Assets folder
Image Target > UI > + Canvas
Inspector > Render Mode: World Space; drag AR Camera > Event Camera
*adjust canvas size
*adjust canvas size
Canvas(that created before) > +
Texts / Images
*adjust their sizes and position
*anything that wanted to be add will be done under "canvas" layer
(e.g. bg, images, logo, text, etc.)
< Clickable Link >
Assets folder > create a script folder > create > C# Script > Rename (can be done only once) > open VS Code
< Clickable Link >
Assets folder > create a script folder > create > C# Script > Rename (can be done only once) > open VS Code
<to insert the link>
+ empty > rename to "link" > drag "script" to "link(the one that just created)"
*go to the layer you want to link
+ empty > rename to "link" > drag "script" to "link(the one that just created)"
*go to the layer you want to link
+ component > + button
<to call the function from the script>
drag "link" to onTargetFound() > On Click() > linkmanager >
openinsta
*depends on what you named you script for the On Click() section (Fig 2.1)
< Linkable Icons >
Canvas > + image
Assets folder > + new folder (UI Elements) > import/drag your desire
image
select the images > texture type > from "Default" to "Sprite 2D &
UI"
*go to the layer you want to link
Source Image > drag the image you import earlier to it
*resize & position
*to add the link refer back to <Clickable Link>
< Add Video >
Image Target > + 3D Object Plane > + VideoPlayer
Assets folder > import the clips or videos > drag it to VideoPlayer
Image Target > onTargetFound > + event > drag Plane layer to
onTargetFound
*to call the function pf playing video refer Fig 2.2
<to stop the video play>
Image Target > onTargetLost > + event > drag Plane layer to
onTargetLost
< Text Animation >
Canvas > under "animation" section > + new clip
*create the animation of text sliding out by controlling the frames
|
|
Fig 4 - Text Animation |
Besides that, I have added some animation for my video text and my icons.
To make the text appear after the video finishing playing, I added an
animation to the text to make a delay effect. In order to do that, I added
a new clip after selecting 'canvas' that fall under 'animation'
section. Then I will be able to create an animation to the text that give
the effect of sliding out from my image target with the timing I prefer.
In this case was 84 frames (1:24), the timing can be adjust by controlling
the time frames.
[ Application Flow ]
In order to contain a completed app flow, Figma was utilized for generating the UI elements to create the splash screen and home screen of my ar application. After exporting all the elements individually, I imported them to Unity and change the settings of all the images (refer to Notes<Linkable Icons>).
[ Application Flow ]
In order to contain a completed app flow, Figma was utilized for generating the UI elements to create the splash screen and home screen of my ar application. After exporting all the elements individually, I imported them to Unity and change the settings of all the images (refer to Notes<Linkable Icons>).
Afterwards, I create a canvas with the dimension of Iphone 11 pro and
added the background image I imported earlier. I then add all the
elements like buttons one by one onto the canvas and adding links as
indicated above. As a reminder, new scene need to be created for every
new page. For navigating to a new scene, I follow the lectures given
previously by Mr. Razif.
First, assign the image game object and the button for switching the instruction image. I have used the index function as an array list to store the images. At first, the index 0 image will appear when switching to the instruction page from splashing page. The Next() function will add 1 into the index that will enable it to switch to the next instruction (instruction page 2). The Previous() will -1 to the index which will bring the user back to the previous instruction page (instruction page 1).
|
|
Fig 5.1 - Switch Instruction Script |
First, assign the image game object and the button for switching the instruction image. I have used the index function as an array list to store the images. At first, the index 0 image will appear when switching to the instruction page from splashing page. The Next() function will add 1 into the index that will enable it to switch to the next instruction (instruction page 2). The Previous() will -1 to the index which will bring the user back to the previous instruction page (instruction page 1).
 |
| Fig 5.2 - Scrolling Function |
To create the scrolling function, I assigned 2 panels, mask and userprofile. I then adjust the mask panel size to fit the scrolling area that I desire. In order to mask the userprofile panel, I need to make the layer to as a child layer of mask panel that added the mask component that fall under 'inspector' window. After inserting all the images, I added the component of button to them to link them to the AR Camera. Also, I adjusted the placement of the 1, 2, and 3 panel to make it more visually pleasing. To actually give the scrolling effect, a component that named "Scroll Rect" is essential to be added under mask panel.
Final Creative Experience Design Project Prototype
Final Creative Experience Design Project Prototype
Introductive Presentation Video
REFLECTIONS
The process of creating my AR business card prototype involves exploring the complex domains of augmented reality (AR) technology and user interface (UI) design. Every stop along the way offered me a different set of obstacles to overcome and chances to learn new things and hone my abilities.
One of the challenges I encountered was the task of combining different software tools, such as Vuforia Engine, and Unity, to create a cohesive AR experience. This required careful planning and attention to detail, ensuring that each tool interacted seamlessly with the others. Figma proved to be an invaluable asset during the UI design phase, allowing me to rapidly prototype and iterate on various layouts and visual elements, gathering feedback from peers along the way.
Utilizing Vuforia Engine, I crafted image targets that acted as gateways to a world of augmented information. Upon recognition of these targets, animations would spring to life, and additional details about my professional profile would unfold before the user's eyes. This interactive aspect transformed the AR business card into an engaging and memorable experience.
The integration of Unity into the development process marked a significant milestone in the project's journey. With Unity, I could bridge the gap between the UI prototype and the actual AR application, importing and manipulating UI elements from Figma. This streamlined workflow ensured consistency across platforms and allowed me to focus on the finer details of the user experience.
Throughout this project, I was constantly challenged to think beyond the confines of traditional design and development methodologies. The AR medium presented unique opportunities to push the boundaries of creativity and innovation. I experimented with various techniques to create visually compelling and interactive elements, ensuring that the AR business card not only conveyed essential information but also left a lasting impression on users.
The culmination of this project provided me with a comprehensive understanding of the principles and techniques involved in creating captivating AR applications. I gained valuable insights into UI design and AR technology, equipping me with the skills and knowledge to tackle future projects with confidence and a touch of AR magic.
As I reflect on this project, I am filled with a sense of accomplishment and gratitude. The challenges I faced along the way have undoubtedly shaped my approach to design and development, instilling in me a deep appreciation for the power of technology to transform and enhance human interactions. I am confident that the lessons learned and the skills acquired during this project will serve me well in my future endeavors, allowing me to create AR experiences that are not only technologically advanced but also emotionally resonant and truly unforgettable.
REFLECTIONS
The process of creating my AR business card prototype involves exploring the complex domains of augmented reality (AR) technology and user interface (UI) design. Every stop along the way offered me a different set of obstacles to overcome and chances to learn new things and hone my abilities.
One of the challenges I encountered was the task of combining different software tools, such as Vuforia Engine, and Unity, to create a cohesive AR experience. This required careful planning and attention to detail, ensuring that each tool interacted seamlessly with the others. Figma proved to be an invaluable asset during the UI design phase, allowing me to rapidly prototype and iterate on various layouts and visual elements, gathering feedback from peers along the way.
Utilizing Vuforia Engine, I crafted image targets that acted as gateways to a world of augmented information. Upon recognition of these targets, animations would spring to life, and additional details about my professional profile would unfold before the user's eyes. This interactive aspect transformed the AR business card into an engaging and memorable experience.
The integration of Unity into the development process marked a significant milestone in the project's journey. With Unity, I could bridge the gap between the UI prototype and the actual AR application, importing and manipulating UI elements from Figma. This streamlined workflow ensured consistency across platforms and allowed me to focus on the finer details of the user experience.
Throughout this project, I was constantly challenged to think beyond the confines of traditional design and development methodologies. The AR medium presented unique opportunities to push the boundaries of creativity and innovation. I experimented with various techniques to create visually compelling and interactive elements, ensuring that the AR business card not only conveyed essential information but also left a lasting impression on users.
The culmination of this project provided me with a comprehensive understanding of the principles and techniques involved in creating captivating AR applications. I gained valuable insights into UI design and AR technology, equipping me with the skills and knowledge to tackle future projects with confidence and a touch of AR magic.
As I reflect on this project, I am filled with a sense of accomplishment and gratitude. The challenges I faced along the way have undoubtedly shaped my approach to design and development, instilling in me a deep appreciation for the power of technology to transform and enhance human interactions. I am confident that the lessons learned and the skills acquired during this project will serve me well in my future endeavors, allowing me to create AR experiences that are not only technologically advanced but also emotionally resonant and truly unforgettable.
Comments
Post a Comment