search

Project-Roundtable / Uni-Stirling-Grade-Calculator-Website

A website which serves as a calculator for degree classifications/final grades for students at University of Stirling. Made by myself Luke Skinner @LJSkinner and Andrew McGuckin @AndrewMcGuckin
MIT License
0 stars 0 forks source link

Barebones UI For Website #1

Closed LJSkinner closed 1 year ago

LJSkinner commented 1 year ago

We need a barebones UI to start testing the degree classification algorithm. We also want to plan ahead for the future and have an idea of structure and layout. As part of closing this issue, it would be useful to have wireframe(s) and colour schemes to be applied going forward. Post this in the issue so that it can be tracked.

Review Date: 28th November 2022

AndrewMcGuckin commented 1 year ago

Homepage Initial Design

Grade Calculator-blueblack

@LJSkinner If there is anything you don't like please reply to these comments with your thoughts.

AndrewMcGuckin commented 1 year ago

Calculator Preview for an Honours Degree marked over 1 year

Grade Calculator-Honours 1 Year drawio

This is a very rough draft of a possible layout, there is a lot of information to be displayed on one page. To try and fit it into a wireframe I've condensed some of the features by placing them next to each other. The predominance calculation could be moved under the modules to give more space.

The modules show some of the basic information, if a user wants to view or edit the assignment details that contribute to the module grade calculation they can click the edit button. This information could be displayed in the following two ways:

  1. A modal triggered by the edit button showing the assignment details allowing the user to quickly edit grades.
  2. The module acts as a dropdown, when the edit button is pressed the module bar expands to show the information, when edits are completed the module contracts back to it's original look.

The module bar style is also something I'm not quite set on, I've applied a black, blue and white style to show the differences. Personally I quite like the blue however there are quite a few elements that also have blue backgrounds so it may be better to choose one of the alternatives or another colour completely.

LJSkinner commented 1 year ago

Calculator Preview for an Honours Degree marked over 1 year

Grade Calculator-Honours 1 Year drawio

This is a very rough draft of a possible layout, there is a lot of information to be displayed on one page. To try and fit it into a wireframe I've condensed some of the features by placing them next to each other. The predominance calculation could be moved under the modules to give more space.

The modules show some of the basic information, if a user wants to view or edit the assignment details that contribute to the module grade calculation they can click the edit button. This information could be displayed in the following two ways:

  1. A modal triggered by the edit button showing the assignment details allowing the user to quickly edit grades.

  2. The module acts as a dropdown, when the edit button is pressed the module bar expands to show the information, when edits are completed the module contracts back to it's original look.

The module bar style is also something I'm not quite set on, I've applied a black, blue and white style to show the differences. Personally I quite like the blue however there are quite a few elements that also have blue backgrounds so it may be better to choose one of the alternatives or another colour completely.

@AndrewMcGuckin

This looks good and I think sufficient enough for this issue. Might be a good idea to post these in #3 as well. Since we will close this one after pulling the barebones UI code. Also the storyboard thing you made, might want to put that in #3 as well.

LJSkinner commented 1 year ago

Closed with PR #4