Final Presentation to the JMD Client

JMD Client Meeting

As above, So below

We did it! We managed to compile all the sections and pages into one whole Digital magazine and successfully overcome all kind of technical Errors and polished our Designs to look better. However, I believed we could have done better.Nevertheless, the client loved our work and he loved the Unorthodox Cover page and the "Lips Game". I feel so proud of myself that i achieved something and gain the interest of the clients.

Nevertheless, there were several good and bad comments throughout the group but that's what is needed to make your work look better. I would like to take this opportunity to thank Mr. Razif and Mr. Muzzamir and My group mates for making this successful and achievable. Without your help, there would not a digital magazine. I would like to also thank JMD for joining us on our journey to help build a Conceptual Digital Magazine for your future reference.

Overall, it was a great experience and journey for me.

See you real soon.

Final update on Personality Section

Finalized Personality Section

After all the technical errors and several polishing of pages, I managed to solve all the technicalities in this section and resorted to one type of interactivity for the "LipsGame". I decided to go with the back up plan whereby the lips color will be given and the user can decide to preview these available colors on the model's lips and test out which on may look nice on them.

Nevertheless, There were a lot of struggles when it came to the coding section but nevertheless i succeeded to achieved the interactivity of this whole section.

Solved God's Finger Technicalities but Glitched

The Image Sequence God's Finger

Unfortunately, based on the previous "succeeded technicalities" there were a few errors and glitches.

I was working on the Tabs that will appear on the globe where by users can click on the cross marks and see these tabs open and will synchronise fluidly. Despite the fact that it works, the tabs weren't able to follow the cross marks as the user rotates the globe through the scrubber.

The reason being because we thought it could work on an image sequence, apparently after further research, it is found that these the linking with these two things cannot be sync due to the different elements that its made from. Hence, we came to a block in our god's finger. But nevertheless, Mr.Razif managed to successfully rectify the globe to its maximum interactivity and lisa and kush managed to sort the tabs out and get them working.

Solving God's Finger Technicalities

Edge Animate Codings

After Lisa's attempt on the god's finger, It didn't manage to work as per planned therefore we sent the file to Mr.Razif to rectify and assist us. In the meantime, i took the file and try to find an alternative solution to it. We wanted the globe to rotate and show the different regions of places on the cross marks upon tapping it and as it rotates the globe syncs with the tabs.

I surfed through three websites including Edge Docks , Edge Hero, Edge Commons. I've tried three different ways but managed to succeed with one. i asked lisa to turn it into Image sequence whereby you save different angles of th globe so that when you slide the scrubber it will,rotate with it.

REFERENCE WEBSITES:

http://www.awwwards.com/touchswipe-a-jquery-plugin-for-touch-and-gesture-based-interaction.html

http://sarahjustine.com/2013/11/08/create-click-and-touch-draggable-scrubbers-with-edge-animate-cc/

http://rocha.la/jQuery-slimScroll

Revised Interview questions and answers for Personality Section

Interview Questions and Answers 

Nothing much at the moment, just revising the interview questions and answers for the interview section.

Roulette Rouge

By Ilisa Izhar

1.What does fashion mean to you, and how would you describe your personal style?

2. What inspired you to start your own lipstick line, and whats the story behind the name “Rouge”?

3. How comfortable are you working hands on with models and designers?

1.Fashion is how I express myself as an individual. Its a way of telling your own story without using words but only with your presence in various colours and items. Well, Im very laidback but I also like to try on different colours and always add a pop of colour to a statement for my outfit.

2. I’ve always been fascinated to start my own line but up until now I’ve never quite figured out on what I wanted to dwell in. The past year, I was in Paris and while chatting with my friend, an idea struck and we planned everything - jotting the details on cafe napkins *laughs* but that was also why the line is called “Rouge”.

3. I feel very delighted to experience all these kinds of work as this is something i would love to try in future.

Update on Personality Section Technicalites

Interactivity of the "LipGame"

So we tried to do something like this(check the link below) where there will be a Transparency filter that will reveal the lip's color. We decided to have several filters so users can test out several other colors. Unfortunately, we didn't manage to achieve this. But instead we went with another alternative in the next post to come.

https://fstoppers.com/comme…/editing-tips-after-images-72822

Update on Cover Page

Revised and Redesigned Cover Page

As for the cover page, i decided to go with something out of the norm,  As we know that the orthodox way of a cover page consists of a Masthead at the top, background picture, and highlights of the magazine. we decided to do it the unorthodox way, where after the pre-roll the logo of the JMD is place in a triangular manner.

The mini arrows just above the letter indicates that you need to swipe in that specific direction to view the highlights. Basically this was the idea we went for.

Update on Pre Roll

