Lori Shaw

DXB301 Interface Design -- 2015  -- Student # n8282978

[loricshaw]

Hashtags can have a huge impact on the reach of your social media posts, allowing new customers to discover your brand BUT there are four key pitfalls to avoid! Read about them in my new post out now. Link in bio 😏#️⃣📌👍🏼

[loricshaw]

Ask and you will receive. My beaut man knocked up some herb gardens for our back landing 😊 #blessed #gardeningideas #lovemyman #gardeningsolutions

[loricshaw]

Just doing my bit #blooddonor #redcross #bloodbankstrathpine #willyoudoyours #wholeblood #savedthreelives (at Blood Bank Strathpine)

[loricshaw]

Well that's it. My final class at Uni #QUT #weareampr 😢 (at Queensland University of Technology (QUT))

[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.

[loricshaw]

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.

To learn more about the HELP project please click here

[loricshaw]

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.

One feature I really like is when the green woman is healed from her postnatal depression, because she sought help, the green woman disappears and a white woman takes her place.

[loricshaw]

Background grey

Once the design was fully executed online, I began reviewing the aesthetics of the design. To make the foreground items pop, I manipulated the background cloud image, by placing a dark grey screen (at 20% opacity) over the top. This dulled some of the brighter, whiter sections of the background image.

[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.

[loricshaw]

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.

I really liked how each piece, using transform: rotate, moved off the screen. Then my creative side kicked in.  Postnatal depression is all about impression. The reason women and men don’t admit they have postnatal depression is because they are trying to show the world that all the pieces of the puzzle fit exactly where they should. This is when I came up with the idea to turn the clouds into a puzzle that smashes apart. Perhaps if we stop pretending that we all have a picture perfect life and we smash the puzzle apart, we’ll realise the picture behind the puzzle is much brighter

[loricshaw]

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. 

The circles are created using CSS. The text is then created inside the circles and again CSS is used to format them.

[loricshaw]

Uppercase vs lowercase

Originally, I had settled on a design that featured all uppercase words. After completing the Week 9 tutorial, I learned interfaces that feature several capitalised letters are hard to read. Given my target audience are people suffering from postnatal depression it does not make sense to capitalise all glyphs if this is going to affect readability. 

[loricshaw]

I have commenced writing the HTML and CSS for my single web page and its not looking too bad at all. Fortunately I had completed significant research into what I could achieve online and I am pleased with how close my web page actually looks to my original design solution!