Thursday, August 7, 2014
Wednesday, August 6, 2014
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.
So this is the before:
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.
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.
I had to edit the codes on notepad.
Tuesday, August 5, 2014
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].
Monday, August 4, 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.
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.
Sunday, August 3, 2014
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.
Subscribe to:
Posts (Atom)