SOI PART B

Feedback

I had feedback the the Entersite was not obvious and that the words 'Enter Site' was too rigid and unwelcoming. So, I changed it up!

So this is the before:

And After:

I had comments that the About and Work tabs on the textured pages are too near each other and looked like About work rather that ABOUT and WORK.

I don't really have time left to fix that, but I would in the future.

I'm done!

It's 12am now and I'm officially done!

I uploaded my website online as well, you can go HERE.

So I'm pretty okay with the outcomes, could be better. Okay honestly, it could be WAYYY better. There are a few bugs I don't think I have enough time to troubleshoot, but it's alright I guess. Honestly, nobody in their right mind would use RF while it's still in its preview version to build an entire site. 

Total time taken to complete the site: 36 Hours 

In the span of a week.

Now for the documentation. Since I have been referencing throughout my blog posts, I have just made it so much easier to compile all of them!

So anyway, here's my self reflection. I wrote it in a restaurant while I was waiting for my lunch at 4pm. (slept at 5am because of this) <--slightly poor time management.

SELF REFLECTION

      What have I learned? First, I learned how to scope for suitable programs that would fit the need of my personal brief of responsive websites. As part of my self-learning initiative, I learned the basics through online tutorials on Youtube and read comments and reviews on the programs on StackOverflow and such. I realised that Adobe MUSE wasn't going to be an option because it did not support responsive sites. So I opted with Adobe Edge Reflow.

Although the online tutorials were helpful, they did not address the many bugs and problems I discovered when I actually started to execute my site. My method of learning would be through trial and error as I have very little patience with lengthy instructions. I needed to see the result of my actions immediately, and that is how I learn from them.

    For the designing part of my self-learning, I learned to design interfaces for many different sizes of the same content. I'm glad to practice this as our classes do not expose us much to mobile interface design. With users using more of mobiles and less of desktops to surf the net (CNNMoney, 2014), I feel like this is a very needed exercise to test my skills of versatility.
As for my personal style, I have finally had the opportunity to execute what I feel describes me best. I have two interfaces of the website which are textured and another which is more solid and clean. This would represent my admiration for both realistic and solid designs.

Self-critiquing is also one of the key learning which I hoped I polished through this assignment. I learned to critique my design and evaluate on what makes a website user friendly and visually pleasing.

Now, for the programming area of my self-learning exercise. With this very unstable Preview program filled with bugs and limited resources, I have learned how to hack the functions in order to solve my problems although it may not be the most efficient way of doing so. I had trouble with hiding the elements I don't want to see on the mobile version but wanted to see on the desktop version. To fix this quickly, I just scaled them down to 0% to achieve that. Therefore, problem solving has been a large criteria of learning in this assignment.

As for time management, I always try to make sure that I divide my time equally over a steady pace between work and leisure/rest. I realised that I am less efficient and alert when I try too work for long hours. So, I would frequently take short breaks and rest to regain my enthusiasm. Other than this, I know myself very well that I could never produce a good work at the last minute. So, throughout the week, I paced myself to complete an achievable 10% of this work every day. I planned to have one day extra just in case I needed it. I this case, I have used it since I completed the assignment just on the day itself.

In conclusion, this project's aim is that it may or may not be submitted to the AWWWARDs competition. My final verdict of actually submitting this award would be : not yet. I feel like there's much to improve in the design and programming before I could showcase and introduce myself to the marketplace.

References

O'Toole, J. (2014). Mobile apps overtake PC Web usage in U.S.. [online] CNNMoney. Available at: http://money.cnn.com/2014/02/28/technology/mobile/mobile-apps-internet/ [Accessed 6 Aug. 2014].

The final 20 hours to Submission

So Dreamweaver decided to crash at the very last minutes.

I had to edit the codes on notepad.

Progress Update

So, I have started to link the pages to the external Youtube links (RF doesn't allow you to code in the program)

       <a img id='image1'href="http://www.youtube.com/v/ROmBhg54IjQ?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer"><img src='img/playButt.png' class='image' />

Settled with this code by looking it up from Video Lightbox, in the end I didn't use the animations.

Remembered I mentioned how I wanted to use block instead of hidden? It turned out the block didn't work either. I ended up scaling all the elements I want to hide to 0% and positioning them at the corner of the page.

When I checked the codes on Dreamweaver, I noticed I added a lot of the same images. Turns out my trial and errors were saved in the code although not apparent on screen.

When I use the scaling method, I had to scale them at all sizes one by one.
When I had to upload a new element in the mobile version, I had to scale them down to 0% in the Desktop and tablet sizes. It's such a hassle. Oh well, desperate times call for desperate measures.
I'm sure there's an easier way.

For the mobile size design, I kind of winged it in the font and such. (I don't want the hassle of linking fonts when RF already has them pre-installed) My font's weren't that elaborate anyway. Any special titles, I would just save them in a .png/.jpeg.

It looks like I have a 2 in 1 website! Which is really cool because both sizes show different types of styles I have while still parallel to the theme.

Currently, the only pages left to REFLOW are the Websites and Motion Graphics section.


It's getting easier now the more I use it.

References

Videolightbox, (2014). Video LightBox. [online] Available at: http://videolightbox.com/ [Accessed 1 Aug. 2014].

Adobe Edge Reflow - SO BUGGY

The program I'm using (RF) is reallllly buggy. Nowander it's called a 'preview' version.

I had troubles with the background and the divs, I had to work 3 hours just to get around the bugs to get what I really wanted.

There's this bug where you might accidentally drag your element too much to the right, then it would leave a white space in the background- which is impossible to fill although I played around with the percentage values/re-uploaded the background again.

I only have two more days left to code, so help me god.

Plus, my interface design doesn't really support responsiveness because it's so textured and rigid. Unlike plain bg's where.. AHHH. I can't think anymore.

At least my design is 100% done, and showreels too.

It's just the coding part which I thought would be really easy but isn't.

Okay since its a jpeg background it won't be scaling properly like the elements inside. I would looks like this:

Textured bg and solid bg. It's always safer with a sold BG.

5 Aug: Currently I have finished coding two pages. The work tab and the Homepage.

The homepage was easier because it didn't have too many elements.

Two things I discovered:

To unsee an element I could either choose to Display:None / or to hide the element.

Display none works better because it wouldn't effect the other resolution sizes unlike the 'Hidden' function.

TOOLBAR
As you can see from the picture on the left, I have changed the position of the ribbon as the horizontal div berserks my code in so many ways. I have resulted to just displaying the text there.

The ribbon is no longer going down the middle.

Jesus. I have 5 more pages to completion.

Designing Content Pages

So this is one of the sections: Installations

I have decided to put only my best installation works into the site to avoid overloading of information. So instead of four, I have decided to just put two of my most recent ones.

             

Two more to go! These are all desktop sizes.

Now my problem would be linking fonts.

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.