Testing on Laptop and Desktop screen sizes

@theartofmadeline
Three Goblin Art
RMH
noise dept.
Cosmic Funnies
One Nice Bug Per Day
NASA
Not today Justin
hello vonnie
$LAYYYTER

ellievsbear

Love Begins
Sade Olutola
todays bird

tannertan36
Peter Solarz

JVL

#extradirty
will byers stan first human second
seen from United States
seen from United States

seen from Malaysia

seen from Nepal

seen from Germany
seen from Kuwait

seen from France

seen from United States

seen from Malaysia
seen from United States

seen from United States
seen from United States

seen from United States

seen from United States

seen from United States

seen from United States
seen from T1
seen from United States
seen from Malaysia
seen from United States
@webinterfaceclairewilson-blog
Testing on Laptop and Desktop screen sizes

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
Free to watch • No registration required • HD streaming
Reflection
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.
I believe that I did my best and tried to make my site as neat and professional as possible. I am 100% satisfied with the design aesthetics of the site and not so much with the programming side but still happy :)
Future Opportunities
** 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…
});
I believe that why it is doing this is because my tutor mentioned that the computer reads the code logically and because they are if/else statements it is only reading the last one as being true. I looked into this online but couldn’t make sense of how to fix it. It sort of works in my site and gives an idea of how it would work if it would be developed but loses quality to the prototype by not working properly.
iPad Test ~ I tested my site on an iPad (tablet) to check the responsiveness. So happy that it worked and fitted to the screen!!
Future Opportunities ~ The drop down menus are a little small for touching with a finger however are still easily clickable. Increasing the size of these buttons would allow for a smoother user interaction.
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.
I came across this website that solved the problem for me. It used viewport-percentage lengths and it has worked for my site across multiple screen sizes e.g. laptop and various desktop sizes.

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
Free to watch • No registration required • HD streaming
As of today, 99% of your visitors have a screen resolution of 1024x768 pixels or higher.
W3Schools
Extra Page Design
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.
UI Explanations ~ Tablet
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.
Interface Development
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.
I am happy with this change in colour arrangement and will further experiment once all my functions/javascript/jquery are all running smoothly!
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.
Example code: <div id=”walking” class=”lower easy”></div>

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
Free to watch • No registration required • HD streaming
Development of Concept from Feedback
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).
New 'workout' page which lists the exercises the user chose through the filtering system. This page then breaks them down into which body area they target and how long the user should do the exercise for.
Feedback
This was feedback from my tutor on my first assignment. I was glad that the feedback was positive and the only comments were to add things to make it fully resolved and easier for the user to interpret.
Colours & Text
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]
freshome. 2014. [ONLINE] Available at: http://freshome.com/2007/04/17/room-color-and-how-it-affects-your-mood/. [Accessed 30 March 14]
Concept Development Refined
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.
Layout: This image shows the layout of the interface for both desktop and tablet devices. They behave in a similar way but due to screen sizes the elements have been modified to suit the respected screen. As seen the 3 pages are connected in a single scroll and can be scrolled up or down to navigate through them. The 'plan' page is then separate by a button on the 'table' page. On the first page (gender) the user will not be able to scroll until an option is selected.
Concept Development
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.
Idea 3.1: Development of previous Idea with laying out the icons in a table or grid which will use filters the user can choose to fine tune the search for particular exercises. Only exercises that show the characteristics chosen in the filters will appear on screen.

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
Free to watch • No registration required • HD streaming
Inspiration ~ Pictograms
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
Image Source: http://creativerepository.com/2010/01/14/evolution-of-olympic-pictograms-1964-to-2012/
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.
Source: https://mahifx.com/john-paulson/