• Home
  • Games Design
  • Mobile Apps I
  • VFX
  • Advertising
  • CPA
  • Experiential
  • Mobile Apps II

Slider

Yasmin - 0325946 - BIMD AUG 2015

Conceptual
I had a really tough time locking down my idea for experiential. Even after the proposal, there were just nothing special in utilizing what Augmented Reality (AR) can do. I went back to mind mapping and still nothing that could spark my interest.



All the ideas I came up with sounded boring, so I had just shut down any new idea I had. Amongst the ideas are:

  1. Japan Guide Map
    This was supposed to be a plain map of japan or a certain part of japan, vector illustrated. Then, once scanned, it would show what you can do in that certain part of japan. And when you click at those areas, it would reveal more information about that place. The reason why I didn't go with that idea is that it's not that interactive and you can easily find the information online instead of scanning.
  2. Memory Card Game Color Theory
    Memory with paired cards game was a way to teach people the color theories. Instead of pairing with the matching visuals, they pair it with a complementary color. For example, Red with Green, Blue with Orange and etc.
  3. Postcards
    Self-explanatory, a postcard artwork in motion.
  4. Greeting Cards
    People can give each other greeting cards and they can see animations on the characters and the text of the card depending on the occasion. 
I think the main reason why I hadn't used any of these ideas is because it didn't sound efficient, fun or interactive. Even if some of them are, I had put too much expectations for it to be good before I executed it. But sadly, I made it get the best of me and spent too much time on it that affected the end product of my Experiential Design project. Yes, this is definitely a huge lesson learned, to not spend too much time figuring something out, if it doesn't work just do something else.
Technical
In the technical side, my learning process regarding AR has been through doing my initial idea for Personal Project 1 module. Since Week 6, I was just trying to get the camera texture to appear on a 3D plane and animate that camera texture. It had worked when I wanted to get the camera texture but not animating it. 


When it animates, it doesn't repeat the texture, it becomes like this:

While if it's just a normal texture, it repeats:

Since my plan for Personal Project one didn't work. I had abandon that AR project. Then, I picked it back up and try to see whether I can do something with it for Experiential design. I had try to export it to Xcode, but there were too many errors, so then I didn't end up using the abandoned project. 

Then, I tried out tutorials such as Markerless AR that show the GPS, Maze Game and Vuforia Button Hover. 

The markerless AR tutorial was outdated since the guy wasn't using Vuforia AR Camera, so I had tried to translate that into by using the AR Camera. After doing so, the positioning of the ship moved along with the camera instead of just staying where it is. I continued on with the tutorial anyways but then there was a fault in the scripting and I couldn't figure out why. So I tried another tutorial.

This is the camera reflecting the camera view without the use of Vuforia AR Camera

The other tutorial was the maze tutorial game. Once scanned, the ball kept going out of the maze and is on repeat and since I was running out of time, I couldn't figure out why it wasn't working. I did the UI elements for the app, but since it didn't work, I didn't use it.




I did the hover button with the help of Mr. Razif and of a friend. I made a runaway for the model to walk on. Once the press me is hovered, the model would walk. 
the runaway

Model on static

Model on the move

I wasn't happy with what I made, so I went to look back at the maze and tried to fix the problem. Turns out the problem was that the ball kept going out the maze on the z index and that's why it had appeared and kept going out of frame. So I had put a plane above it so that the ball won't go out of place like so:



Then, I attached all the UI scenes together. I wanted to have a UI indicating to scan the maze, but again I had to skip that part due to time constraints. When, I played it, every UI element seems to work fine until the part where the ball goes to the exit point, I set a trigger to go to the next scene, but it kept saying "Fatal error!Allocating memory when it is not allowed to allocate memory" every time the ball passes through the trigger. After looking up why it keeps coming up, most of the forums say it's because of the new updated Unity is not compatible with Vuforia, which makes sense since I had recently updated my Unity. So, it's just an error within Unity, so I had exported it to Xcode, and it worked just fine. The only thing I wish I could fix was the Scan the Maze UI. I also wished to add a timer and a background music but now I know I need to manage my time more wisely. 

I would like to thank Mr. Razif, for supporting and trusting me with the problems I faced. Without him, I would've been a lost cause. 

Yasmin Kamarudin
0325946
BIMD Sem 4
Experiential Design

Week 11 - Week 15 (12.06.2017 - 23.07.2017)
Throughout these 4 weeks, I had worked on animating the cover pages, adding popups, jump links, slideshows and an overlay layer. The trouble I faced the most is creating the overlay layer where I had to figure out how to not make it overlay throughout the issue but only certain sections. I also had to figure out how to make the links appear only when the overlay layer is pulled up.

