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.

Trying out Edge Reflow

Okay so today I have decided to practice Edge Reflow and it turns out to be really easy! I used some random images from my computer to do so. The tutorial was really helpful.

Here are my outcomes previewed on Chrome 

For desktop:

For Tablet:

And for mobile:

There are a few bugs like how I can't drag element to certain places, but those are just really minor. As for the light box and linkage, I'd have to import it to Dreamweaver to do so! In the meantime, it looks really good!

I did it in just 30 minutes. 6 days left! It looks really feasible and I'm really excited about the outcome.

Lesson 10 Meeting with tutor

There are a couple of things missing in my SOI.

1. 'Matured' Content of my copy.
Basically I need more content.

2. To check the time, what can I execute as the deadline is next week.

3. Plan and design how I would place my photos and content. I could put some branding into the pictures as well, make it interesting and 'not plain' at the background. Placement is everything.

4. My showreel has some static parts where it could be zoomed in and out for effect. Some of the screen caps can be enlarged as well. The Bellas House is pretty short, can be lengthened.

As for the design of the pages, it's not likely that a book would be that long, so I would limit the number of scrolls to three.

How is the toolbar going to be? I suggested that it may be to the right of the pages.
I want it to be able to have a a fixed position when the user is scrolling as well so that they could navigate easier.

The animations would be later, I have to consider it on mobile platforms as well because roll-over animations will not work.

Refining Design

I have made it a point to redesign my interfaces, back to my old element after a really long hiatus of executing flat design.

I discovered that flat design trend is beautiful, clean and impressive. However, it removes any form of identity of a person which leaves them indistinguishable from other designers who are also gravely influenced by the trend. They would no longer have a personal style if they did not tweak the trend to fit their personalities. Plus, I'm getting annoyed by the angled faux shadows the created from the trend. If it's totally flat, why would it need shadows?! It looks like it's still deciding whether it would want to have depth in perspective or not. Hence, in the image above I have chosen a FD that makes most sense. Shadowless.

The simplicity of icons are taken advantage to a point where designers alike are disregarding important visual information for the sake of the aesthetics they would want to achieve from flat design. Don't get me wrong, I love the color combinations and everything, but I'm just furious how people would want to abandon their personal style to replicate someone else's (which is now so heavily breached, he/she may have wished to patent their design). Could it be an easy way out? I don't know. Replication. Reminds me a lot of China, only in design form.

Well, flat designers would argue that it's way easier to comprehend the icons and their meanings! Honestly, I disagree. If everyone designed their apps with icons with similar color schemes and styles, I would have thought they all came from the same company. Bam, self identity and branding gone. Boom.

I have also grown bored of the trend. Sooner or later, the audiences will too.
Therefore, I have decided to think ahead and polish up on a style which makes me, me. I would want to offer something that could not be easily replicated. I'm thinking like a fine artist.

Also, why did I revert back to my old way of design? I simply fell in love with it again and discovered that my eye for textural design is better than flat and other styles which I have experimented throughout the years. It has always been good to me.

Below is a reference to my design. Picture (a).

Ahhh.. Finally back in my own element. 

Picture (b) Interface design.

So, I have only designed the landing page. It's not even in its final form yet because the Enter Site Text seemed a little awkward at the side. I will try to find new placements for it.

To explain the two black bars on the top and bottom or the image, the reason why I did that was to replicate a cinematic look. I plan to animate the particles if I have the time.

References

Images

Gutenberg, (n.d.). OLD FORT SNELLING. [online] Available at: http://www.gutenberg.org/files/22719/22719-h/22719-h.htm [Accessed 14 Jun. 2014].

Reference for book design. Picture (a).

Hester, D. (n.d.). Free Texture - Cracked Stone Texture. [online] Grungetextures. Available at: http://grungetextures.com/freebies/36.php [Accessed 26 Jul. 2014].

This is a free download texture.