Pre-Roll Storyline

Basically, the pre-roll shows the three of us as models doing our photo shoot. As the camera pans from left to right, the models will appear on each individual slot and will change during intervals

For example, Lisa posing for her photo shoot then camera pans to the right then Aliff appears then camera pans more to the right sees Kush then fade to black. However, while I was editing the pre-roll for the magazine my computer CRASHED! and that was the end of it. After going to several Digital shops for disk recovery, it was a failure.

Revised Pre Roll

Thus, we had to change the whole pre-roll into something else. So we came up with the idea of using our logo and add VFX to it to make it look similar to what we had in mind initially. So, it will be Lisa floating on mid air and the J appears and flashes then to Kush floating too as the M appears then Aliff appears leaning on to something as the D appears. Right after that, the three models arranged side by side as the letter appears then fades to white.

Short Update: Photoshoot session for Pre-roll, Cover page and Personality section

Pre-Roll, Cover page
We decided to do a short teaser before the cover page. We will be introducing ourselves as models and between the transition from one model to another, we will include each of our shot that will have us placed next to the logo letters. Right After, this wil lead us to the cover page where it will show a picture of the four of us.


Personality Section
As for this section, we have capture pictures of our models promoting the Roug Lipstick Product and a few shots of her during the interview.

Back up Plan for Personality Section

Camera API Declined

We couldn't manage to work through it as this is far to deep into Programming and within the short amount period of time we won't be able to work on the rest of the pages/sections. Another problem with it is also because Windows user cannot preview on devices and because of this technical issue it is hard to work on a single Mac laptop. (Refer to Adobe DPS Technical Conditions)


The Backup plan

We will be going with the idea of using our model's lips as a template so it can be editable and tested out easily without further complications.

Short Update: General Progress

Our DPS Camera API Test (Failed) : http://www.adobe.com/devnet/digitalpublishingsuite/articles/getting-started-camera-api.html#articlecontentAdobe_numberedheader_0 

Glee Concept

Different pose of Model that can be rotated in 3D to get full frontal face as you scroll

Our Board that we share on Pinterest to gain and develop ideas: https://www.pinterest.com/kushdaman/m-a-g-a-z-i-n-ee/

Personality Section WIP

This will be our finalized layout for the LipSelfie game section. It's a double spread page of A4 where as you scroll down the name of the product will appear along with the interview questions. We have decided not to use Scha Al Yahya. Instead, we decided to use Lisa as our Model and the name of the product is Rouge. The reason being is because we are planning to have a concept of an image inside an image and we also discussed on having a "glee" kind of concept where we have the model stand in different position and we will insert Letters on each pose of the model that will spell out our magazine publication or the section of our magazine.

As for the cover page we are still finalizing our layout, at the moment we are putting that on a hold as we believe we are pretty tight on schedule as we further with codings. We also faced problems with getting the camer API to work as Phonegap wasn;t a success due to the fact of advanced programming coding that will require a longer development period to successfully execute it. For now, Mr. Razif has found an alternative which is using HTML 5 from HTMLRocks website. The downfall of this HTML 5 is that it is only applicable for Android users only. That is not the end yet, as we are looking to many other alternatives and solutions to solve this issue.

How Does This Layout Works?

Scroll Downwards: Sash flys in with name of the product and the model's name along with the interview questions and answers.

Scroll upwards on the Lipstick: Text will appear on every tier of the lipstick till the red part of the lipstick appears where there will be the Call To Action for the LipsSelfie Minigame.

E-Magazine Timeline 2015

"LipSelfie" Game (Research on Functions and Compatibility)

For the personality section "Lipselfie" minigame, I have found a way of coding the call to camera action.

We can use Phonegap Build: http://phonegap.com/

• With this software we can use it's plugins to activate the camera function. -All we need to do is embed this app into our Magazine app using edge animate.
• There are several plugins that we can use but we need to see which one is compatible with android and iOS.
• We need to download this.

Link to Plugins: https://build.phonegap.com/plugins

There are 3rd Party Plugins and Phonegap Plugins.

Recommended Read:

Phonegap Plugins (Camera) : https://build.phonegap.com/plugins/1173
Documentation: https://github.com/…/af18483d6970b32a22f016292…/doc/index.md

3rd Party Plugins (Canvas Camera) :https://build.phonegap.com/plugins/1361
Documentation: https://github.com/…/CanvasCameraPlu…/blob/e9d90c7/README.md

3rd Party Plugins (Image Resizer) :https://build.phonegap.com/plugins/1393
Documentation: https://github.com/…/PhoneGap-Image-…/blob/0c4fae7/README.md

