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.

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.

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.


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.