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 |
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 |
