Update 18 10 2021

Update on OAE interface

Changes

For this iteration, we introduced a few changes to the general layout:

Navbar

• Search box is based on Material Design 2 guidelines, which gives it a more modern look;
• Included a greeting message for the user Hello [user name];

Sidebar

• Includes dropdown with items Labels and All Files;
• Added Network section;
• Settings is now at the bottom of the sidebar. It was previously placed inside the avatar dropdown;

Activity Modals

• Prototypes for activities such as Create and Upload File show sequence flow;
• Showcase flow of Create Label;

Recent Activity

• Layout is now centred to make better use of space for bigger screens;
• Added network section to display watched users/users following;

Library

• Pages now show sorting under Labels and All Files
• Added example of differently themed labels;
• How the colour system works inside a label;

All Labels

All Files

All files for label "internship"

All files for label "oae"

Design System

During the month of September, I started working on a Design System for the OAE. This allows us to set the guidelines for the interface that developers can follow in order to keep a consistent visual.

I've managed to set the colour scheme and will continue this work by adding the following:

• Grid layouts

  • Measurements;
  • Grid types;
  • Pixel density;
  • Columns and rows;
  • Margins;
  • Padding;
  • Gutters;
  • Breakpoints;

• Typography

  • Typeface;
  • Type weight;
  • Type scales and styles;
  • How to use/how not to use;
  • Text sizes comparisons;

• Buttons

  • Primary Button
  • Secondary Button
  • Tertiary Button
  • Destructive Button
  • Disabled Button
  • Hovered Button
  • Focused Button
  • Active Button