Content Page Design

ABOUT + CONTACT ME DESKTOP Version

I have made some modifications.

I decided to drop the dropout menu and just go with the click function which directs to another page. I noticed that it was going to be a hassle if it were to be viewed on mobile. I don't like using my stubby fingers to click really small tabs.

This is the best I can do for now, I wanted to replicate an old book that people used to wedge dried leaves and stamps into.

The right page has too many colors and the grids are too random! Well, I guess it will do for now. I need to start designing the other pages if I was ever going to finish the whole artefact in time.

Below are a list of references of where I got my stock images from.

References

Beloit, (2003). Nurember Chronicle - Morse Library, Beloit College. [online] Available at: http://www.beloit.edu/nuremberg/book/addenda/Blank%20Pages.htm [Accessed 2 Aug. 2014].

Iconarchive, (2014). MetroUI Apps Adobe Photoshop Icon. [online] Available at: http://www.iconarchive.com/show/ios7-style-metro-ui-icons-by-igh0zt/MetroUI-Apps-Adobe-Photoshop-icon.html [Accessed 1 Aug. 2014].

Kenmorestamp, (n.d.). 1894-1895 2 cent Washington Triangles. [online] Available at: http://www.kenmorestamp.com/1894-1895-2-cent-washington-triangles [Accessed 2 Aug. 2014].

Psdgraphics, (2013). Vertical ribbons template (PSD). [online] Available at: http://www.psdgraphics.com/templates/vertical-ribbons-template-psd/ [Accessed 2 Aug. 2014].

Site Map and Flow Chart

I realised that I forgot to make a site map and a flow chart for my website. I want to keep the navigation simple and straight to the point!

Video Coding and Linking Pages

To insert my show reel into the landing page, I thought of using a lightbox. But there was a problem, it wouldn't be responsive.

So I searched online and found this software called VideoLightBox. I tried it awhile but the results looked really corny. So I played around abit and looked through other tutorials online.

Playing around with the code, I actually made the site redirect to a full-screened Youtube video.

Good thing:
-  It's full screen and resizes accordingly.

Bad Thing:
-You can click away from the page, you need to press back.

So, I was finding a way for the video to redirect itself back to my page once it finishes playing.
Found this really effective code.

<div id="player"></div>

    <script src="http://www.youtube.com/player_api"></script>

    <script>

        // create youtube player
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
              height: '100%',
              width: 'auto',
              videoId: 'ROmBhg54IjQ',
              events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
              }
            });
        }

        // autoplay video
        function onPlayerReady(event) {
            event.target.playVideo();
        }

        // when video ends
        function onPlayerStateChange(event) {      
            if(event.data === 0) {        
               window.location = "#";
            }
        }

    </script>

Let's just see how this goes.



LINKING PAGES
As for the page linking, since this program is only on preview mode it only saves css per page.
So, I'm going to have alot of css documents. Hopefully I could reuse those styles. But I do manage to link them though.
It's just that I would have different css's.

I could reuse the Boilerplate.css though, but as for the personal styling on each page, I'd have to save them separately.

CONTENT PAGES
I've tested the content page and I wanted it to look like a book as much as possible. At first I wanted it to be half a page, but figured, the whole page would be better!

Reminder to self:
- Add pages at the bottom!
- Navigation Toolbar
- Icons
- Visual>Text!

EDIT//

REMOVING DIVS IN MOBILE VERSION

I tried deleting the entire div when it comes to the mobile size, but it removes itself from different sizes as well.

Solution: Reset 100% to 0% =D

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.