wip

I started by searching for carousel scrollers as the Mobile Phones page (what the 1st page is called) and the history of handphones page could be made with it.

There's not alot of vertical scrollers, I found a horizontal scroller that was called a fisheye slider, thinking I could slowly figure out how to change it to vertical, but someone told me that theres a chance it would have a lot of problems- either doesn't work on ipad or only works on ipad (apologies I can't remember which) as they tried something similar, and that was troubling as I didn't have an ipad to test it on and the magazine has to work on ipad, so I searched again, and found this simple carousel slider.

By then my groupmates suggested for me to try working on it in InDesign straight away or Adobe Muse as they would seem easier to do than coding, and I wont waste as much time trying to fix any bugs that might appear.

So I tried to work on the Latest Mobiles page in Muse. As we recently learnt about scroll effects in Experential Design class, I decided to change to that instead of having the handphones rotating.

the first page: phone brand name + icons

how the rest of the pages for the various handphones will be like

The rectangle on the left is supposed to be a handphone image and the words on the right is the info about said phone. I decided to put 6 phones, all different brands: Apple, Sony, Asus, Lenovo, HTC and Samsung. The phones' information by the way, will be taken from mobile88.com.

After placing in the handphone images taken from google, a price tag is drawn in Illustrator and placed on every page except the first. It will also have to Scroll Effect of sliding in from the right and out as users swipe through. And for the first page, I've decided to change the way it was listed on the first image, as it looks weird. I decided to add some text and pin the phone brand's icons at the bottom of the page, so it will be at the bottom at every other page as well.

For the background, I decided to go with a more tech-looking texture. Downloaded a few textures to see how they would turn out.

So I decided to go with these:

For the icons that I earlier mentioned about pinning them to the bottom starting from the first page, I decided to change it as it was a bit hard to tell the pages apart when you are swiping it (not including the first page). Because the pages wont automatically stop on the page, and will follow how much the user's finger has swiped, I placed the icon for the next and previous page's handphones in each page respectively.

The bg for the phones is one long vertical img, as there is a gradient tone throughout the strip.

For the Phone History page, I used Muse as well.

The gray rectangle is where the timeline of the handphones will be shown to scroll up and down and the numbers on the right side of it is the timeline. The timeline is pinned to where its shown and each year will be linked to its respective pages, the number will be red in colour when on the selected timeline. Basically the first page is a pinned image overlaying the rest of the pages when swiped through.  The handphones' history information are taken from here and here.

After cropping the handphone images and copypasta their infos, heres what one of the pages looks like so far:

Then I tried changing the colour of the background:

Buut, I wasn't entirely sure how to design the background for History of Mobile Phones, as I kept trying to visualize something inspired from those handphone showcases, but the images on google weren't exactly very ..inspirational.
Here are a few designs i tried in Ai:

I was seriously stumped on ideas and don't even ask me how did that weird clashing gradient monstrosity get there, it was one of the first few random colour suggestions I didn't delete.
Well, here's how it turned out:

For the Interview page, I searched for actual interviews with mobile phone companies' representatives and decided to use some of the questions and answers from here, interviewing Hugo Barra, the vice-president of Xiaomi global, and work on it in InDesign.
Initially, I used the "insert into" function that places texts/images into a box, and users can swipe within the box to scroll though the words:

But I decided to just change the way the questions and answers were placed as it was a bit hard to read and it feels like its straining the eyes just to read it, and not put it in a box. It looked really squeezed anyway.

3 of 4 pages under the interview with Hugo Barra

After that I had to export the pages that were created in Muse as html so that it could be inserted as a web content in InDesign to see if it works:

Technology Wireframe

So as I've mentioned in the previous post, we're changing the Personality section to Technology. Here is the wireframe for it:

The phone directory page (? not sure what to call this page), history of handphones page and the interview on a made-up company's CEO page.

Whiteboard Doodles 2

So after he previous presentation, after some discussion among ourselves, and confirming with Mr Razif that it was still okay to change our section, we decided to change our Personality section back to technology. But instead of laptops, we would be focusing on handphones.

And like the previous whiteboard presentation, we drew out ideas for the magazine sections in wireframes- mostly.

p.s. the orc has no relation to the magazine

ignore the random doodle about catlings >_>

We added/made some small changes on some of the sections. And even planned out how the pages would be presenting each section. Though that part is still in planning.

Soo, I guess I have to explain about the wireframe for Technology. As can be seen on the last photo, the 2nd box is the 1st page for Technology. It is handphones layered over each other in a circular shape, to give it a sort of 3D-ish feel? The phones can rotate up/down based on touch-scrolling up/down while the description for the selected phone would show at the side, and at the bottom right corner is an animated price tag that would pop in/out everytime the phones are scrolled through.

The 2nd page- the box under it, is the "History of Handphones" section (title of page not confirmed). Where we were going to have a fade in/ fade out kind of effect scrolling through the timeline, but based on Mr Razif's feedback, we're having it as a scroll up/down. Maybe have videos playing on some phone screens if possible and the phone ringtones if we can find them.

3rd page is going to be an interview with some CEO of a technology-related company (we haven't decided on what company yet). There will be a picture of some phone that's made by his company at the top left corner (the square in pic), next to it is the title and on the right is his profile picture which, when tapped, will show a full body img. Underneath those is the interview questions. Which when tapped will play the recorded answer from a tape player image underneath. And maybe the tape player would have play/pause options like an actual tape player.

Client Presentation!

Just a day after our whiteboard presentation (Tues), we found out we had to present to the client, JMD Publications the day after (Thurs).

Did we panic?! Yes.. Did we manage to complete our presentation slides in time?! Yes, yes we did.
Here's the images of the wireframes I did for the section I worked on:

I guess I should mention we decided to change our technology section to personality. As we couldn't come up with much of a wireframe or content for it in the short time. Yes I panicked.

So, about the personality section.
The 1st page is a poster of the personality, which we decided to have our classmate Lisa, as a Hollywood actress. The poster would have some small animation of the words moving in, and possibly props like stage lights rotating upon entering the page.
Tapping the screen would bring us to the next page, where users can select from Awards, Biography and Movie Trailer which the personality starred in.
Selecting Awards, which is a picture of the Oscar, the awards tab will popup, and sliding down will close it. The squares on the right side are gifs of Lisa in various poses that follow from top to bottom to give off the effect of the reel moving.
Selecting Biography will also enable the bio tab to popup, and like the awards tab, slide down to close.
Selecting Movie Trailer, which is a pair of movie tickets will bring users to its page. Where a video of the trailer will play. Tapping synopsis, which is under the video will bring up the synopsis, and closing it will be the same as awards and bio.

Regarding the presentation, the clients didn't have much feedback, as I guess is because our group's presentation was in wireframes and maybe they couldn't picture what we were trying to convey. Anyway, at least one of the clients liked the film reel concept in the Movie section.

Presentation's Donee

Whiteboard Doodles

As the title states, we had to pick 3 sections for our magazine and discuss on the content.
-interactivity
-animation
-extras, etc.

So after much consideration on certain sections, we decided on movies, music and technology.
Then we started brainstorming on ideas for the content. As we had to present to Mr Razif on the whiteboard with our ideas, here's what it looked like:

The wireframe in Music is for Artist's Spotlight.

Where the left side is pictures of artists while the right side shows the info- music related such as albums and sample songs which play at a touch.

In Movies, the 1st wireframe is the navigation into the contents for music.

Which are Top 10, Staff Picks and Coming Soon. The film reel in the 2nd wireframe has a scrolling function and will have the effect of rotating. 

It holds the movie list and will expand/shrink on command.

For Technology, the wireframe shows Staff Picks of laptops.

It will show 1 laptop at a time, and allows swiping at the bottom column to navigate between the laptops. 

Tapping the price tag attached to the laptop will bring up info regarding the laptop.

Mr Razif's feedback was for us to think about what kind of services can the magazine provide? And what can people benefit from it?

Principle of Creativity

So for the class we were taught about the principle of creativity as stated below:

Principle of Creativity
1. Everyone is creative
2. Creativity is diverse
3. Can be described with 4 variables:
       i) Creative level
      ii) Style
     iii) Motivation
     iv) Opportunity


