JUSTIN RIDLEY
AirCon Controller
Modern Air-Conditioning Control Interface
Design
Web
Project
Description
This controller is a modern and user-friendly take on an application to control a contemporary air-conditioner system. The application is a blend of both simplicity and efficiency to assist the user with not only controlling but understanding their system.
Design
Overview
From looking at current air-conditioner applications, I found many not only lacked a modern interface but lacked consideration for the end-user who may feel overwhelmed by many controls, different menus and jargon. To improve upon this experience, I simplified the controls into three distinct sections. I made the left side of the application primarily for system status and prominent controls such as temperature control and power. The other two sections “Control” and “Zones” feature secondary and more refined controls for the air-conditioner. The “Control” section allows changes to mode and fan speed while the “Zones” section provides the ability to target and manage flow to each specific room. These sections use subtle animations which are particularly evident for fan speed which not only bring the interface to life but depicts certain changes to the system. The use of colour throughout the interface also informs the user of the currently selected mode whether that be “Cool”, “Heat” or “Fan”.
Functionality
Overview
19°
23°C
Dark Appearance: Off
Fan Control and Colour Adaptations on Interface
This air-conditioner application is made using HTML, CSS and JavaScript. The CSS uses "prefers-color-scheme" @media queries to adapt to darker colours if the user's system supports and has activated a darker appearance or dark mode. The JavaScript makes up most of the interactivity and is used for manipulating elements on-screen such as changes to temperature, mode and power. jQuery Color has also be utilised to assist with changing and fading between colours for the different modes. The application can connect to many back-end technologies such as PHP to communicate with an external API to work with a real system which is not present in this mock-up version. The outside weather included on the left side is outsourced to conveniently highlight the temperature outside.
Return to Portfolio