Visual Design Update (04/26)

I spent about a week designing the application's icon. It remains visible on various backgrounds and avoids use of color combinations that would prevent color-blind users from identifying our application. I also wrote a Python script that converts the vector-graphic into a raster graphic of several dimensions. This was necessary because Android apps must contain the application icon in several dimensions in order to display high resolution icons to the diverse set of devices. Android icon files must be 24 by 24 pixels to 512 by 512 pixels. iOS has similar size requirements.



The application's user interface benefitted from Google's Material Design principles. I modified early prototypes in order to keep UI elements close to each other, and to use depth in the 2D user interface in order to follow the Material Design's paper metaphor. For example, buttons appear higher than text input elements, and the menu drawer appears to cast a shadow from an even greater height. In order to improve accessibility, I implemented a font size changer. This was required because Qt ignores the system-wide font size setting. However, we neglected to use Qt's accesbilities features which would've made our program more readable to screen reading devices.

- Hugo

Our app on an Android app launcher.

The login screen

The slide-out menu.

The help screen.

Need to change your password?

A course list (with a single course)

Result of reporting attendance.

Taking a picture of a QR code to report attendance.

QR code detected!

Exiting the application