Lori Shaw

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.

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.

About Help

Help is a project created in response to a university design brief, but it’s a project close to my heart. As a new mum, I have friends who have experienced postnatal depression, or who know mothers who have. I was fortunate to not personally experience it this time round, but I know that my chances of suffering from postnatal depression increase with each child.

This is not a live website. To view the project please download the files by clicking here. Once the files have downloaded right click on the index.html file and open in your preferred browser (Chrome and Firefox recommended). This site is responsive to a point. For best viewing, please resize your browser to 1280x800 px.

UI experiments

There are so many cool things you can do using parallax scrolling, javascript and CSS animation, however I needed to be mindful that injecting too many features would detract from the message.

Background grey

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.

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.

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.

Three backgrounds

The disappearing clouds

The first three images above are how I envisioned the dark clouds disappearing to reveal a sunny backdrop in my design solution. This is an important turning corner in the story of postnatal depression as it signifies the user is on the healing path.

Through regularly attending tutorials and a lot of assistance from Dave, the second set of images depicts the first installment in using HTML and CSS to create the disappearing clouds.

Data circles

I had considered creating ‘data bubbles’ in my original design, these bubbles would float around the page. I decided against this as I didn’t like how the information looked on the particular page I was considering. 

Feedback provided to me from my first assessment, suggested I incorporate more data from my problem page into my design solution. This enabled me to re-consider the data circles in my design with the above content. 

These data circles don’t float around the page because this would affect readability and I need to be conscious of that in my design. 

Uppercase vs lowercase