Designing Mobile Progress

I had a couple of mobile layout references before translating my desktop version of the design to a mobile version. Alot of examples online show how mobile layouts display information on chunk at a time.

It is highly likely that the interface would contain too many buttons on the page. It is kept to a minimum. As for the menu, after analysing various interfaces from Instagram and Facebook and other popular mobile sites, I discovered that the navigation for the menu are always at the top right.

Icons are used to simplify user experience and the buttons are kept to a minimum in each one.

This is a screenshot from my phone.

Picture (b). FrankCollective.

Here's the updated version of the: 

Desktop Version. I have added a flare at the Enter Site button to make it more obvious.

And this is when they click the video, a light box will appear and the video will play. Users can navigate away from the video just by clicking the surroundings of it.

I didn't design the tablet form for this as it would just have minor changes, ie. the placement of the Enter Site button.

Mobile Version.

To me, this looks like a bunting for a book release. I would probably need to redesign it. But for now, due to time constraint, I would just have to settle with this. 

I'm thinking about the placement of my show reel as well. (I don't want light boxes for mobile versions) Should it be above the Book or below it. I want people to view my show reel fist though.

There's also redundant information on the top of the mobile version where it states my name and career and in the book picture below where it says it two more times. I would want to fix this in the future.

*Edit/ I have switched them around and I could say it looks more like a mobile layout now!

Actually I might not even need the Book and rock texture. I could just put the Enter Site button.

I think I'll stick with this. The easier to navigate the better.

Tomorrow I will be designing the content pages.

References

Frankcollective, (n.d.). Frank Collective. [online] Available at: http://www.frankcollective.com/projects/tech-media-network/ [Accessed 1 Aug. 2014].

Mobile layout reference. Picture (b).

Shutterstock, (2014). Blue Shine Stars,disco Ray Light,Christmas Background,fiber. [online] Available at: http://www.shutterstock.com/video/video/clip-3022744-stock-footage-blue-shine-stars-disco-ray-light-christmas-background-fiber.html [Accessed 27 Jul. 2014].

The flare I added at the Enter Site Button.