Thursday, July 31, 2014

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.


Wednesday, July 30, 2014

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.

Tuesday, July 29, 2014

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

Tuesday, July 22, 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].

Wednesday, July 2, 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].