HVNZ - Heating and Ventilation UI design
Brand Strategy:
Promote healthy home environments through use of their products
Provide effective world leading heating and ventilation solutions
Have simplified UI’s for all control devices to allow ease of use
PROBLEM STATEMENT:
Our customers need a user friendly interface that allows customers full control over their heating and ventilation. This interface needs to be accessible from mobile, web and in-wall tablets.
WEB ACCESSIBILITY:
Sufficient Contrast - with the use of an off white background and black text a high level of contrast has been achieved allowing for high legibility for all users. This is also enhanced with the use of bright colour accents for icons.
Multiple Viewports - Media queries have been applied to allow for 3 different viewports (Desktop, tablet & Mobile). The tablet view has been designed to work as an in wall display for the system also.
Alt Tags - Alt tags have been used for all and any images including logos
Language - English has been defined at the type of each HTML doc within the interfaces code.
Headings & Spacing - Headings and spacing have been used to clearly define the sections of the interface. This is apparent in the heading used for both the “fan” and “blade” sections.
Font Awesome v4.0
https://fontawesome.com/v4.7.0/license/
Font Awesome is a fully open source icon library. Its is free to use for commercial projects, open source projects, or really just about whatever
https://fontawesome.com/v4.7.0/license/
Font Awesome is a fully open source icon library. Its is free to use for commercial projects, open source projects, or really just about whatever
you want as stated on its license page above.
Poppins - Google Fonts
Poppins - Google Fonts
Google fonts are licenced under the Open Font Licence. This means they are free to use for any open source, personal or commercial however they must not be sold as you own.
jQuery Knob by Anthony Terrien
http://anthonyterrien.com/demo/knob/
This jQuery plugin is provided with a free to use MIT licence - common among gitHub plugins. This means it is free to use, modify, sell or attribute under an “as is” basis. The author is not liable for any damages caused by use of this software under the MIT licence.
w3Schools - Range Slider Example
https://www.w3schools.com/howto/howto_js_rangeslider.asp
This code example has been referenced in order to create the range slider used in the app. Example code is provided on this learning site.
jQuery Knob by Anthony Terrien
http://anthonyterrien.com/demo/knob/
This jQuery plugin is provided with a free to use MIT licence - common among gitHub plugins. This means it is free to use, modify, sell or attribute under an “as is” basis. The author is not liable for any damages caused by use of this software under the MIT licence.
w3Schools - Range Slider Example
https://www.w3schools.com/howto/howto_js_rangeslider.asp
This code example has been referenced in order to create the range slider used in the app. Example code is provided on this learning site.
