Layout Update #412

joshuajames-smith · 2022-06-06T17:56:26Z

Problem

Our current layout has developed a less than ideal UX and inconsistent UI through our agile process. This needs to be made more consistent and understandable for our users.

Solution

The top-bar within CURATE has the following changes:

The navigation should ONLY display the project team contained in 1 box (fill: #FFFFFF > outline: 2px #D9DDE9 > border-radius: 8px) alongside 2 navigation icons (...to MANAGE ...to AUDIT). The project settings icon should contained in 1 box (fill: #FFFFFF > outline: 2px #D9DDE9 > border-radius: 8px) with a gap of ~24px. These should be paired together and centred.

--

The side-bar within CURATE has the following changes:

The first top row has 3 boxes (fill: #FFFFFF > outline: 2px #D9DDE9 > border-radius: 8px) with a padding of between ~14px. These contain: 3 icons for image view size (small, medium and large); 2 icons for data view (image and table); 1 icon for data sort.

The second top row has 1 box (fill: #FFFFFF > outline: 2px #D9DDE9 > border-radius: 8px) with a padding between of ~14px. This contains: 2 text fields for data search.

The third top row has 2 drawers (fill: #FFFFFF > outline: 2px #D9DDE9 > border-radius: 8px) with a padding between of ~14px. This contains: 1 drawer for image labels; 1 drawer for assignees.

The second bottom row has 1 box (fill: #FFFFFF > outline: 2px #D9DDE9 > border-radius: 8px) with a padding between of ~14px. This contains: text and 1 progress bar for annotation progress.

The first bottom row has 2 boxes fill: #FFFFFF > outline: 2px #D9DDE9 > border-radius: 8px) with a gap between based on left and right alignment. This contains: 2 icons for upload/download; 1 icon for plugin drawer toggle.

The side-bar is ~337px wide with a padding of ~28px 30px 28px 28px.

--

The image data layout within CURATE has the following changes:

We want to define a set number of image data per row which adjust size dynamically to prevent awkward gaps being created on the very left due a strict set image tile size which does not take into account various screen sizes. This should be: small image view size > 8; medium image view size > 6; large view size > 4.

--