After consulting Mr. Razif, he had asked whether I had updated to the latest version of Mag+ Production Tool, and I realized I hadn't. So, then, I did. But, it still didn't work. After tinkering around with it for a while. I managed to make the overlay layer only appear at certain pages by wanting to put another overlay layer. It didn't work before because I was using 6.60 mib instead of the highest one after the update which was 6.80 mib.

Regarding to making the link appear when the pull up is pulled. I had looked at how each of the glossary in the mag+ website and on the linking tutorial, it had mentioned how once a thing is grouped the object id of the individual elements is no longer the same, so we had to change it. I had also tinkered around with the reference object id. At first I had put a bordered rectangle along with the pull up, I thought once it's in the group, it would just follow along with it when it's pulled up and etc. But then, it didn't work. I used the reference object id before and it worked! I left the rectangle box on screen where you can still see it, and when the pull up was pulled, the rectangle box was pushed, but it followed the pull up. So logically, if the rectangle box was positioned within the group it would appear together with the pull up. So I had done it with the linking too and it works!

Pull up with the linking overlay menu


Another issue I had faced was to create a slideshow within a popup. At first, the object state wouldn't allow me to delete the second state's photo, but I asked for help from my friend, and I figured it out. Another minor issue was how after the video ended, the media in the end didn't sync well with the end video. So I had to keep rearranging back the elements in order to make it the same. I wanted to add a slideshow for the how/what article so people could browse through how to style that item, but I couldn't find decent pictures for it and also with the lack of time, I only manage to do linking on that page. Regardless, I like the look of my magazine and I'm glad I could make it this far.

Final Look of the Magazine

Yasmin Kamarudin
0325946
BIMD Sem 4
Mobile Apps and Usability II
Design Prototype Phase

Week 6 (01.05.2017)
This week was just a planning stage. I had just started to plan on what my design and my photos will look like, so I had used a mockup pictures as reference. Plan where to take the pictures and etcetera.

I wanted to take pictures like the ones below for my what to wear segment:


 Some brainstorming notes on what I want for the how and what to wear segment. I had quite a tough time figuring this one out because it's basically two articles in one. It's also because it's a broad topic, narrowing it down is quite hard.

Week 7 (08.05.2017)
This week, I had a photoshoot for the favorite five article where me and my friends got together and had a photoshoot. The purpose was to also get individual photos of them to highlight their design style. I had asked them to wear what represents them and their quintessential style. I was also planning to shoot a what's in their bag video, but we had run out of time. So, I'm planning to come up with other alternatives. I also recorded a video for the cover page intro.

Week 8 (22.05.2017)
I had tried to create the mockup for the magazine these next three weeks. This week, I focused on the cover page and table of content.



There's a writeup next to the table of contents that states what the categories are. I'm planning to tap and flip and reveal it.

Week 9 (29.05.2017)
I consulted Razif with what I made last week, along with these pages, which are the cover article for the where and the who article and also an individual from the who article. Only later on, I had something for the how/what article.

click the image to enlarge

He had trouble reading the headline font but I decided to leave it as I liked the font and it suited my theme very well. Other than that, there's not much to say because it's incomplete.

I also shot for the where page which is the OOTD spots in Taylor's. I had planned to take OOTD shots with my friend Madina at the Taylor's Uni Square, with the trees and stairs near the end of the block, white walls, and of course, the lake. I had narrowed down to three categories which were 1. Taylor-esque (which are the Uni square, amphitheatre and etc.), 2. Nature and 3. White Wall & Stairs. I wanted different outfits for each category so I had planned to shoot the first three day of the week. But, she insisted on bringing two outfits for one day and the third spot on the next day, so that's what happened.


There were about 60+ photos taken. After that, I started to design the page for the OOTD spot. Initially, I wanted the user to click and tap and the places they want to see first but then it would've been too similar to the favorite five page where they pick who they would like to read about. I also started to dislike the polaroid image I had used, and the colors were too dark. So instead I drew the polaroid outline in illustrator and came up with this style which I liked for the where page. I also made it an ongoing article where it features what spot at taylors to feature next and along with the theme of my magazine, I featured Nature.


Since then I changed the style on all of my other pages too.

I was still stuck with my how/what page, so I thought maybe it could just be what to wear on the week basis. So I made days and what you could wear that day like Casual Friday, Dressy Monday and etcetera.

