Improvement of web design / interface

Dear freelancer,

I programmed a software to control some home devices. The interface of the tool is based on web pages where the user can click to command the home devices. I used the metro css and javascript document to format the pages (see [login to view URL]). I need some help to improve the following:

Overview page:

The overview page gives a status on the different temperatures from the different rooms. But if you look on the pictures, the right scroll does not go deep enough to see all informations. (See Capture_Pb_Overview_Down and compare with Capture_Pb_Overview_Down2 where I zoomed out). To get all it is necessary to zoom out the image.

• So on this page, it is necessary to fix this scrolling issue.

• It could be nice if all graphics of one room where toggled together and appears only by clicking on it….

• The tiles with Rolls automatic or manual also look bad.

• Same for the tile indicating the last movement. I am not very fan of this graphic design.

Device Control page:

On this page, the device that can be controlled are shown. The user can click on it to activate or desactivate the device (see Capture_device_control)

Here the page scrolling is working correctly (surely because the tiles are presented in line).

• But the tile for controlling the device looks bad. I´d like a better looking tile to activate and deactivate the device. I am open for all designs and ideas.

• It would be also nice if all objects of one room could be gathered together. Maybe like on iphone where an icone includes many other icons when clicking on it.

Admin page

On the administration side, I need sometimes to see long tables with all objects available. As you see on the image Capture_Pb_LongTable, the end of the table goes out from the page. It is corrected again by zooming out.

• So here it is necessary to adapt the length of the page to the length of the table.

Heating control page

On this page, every room is presented with the current temperature and the wished temperature. The wished temperature can be set through a slider. It almost works but it looks bad.

• So a new design of this interface is requested. Picture of the room can also be used.

• The slider to set the wished temperature is not correctly set at the saved temperature when initialized

• The panel with “automatic heating” can be closed but is per default open. I would prefer to get it closed when one sees the page for the first time.

Watering control page

This page gives the control to set the watering system. It is not looking nice neither.

• So a new design of this interface is requested.

• The presentation to set the time is also to rework

The interface should be responsive and work at least on computer screen (from 11” to 30”) and on Ipad or tablet screen. Handy display would be great also but may need to deeply rework the presentation. It is therefore maybe a task for a second step improvement.

Today the display on Ipad is catastrophic and does not allow using the tool.

Generally speaking, I like only the app bar on the top of each page. The rest can be reworked. You can propose any graphic improvements even if it shall be the object of a second project.

In the files linked to this problem description you will find the different pictures.

I ll send the css files, js files and php/html files when to the selected bidder.

Please ask for any clarifications.

Best regards,

Manoel Landrieu

CSS Graphic Design HTML JavaScript Website Design

Project ID: #11599371

About the project