MUCCI, R. (2014). Some days you could knock me over with a feather...... [online] ActiveRain. Available at: http://activerain.trulia.com/blogsview/4380370/some-days-you-could-knock-me-over-with-a-feather----- [Accessed 24 Jul. 2014].

The feather behind the book in my interface in Picture (b).

The book was just a cover. (2011). [Blog] Edge Play. Available at: http://edgeplay.wordpress.com/2011/05/30/the-book-was-just-a-cover/ [Accessed 17 Jun. 2014].

The free photo stock for the red book.

Ubsdell, S. (2013). Apple Motion 5: Dust Particles in Light Demo. [online] YouTube. Available at: http://www.youtube.com/watch?v=SlbAmzpoeVIv [Accessed 27 Jul. 2014].

This video of the particles, I could use to overlay my site. To give it a more lively feel.

Rendering my Showreel

I have decided to render my show reel and keep it simple, suitable for quick viewing at my home page. I didn't want it to exceed 2 minutes, I wouldn't want people to get bored. Because I would, if it takes too long to convey a message.


I'm redesigning my pages as well, I don't want it to look like my first website.




I took roughly 5 hours to do the all the digging and re-recording and animation. The work ranges from my first year in degree to my final year.

For the music, many people really liked the music that I used in my showreel.

Here it is:


I have chosen this music because:
1. I don't know why, but majority of my work involved clocks. (Hickory/TheHouse)
2. It sounded so mystical and I didn't want my show reel to mean nothing and just look cool. I want it to tell a story too. I want to make this show reel, a part of my show reel as well.
3. The sounds are amazing. Why are there only 6k+ views?
4. Everyone I know is using dubstep in their reels. I realized that I was bored of dubstep.

For recording my work, I used a screen recording software called BANDICAM. It's really easy to use!


 40-5 : 35 Hours left!

Feasibility Check

1.5 HRS: Documenting and re-posting SOI PART B, (I never knew it existed until now)

5 HRS: Graphics

10 HRS: Coding

2 HRS: Planning and refining content

2HRS: REFINING everything

I still have plenty of time :D

References

YouTube, (2013). A.O.E. - Crystal Clocks and Music Box. [online] Available at: http://www.youtube.com/watch?v=Izf1gZWFc8w [Accessed 28 Jul. 2014].

Progress Update

After researching Muse and finding out which platform is most suitable for my project,

I have decided to use Adobe Edge Reflow.


Muse does not support responsive web designs.

Dreamweaver is like Edge Reflow, but more complicated because everything had to be typed unlike RF where you could just drag your elements in.

Although RF is still in Preview mode and might only be compatible with Chrome, it still produces a very good result.


Here's a tutorial I found on YouTube:

References

Brimelow, L. (2013). Responsive Web Design with Adobe Reflow. [online] YouTube. Available at: http://www.youtube.com/watch?v=hde9qB6vMf4 [Accessed 23 Jul. 2014].

Design References and Drafts

Link to website: Here

Reference: Sensisoft

The animations on this site are smooth but this site also requires a long loading time. This site uses Flash.

Link to website:  Here

Reference: Universal Studios Orlando website for Harry Potter

This site uses 3D elements and their animation is rather fluid. However, it takes quite a long time to load and the texts could not be read clearly. The user experience is rewarding. It uses Flash as well.

Here's a brief draft of the landing page of what it  may look like. Users are able to access my full website by clicking the link. They could also view my show reel before doing so by clicking on the play button. This will trigger a lightbox effect where the video would pop up and start playing. Users may exit the video by clicking anywhere else around the page.

References

Sensisoft, (2014). Sensi Soft. [online] Available at: http://www.sensisoft.com/ [Accessed 19 Jul. 2014].

Universal Orlando, (2014). The Wizarding World of Harry Potter. [online] Available at: https://www.universalorlando.com/harrypotter/ [Accessed 15 Jun. 2014].