Later on, since it was in the theme of nature, I had wanted to use that too for the how/what article, so I included floral prints that are in trend.
I couldn't find enough pictures unless I took them, but doing two different types was hard, so I tried to figure out a new idea. 


Week 10 (05.06.2017)
We had to submit our mockup by the end of this week. Before that, I had consulted razif on the pages that I already have which was only the who and the where article.

The where article is similar as above, and the who article is as below:


I had utilized geometric shapes as a part of my design along with florals. I had repeated the same flowers throughout the magazine for consistency. Mr. Razif had asked me to put other florals and not reuse them. So, I had changed it later on. I also planned on having a menu bar where to could just pick who they want to read about next for flow and ease purposes.

He also asked me to change the color of the font for the where article since there was no hierarchy if it was orange. And to add indicators on the page, whether it's the end of the page, and what page is it on and etcetera.

I also figured out what to do for the how/what article, which is to feature in trend items at Taylor's

The final mockup MIB file where the whole magazine can be viewed on the iPad: https://drive.google.com/file/d/0B4A06Tf8s1ASNEphMjJGb3RwVHc/view


Yasmin Kamarudin
0325946
BIMD Sem 4
Mobile Apps and Usability II
Ideation Process & Proposal

Week 1 (27.03.2017)
This week was just an introduction week on what we are going to do in this module. Mr. Razif briefed us on what our project would be. In our case, it is to create an interactive magazine based on anything we would like. The requirements are that we have to create 3 articles, have a cover, table of content, instructions page and credits page.

Week 2 (03.04.2017)
This week was to figure out our topic and consult Mr. Razif. Some of the initial ideas I had are Fashion and Bullet journaling since those two are what I'm into right now. I had told Mr. Razif about it, and he wanted to know at what pages are possible within those topic. I was more sure of what pages I could use in the fashion topic but I was still quite unsure. So, he said to come back and consult again on with a more solid topic.

He also said to look at references online at what can be done using Mag+ so we would know what type of interactivity we can include in the magazine.
Week 3 (10.04.2017)
Consulted Mr. Razif as to what my articles and what would be their interactivity. I wanted my style of the magazine to be First, I was thinking broad for the targeted audience of my female magazine. I was thinking of featuring 5 Malaysian fashionistas/social influencers on instagram and showcase their fashion style. But, Mr. Razif, it's possible but I need to include something interactivity within it, and it's unethical to just take people's picture online without their permission. So he said better to take the pictures ourselves.

I was thinking what could be possible in trying to find models for my magazine especially for the who segment. Then, Mr. Razif said I could do within Taylor's or Design School. So, I had to go back and think again.

Week 4 (17.04.2017)
Had consulted Mr. Razif about what the three articles could be. At first, I had four articles which is how to wear, what to wear, top OOTD places and top five fashionistas. He said that the how to wear and what to wear could be combined since they have they share similar topic on clothing items. He also suggested to make it 5 options but limited have 2 functioning feature articles within that page topic. I also showed him what I plan to do with my interactivity and he said most of it can be done using html.

I narrowed my target audience to Taylor's university and for the segment of who, I had made this edition of the magazine to feature design school students. I had chosen me and my friends to feature in the article, just for the sake of the magazine. Although, it may not be true, that we aren't the most fashionable in design school, it could be hypothetically.

Week 5 (24.04.2017)
The proposal was due this week and here is the link to mine.  I was quite happy with my chosen articles, which is the how/whats, places to take OOTDs and the five fashion favorites in Design School. I also did a mockup cover.


The typeface is clipped masked with a rose gold texture which gives of this vibe that I like. The composition as well had imitate one of a polaroid, so I had decided then to have polaroids as a part of my theme.


Newer Posts Older Posts Home

ABOUT AUTHOR

Yasmin Kamarudin
a year older on the 19th of May
Taylor's University BIMD
Malaysia

Blog Archive

  • ▼  2017 (11)
    • ▼  July (4)
      • Experiential Design Week 7 - 15
      • Week 11 - 15: Prototyping & Final Submission
      • Week 6 - Week 10: Mockup
      • Week 1 - Week 5: Ideation Process & Proposal
    • ►  May (1)
    • ►  February (4)
    • ►  January (2)
  • ►  2016 (41)
    • ►  December (7)
    • ►  November (22)
    • ►  September (12)
Powered by Blogger.

Copyright © 2015 Yasmin - 0325946 - BIMD AUG 2015. Designed by OddThemes