#dxb301

[loricshaw]

Reflection

I have really enjoyed this semester. I know my design is not as fancy, creative or technically proficient as some others in this unit, but I am really proud of what I have achieved.

It has been two years since I last coded and at the beginning of the Semester I was quite concerned with simply remembering HTML and CSS. My code is clean, well-written and easy to follow. I do my best to operate under best practices as specified by the W3C school.

Learning Javascript has been a steep learning curve, and I thank Dave for his patience, with everyone, particularly me. I have really enjoyed learning how JS helps to manipulate data and while my website doesn’t have super cool features, I love that I now understand that JS is how you create them.

It has been instrumental knowing Bootstrap, HTML5 and the JQuery library exist. They definitely assist in carving your coding time.

Thanks for an awesome semester, I have learned so much and I think my work reflects that.

[loricshaw]

Future Opportunities

If I had future opportunities on this project I would have really liked my project to be 100% responsive. Unfortunately in certain viewport sizes my assessment, in some areas, doesn’t look exactly as it should.

In assessment one I had wanted to go with a mobile design first. Unfortunately after I had started coding I knew this particular project would translate better on a larger screen (ie laptop/desktop). It is still slightly disheartening though.

[dcavdxbproject-blog]

My Website link (Hosted through QUT)

https://webhost.ci.qut.edu.au/~n8331715/ (Works best on Chrome)

[christopher-james-taylor]

Project Reflection

-- Overall --

The project of creating the website was a challenge for myself in a couple of ways. For me I had never worked with bootstrap before and nor had I worked with skrollr either. Having these two options, as well as jquery available were a major help in creating the website that I wanted. Overall there were a number of plans that i wanted to complete, such as the block form for the ‘alternatives’ section. These however, did not happen due to time and knowlegde constraints. 

-- Design --

The design of the website did morph and change as I started to code. Through also studying typography I gained a greater appreciation for it. I decided to change the look of the website from being white font on a black background to change it to the opposite, black font on a white background. This was mainly decided as I didn't want a website that was too harsh to the eye but something simple and effectively told the facts in black in white. 

I decided to keep the logos in the website in their original colours to add some difference to the website, besides the large video.

 I used Raleway 100 weight as my main font for h1 and h2 text, the main body font for quotes was Kohinoor Devanagari weight 200. The  main reason as to why was due to the fact that Helvetica is not naturally occurring on windows devices, so therefore for many windows users the wanted font would not be known.  

It is well known that many people are visual and when they peruse websites they prefer visuals compared to lots of text as they may not even read it. Comparatively I decided to only implement a smaller amount of images as I didn't want to deter the reader from the main facts and opinions that make up the main justifications of the debate about online piracy. This is keep an on the fence attitude and not make it one sided. A ‘present the facts, and they can make up their own mind’ approach was taken. 

-- Improvements -- 

Further knowledge on being able to control elements and fix them in place for a full responsive design, no matter the screen size, would be one improvement that I would love to take on. Currently the websites elements, such as the alternatives section, start to break down depending on the screen size.

-- Future --

For future websites I would like to take on a more full on topic that has more graphic detail to tailor the website to a more visual spectacle. I would also like to learn more cursor and jQuery interactive elements so to create a more interactive intuitively design website. 

[carlacandeladxb301processjo-blog]

CarlaCandela_progressvideo3

Progress in UI design for a beginner coder DXB301

Here I finally implemented colour changes in links to demonstrate important data that I wanted my viewer to take away. I also implemented this video because I wanted to show some of the illustrator icons that didn’t make the cut. I was attempting to do some hovering techniques but unfortunately due to some confusion, I was able to have a proper link to implement a Java animation. Essentially, I wanted java to change the colour of a stat and have it also change the garbage bins to the matching colour of the statistic simultaneously. I thought that this would make the experience even more enticing for my viewing thats interacting with my UI but with my limited HTML skill set it was a lot harder to implement than I thought.

I looked at various tutorials thats assisted me and gave me feedback and knowledge on the topic but one thing that I noted was that a lot of the time the tutorials provide you with a code but as to where I put it I’m still unsure. However, I was able to implement some colour change with hover in CSS and I am satisfied that I was able to achieve that action to make my UI even more appealing.

[carlacandeladxb301processjo-blog]

progressvid4_carlacandeladxb301

Continuing my progress work on my UIdesign for Interface Design. At this point CSS and HTML have been implemented.

I have finalized the layout of my interface design. I switched from an image that I found online to an image that I created myself on illustrator and found it to unite my minimal theme a lot more successful. This particular portion of the process was not too difficult in comparison to the implementation of some attempts with Javascript. At this point the parallax scrolling was executed with some obstacles. I was confused with the increase in vh increments. I understand that as you increase as you add more sections, but because I was only working with two layers I found the transitions to still be inconsistent throughout the viewport. I did my best to make it as seaming as possible but I really am proud at the fact that I was able to get the effect to work. It really does make a difference on the experience.

[captaininterfacedesign-dxb301]

Future improvements

Most of my interactions on this website are only hover and appear functions however, I would have really liked to implement some more animations to them to make it more interactive and interesting. I was too caught up with some of the layout/construction problems (eg. skrollr) I encountered during the development stage. I think for future practices where heavy coding is required, I would definitely need to really plan everything out carefully, as well as research all the possible jQuery I could use beforehand so that I get a sense of the direction and level of interactivity I could achieve.  

I also attempted to make my shirts svg animations appear one at a time instead of in a row (i.e. under each <svg> tags) however, was not successful. If I had the time, I would have definitely spent a fair amount figuring out how to do this. Theoretically, it should have worked as I targeted each of the <path> tags that were inside each of its <svg> parent tags by delaying them.

[captaininterfacedesign-dxb301]

I decided to change a data visualisation that I originally designed in the mockup; previously, the visualisation was sort of like a compass/clock where other factory accidents were recorded on it based on its time against the number of total victims. However, visually, I think this is quite confusing and unclear so I am back to using the very first idea that I had. The initial idea was to have a map of Bangladesh and as the user hovers over the dots placed on the map, more info on different accidents appear at the side. The only problem at the time was that I did not have any sort of ‘data visualisation’, but since I’ve changed the ‘dashed lines’ visualisation (i.e. with the skull background in #sectionvictims) to using shirts to illustrate, I can now also use this in the map section.