3rd Party Plugins (Canvas 2 Image) :https://build.phonegap.com/plugins/855
Documentation: https://github.com/…/c773e2351203b73dd91b4d7123fe…/README.md

3rd Party Plugins (Custom Camera) :https://build.phonegap.com/plugins/907
Documentation : https://github.com/…/phonegap-custom…/blob/7f0e2ec/README.md

3rd Party Plugins (Native Camera) :https://build.phonegap.com/plugins/1225
Documentation: https://github.com/…/cordova-plugin-…/blob/e58431c/README.md

Discussion Session 2

Personality Section:

Model (Ex: Tyra Banks)
Interview (6 Q's)
Double Spread Page | A4
Portrait
Lipstick Line
Minigame: Take a Selfie of your lips, Edit to your Preferences, Share

Back-up: Use the model's lips and edit from there

Fashion Section:
Trends and Season

God's Finger Map interactivity
Youth Outfit Trends of the region
Region Markers: < 5
Pop out and Parallax interactivity for each region

Back-up: Normal scrolling, No Rotation but selectable

Fashion Section:
Accessories

Box Wiggles attracts the users attention to click it
Box Exploding all accessories from  Necklace to Handbags to Watches
Zigzag scrolling
7-10 Products
Slice/Slide Information of the product

Back-up: Normal Zigzag scrolling without explosion

Brainstorming Session 2

After the feedback of our Client, we had to set another brainstorming session as the client's request didn't satisfy our laid out ideas. Therefore, we decided to revise our magazine sections again. This time around we have decided to set our magazine into a fashion based magazine. In this magazine, we have finalized to 3 sections, which are Personality section, Regional Section, and Festive Section. 

Under the Personality section we decided to have a famous celebrity talk about her Lipstick line where we decide to have a game of color your lips according to your own preferences. We thought of having the user take a selfie of themselves and edit their own lips using the product from the line and they could share it on social media.

Under the Regional section we decided to have an interaction called "God's Finger" whereby the user can rotate the globe and view the latest trends in several other regions of the map. Each part will have a pop out stating the outfit's details and where can they find it.

Under the Festive section, we decided to have outfits for different events like concerts such as Coachella, Tomorrowland , etc. We decided to have a Point Of View interactivity whereby users will go through different stalls before reaching to the stage. Somewhat like Google Street View.

Discussion Session 1

We discussed on our task delegation and further develop on our contents based what each section should look like and what feel we like to give it. We mentioned on pop colors for the personality section and we also discussed what the whole magazine is all about. Therefore, we decided to have the highlight of this magazine to be about the latest trends in fashion.

Brainstorming Session 1

A little recap of our brainstorming session, at the early stage we decided to divide our sections into 3 different sections namely Fashion, Travel and Food. Later, we discussed the contents and the flow chart of the magazine. (Flowchart can be found in the JMD Publication Pitch). As for the interactivity of the magazine we decided to have some parallax scrolling, mix and match mini games, etc. Our magazine is more towards the new in Trend fashion where we want to include the latest trend in fashion along with to match the Seasons. As for travelling section, we thought of Road trips, Places to visit (Hotspots), etc. We also thought of having an interactive map as we scroll downwards. As for the food section, we thought of including café hopping, healthy foods and introducing local foods to foreigners and foreigner foods to the locals.

Q1. If you had to choose between iOS and an Android which would you choose to develop for and why?

A: I would choose Android because it has a potential to provide Android user the compatibility to use Apple based apps.

Q2. If you had to choose between landscape and portrait which would you choose and why?

A: I would choose Portrait because I believe we are all by default portrait orientated. If we see how people use their smartphones, people are more towards portrait scrolling rather than landscape scrolling.

1st Phase Contact Report

JMD Contact Report 2015

Click on the link below to view the Contact Report:

JMD Contact Report 1st Phase

JMD Publication Pitch 2015

JMD Publication Pitch 2015

Click on the link below to view the Pitch: 

JMD Publication Pitch 2015

Personal Notes (Pitching)

Further Details in the Contact Report

Innovation & Collaboration: Principles Of Creativity

What is Creativity?

Creativity is the act of turning new and imaginative ideas into reality. Creativity is characterised by the ability to perceive the world in new ways, to find hidden patterns, to make connections between seemingly unrelated phenomena, and to generate solutions. Creativity involves two processes: thinking, then producing. If you have ideas, but don’t act on them, you are imaginative but not creative.

What is Innovation?

The process of translating an idea or invention into a good or service that creates value or for which customers will pay.

Principles of Creativity:

- Everyone is creative

- Creativity is diverse

- Can be described with 4 variables:

1.Creative Level

2.Creative Style

3.Motivation

4.Opportunity

Iteration

-Design

-Develop

-Deploy