Visual Design - Gowiem/Sisyphus GitHub Wiki

We temporarily used the default visual styling from Twitter Bootstrap 3. Visual design should take place after user testing and more design iterations occur. This includes the scaffolding / layout of elements (i.e. user interface design) as well as visual aesthetics (i.e. graphic design) on the screens.

Example:

Before CSS edits (Student screen)

After CSS edits (Student screen)

This semester was focused on getting the UI and UX down. To streamline this process, we used Flat UI, a free Bootstrap UI kit. We customized it to create our own Sisyphus UI Kit Template.

UI Kit screenshots:

Sample mockup of what the general screen should look like

Example of what our progress bar and checkboxes should look like

Color palette