#ui explanation

[juliekao]

Design Explanation- Stars

The number of human trafficking victims is incredibly larger; people can become the victims of human trafficking in the very small amount of time.  In this interface, I aim to dramatise this information and present it in the way that information be easily read and received.

In this section, I decided to use real time counter to calculate the number of people who has become the victims of human trafficking in the time that user has spent on the site.

The user is most likely to engage with the information when some parts of the data is relevant to them. In this case, data is no longer only a larger amount of number, but calculating the time user have spent on the site allows data to have connection with the user .   

[loricshaw]

Colours

In the design phase, a light coloured green was used to highlight specific words and to differentiate between the woman ‘suffering’ postnatal depression and the other mothers (who are white).

Once I moved into the final project I felt this colour didn’t have have impact (as shown in image 1 above). So I played around with other types of green. I needed a green that stood out from the background. One of my favourite greens is the one above in image 2. Unfortunately this lime green looked good in the wording, but not on the woman, it was too much for the screen.

Eventually after taking pictures of different coloured greens around the home I settled on the green in image 3. This green has impact on the screen, makes the words and woman stand out, and is still very similar to the original softer green I had chosen.

[loricshaw]

Navigation

Initially, only four navigation items were added to the design. This was to encourage users to engage the parallax scrolling, as each section relates to the next.

It was pointed out during the Parallax scrolling tutorial that handheld devices don't respond well to parallax scrolling (less so in IOS devices, than android). For this reason four additional navigational items were added. Now, along with the media querys, the additional navigation allows the web page to cater to more devices.

[loricshaw]

Responsive Design

Google Chrome’s Developer tools were used to assist in creating a responsive design.

The best screen size resolution for this web page is 1280x800px. However, given the number of devices that can now access the internet, the following media queries were set up CSS:

Max-width 599px (for small devices - phones)

Min-width 768px & max-width 1024px (orientation: portrait) (for tablets)

Min-width 768px & max-width 1024px (orientation: landscape) (for tablets or smaller laptop screens)

This will assist users who wish to view the web page on other devices.

It should be pointed out that the design uses javascript, in particular parallax scrolling, as a major feature of the design. For this reason handheld devices are not recommended.

[loricshaw]

Three backgrounds

There are three separate ‘background’ images used in this design. One complete cloud picture (image 1 above) is used to overlay the nine separate cloud images (image 2 above) that ‘disappear’ to reveal the actual background image (image 3 above). The full cloud image was needed as the seam lines from the nine separate images were distracting from the design. Using CSS opacity in HTML (and Dave’s assistance) I was able to make the first background image disappear to reveal the puzzle pieces, which then also disappear using transform: rotate, to reveal the final background image.