TWO. OH. FOUR.

Overall I am happy with my completed prototype.  I approve of the interface design and love the colour scheme, font choices, images and layout.  They all work well together and suit the intentions of the site.

From undertaking Intro to Web in first semester of 2013 I was confident in the html and css abilities and this helped me greatly in designing the layout and structure of the website.  I did learn some new tips for tutorials and searching online that helped with the html and css. For instance having my site broken up into sections that needed to fill the screen height not just the width was something I investigated.

Javascript and Jquery were new ideas that I learnt in this course.  I had never used it before and it was a new and exciting challenge I faced. By attending the tutorials I was able to get a basic understanding of how to implement and use this new code within my websites and integrate it with html and css to come up with new possibilities in web design.  When putting it into my prototype I struggled with getting it to work properly and I feel like this let down the quality of the prototype.  However, it still gives a basic idea of how the site might work if it was to be developed. 

** Important info regarding jQuery **

The jQuery in my site does not fully execute.  In the drop down menu I want that when the user clicks on an item only the related exercise images will appear.  It works for the ‘TYPE’ dropdown menu because I have used a hide/show function.  Hide/show will not work for the ‘BODY AREA’ or ‘DIFFICULTY’ menus because there are more than one variable.

$(function() {

            $('#s1').change(function(){   

                if($('#s1').val() == 'aer') {

                    $('.ana').hide();

                } else {

                    $('.ana').show();

                }

                if($('#s1').val() == 'ana') {

                    $('.aer').hide();

                } else {

                    $('.aer').show();

                }

});

My tutor helped me in saying I needed to use an in.Array function instead for the other two drop down menus. This worked when I only had it programed for two options but as soon as I added more it didn’t work.  Even, when I had it on two options if the menu item was unclicked the images remained visible instead of resetting and acting as if they weren’t clicked.

$('#s2').change(function() {

                if (jQuery.inArray("upper", $('#s2').val()) !== -1 ) {

                    $('.upper').show();

                    $('.lower, .full, .core, .bal, .flex').hide();

                } else {

                    $('.upper').show();

                }

                if (jQuery.inArray("lower", $('#s2').val()) !== -1 ) {

                    $('.lower').show();

                    $('.upper, .full, .core, .bal, .flex').hide();

                } else{

                    $('.lower').show();

                }

etc…

});

iPad Test ~ I tested my site on an iPad (tablet) to check the responsiveness.  So happy that it worked and fitted to the screen!!

My site is divided up into three sections that are accessed by scrolling vertically between them. I was struggling to get the height of each section to fill the screen entirely so it looked neat and professional.  I tried percentages and fixed pixel heights but none of these worked and I wanted the section to fit the screen on any browser and desktop size.

After feedback of Assessment 1 it was clear that a main interaction of my site was missing… the results after the user makes decisions through the filtering system.  This page has been designed to show the user their choices and elaborate of the time and intensity they should aim for when completing the exercises.

It uses the same design as the 'definitions' section to create consistency between pages.  Icons are used to allow for a visual representation of the text and to create dimension.  The layout is simple to match the minimalistic feel of the entire website.

From looking at this screen shot the blue is very overpowering and may need to be broken up with the use of images or spacing of the text elements.  Further experimentation will occur to solve this issue.

In regards to my tablet layout:

I removed the hover effect of the links (top left and bottom right), since you are unable to hover on a tablet, and instead inserted a coloured background creating a button like icon that the user will know to click.

Also on this page I am still tweaking the alignment of the icons as you may notice.

The buttons down the left hand side have increased bottom margins to allow room for the drop down menu so it will not cover the next button.

After Assessment 1 and looking at competing students work I decided to change the interface design of my website.  Although going for a minimalistic approach in my site design I decided it was too plain and very dark.  While keeping with the same colour scheme I swapped the background colour for a lighter blue shade which provides brightness and a fresher feel to the site rather than a dark grey.  The grey and orange are still present however they are used as text and image colours.

I like the use of the large image which helps to provide context for the user as to what the site is about.  I also identified this as a trend in web design and wanted to adopt it in this site. The sky allows for a great background for the text to stand out.  The black blurb down the bottom is a little less attention grabbing but still stands out. I plan to play around with maybe putting a coloured (white maybe) background behind it to draw the contrast out.

I find the lighter blue background to allow the images and text to stand out more than the dark grey. But I think the background needs something other than a solid black colour so experimentation will occur of how to improve it and make it more interesting.

http://css-tricks.com/multiple-class-id-selectors/

I discovered this website that provided me with information about attaching multiple classes to any one element.  I needed to find this information as my idea requires the user to use a filter that will hide or show relevant exercise images depending on the options selected.  

So, for example, the image of walking needed to have multiple classes/id’s attached to it such as lower body area and easy difficulty so the site would show this exercise if the user selected any of these options.

New ideation sketches from feedback

New opening screen with the addition of a form of site identification with logo and intro message.

New main interaction screen with the addition of labels for the exercise images and a 'workout' button that will take the user to the next page (below).

Feedback

The colour orange was chosen as it evokes excitement, enthusiasm and energy.  It helps to bring out emotions needed during an exercise routine.  In ancient cultures orange was believed to heal lungs and increase energy levels.

The colour blue was chosen as it helps to produce calming chemicals in the body.  It has shown to improve people's productivity, suppress appetites and even has been shown to help weightlifters lift heavier weights.

The dark grey/black colour was chosen as a base colour for the interface.  However, this colour helps to evoke feelings of power and strength.

The font chosen for the project is Helvetica Neue.  This is a simple font used widely across print and web platforms.  Since the colours and images will dominate most of the elements on the screen, the font will compliment without impacting the design.

Amy Morin. 2011. Livestrong. [ONLINE] Available at: http://www.livestrong.com/article/405282-the-best-colors-to-paint-an-exercise-room/. [Accessed 30 March 14]

Table Closeup: This shows a closer view of the table of exercises.  The circles represent the pictograms of each exercise. The drop down menus (filters) are positioned at the top of the screen and in red show each option when the user clicks the drop down arrow.

Navigation: the left diagram shows the initial navigation structure of the interface.  It consist of a single scroll site were each page is connected and accessed by scrolling up or down.  However, after talking to the tutor this way seemed a little complicated and could have ended up being confusing for the user.  So, the refined navigational structure on the right separates the 'plan' on a different page accessed only via the 'table of exercises' (as these two relate to one another) to create a final screen for the user after they make their selection on the table.

Idea 1: Calorie counter to tell the user how many calories will be burned during exercises.

Idea 2: Parallax scrolling - so when the user scrolls down elements move into the centre of the screen and out again once the user scrolls back up.  The page will be endless with different exercises coming into the screen.

Idea 3: Using simple icons to represent the exercises in some way.  Colour and shape could be used to distinguish the type of workout, difficulty and area of body it's focusing on.

These olympic pictograms have inspired my design process by giving an insight into creating simple representations of sporting activities and using a consistent theme throughout.  As I want my interface to be visually appealing and limiting the amount of text on the page I want to create similar pictograms to show different exercises. 

2012 LONDON OLYMPIC PICTOGRAMS

Image Source: http://usagym.org/pages/post.html?PostID=4220 

2016 RIO OLYMPIC PICTOGRAMS

Image Source: http://www.creativereview.co.uk/cr-blog/2013/november/rio-2016-pictograms 

2000 SYDNEY OLYMPIC PICTOGRAMS

Inspiration ~

This website is simple and provides one basic tool… to show the comparison between you and 'John Paulson'. The site is single scroll and shows data based on what you input at the start.  I was inspired by the way that this was designed through personalising the experience for the user as well as using data in a comparative way.

The simplicity of the colour scheme and typography is also an element that will influence my design decisions for my project. I want to also utilise a similar scroll and animating effect in my interface.