Before class ended we were tasked with answering 2 questions given to us by our lecturer, Mr Razif.

1. "If you have to choose between ios and android, which will you choose and why?"
If I have to choose between ios and android, I would choose android. But because I don't own any ios devices, I don't completely know what its like to have an ios device though I have used the uni's mac and apple tablet occasionally, its not the same as owning one and using it all the time. So unless I owned an ios device, I can't exactly give an unbiased answer based on quality and all that.

2. "If you have to choose either landscape or portrait, which one will you choose? And why?"
To choose between landscape and portrait mode for a magazine, I would choose portrait. Mostly because printed magazines are portrait mode, so people are generally accustomed and expect to view them in portrait mode even digitally. It would be naturally uncomfortable to read a magazine in landscape mode as there aren't any magazines printed in landscape mode anyway.

Interactive Magazine Assignment

After showing us the works done by our seniors, our lecturer, Mr Razif had us briefed on what we will be facing for the semester. Which is

JMD Publications - Jom Malaysia District

That is the name of the client which we will be working for in a few groups in class, for our assignment. Which is designing and creating an interactive magazine.

We will be creating content somewhere along the lines of lifestyle/fashion.
Mr Razif recommended some examples of magazines within those areas that have digital magazines: Style magazine and ZIP magazine (Zone Interactive Pesona).

So I was placed in a group- by Mr Razif's student randomizer on his tablet, consisting of Shaun as the leader, Justin Chai and me as fellow group members.

We have to think of the cover, table of content and visual guide.
Also, we have to list down as many sections as possible for a lifestyle-related magazine, and then select 3 which we will be working on for the magazine.
Here are a few suggestions listed during class by Mr Razif and the class:
-personality
-travel
-fashion (men,women, hijab)
-entertainment (including movie reviews)
-recipe
-travel

And to start thinking of what type of features the digital magazine will have to make it different from a typical printed magazine, such as interactive elements and multimedia content.