Any suggestions relevant to UI/UX to improve the current system, in favor of launching the app without a new interface.
Here are the changes I propose:
body {
font-family: “system-ui”, Helvetica, Roboto, san-serif
background: #F7F3EB
color: #05192D
}
a {
font-weight: 500
color: #1A68FA
}
navbar {
box-shadow: 0px 0px 1px 0px rgba(61,66,81,0.2), 0px 1px 4px -1px rgba(61,66,81,0.3);
min-height: 60px (make sure to align-items center.
border: none
}
.panel-body {
border-radius: 10px
}
Other Notes:
- Remove horizontal line dividers in navbar
- remove Kidocode logo, replace with small gif logo of kidocode symbol
- Replace all icons with ionicons v4. Choose rounded icons
- If icon is below 24px OR icon is meant to show a resource used filled type. Else use outline version.
- In the main panel (center column: .task-intro), remove the border left and border right, increase padding all around to 18px.
- left column (profile area), remove panel heading
- Change general --blue variable to : #1A68FA
- Remove book icon in center panel
- Main title like, " Course: Learn Python Programming" → change font-size to 18px.
- .task-intro remove grey background
- .panel-profile-img {margin-top: 24px, margin-bottom: 24px}
- h5 .panel-title {font-size: 18px} (this is the profile name in the left column)
- Remove the panels below profile (links and copyright stuff). Move all main links to header
- Make links in header split in to two columns in the following order: Kidocode symbol gif (Home), Courses, Trainers | Consumed etc…
A sample screenshot after making some of those changes in the inspector:
1 Like
The shield icon located on the left of the performance bar is not intuitive. It can be removed, as it does not explain what it’s for.
Agree
Rohan like this, give more 
Comments on the code editor
-
The the ace editor theme: Emokid pastel - The theme is light on the eyes, less intense contrast, matches kidocode palette well and kid friendly - TmThemeEditor
-
Code editor / terminal font: Jet Brains Mono: Google Fonts
For buttons in code editor:
- Primary button: background: main blue, text white, border main blue
- Secondary button: background transparent, border and text: white
- Border-radius: 4px
- Padding: 8px, 24px
- Margin-left: 8px
- Font-family: jet brains mono (testing)
- Increase font-size to 16px
In code editor:
- Increase font-size to 16px
- increase icon size to 16px
- Remove all the different colored background and sections. Make it one flat background colour following the theme code editor, terminal and info panel area.
- Change icons to ion-icons outline style rounded.
- If possible give border-radius 4px to code editor panel
- Terminal: Change pin icon to up/down caret, change trash icon to outline icon from ion-icons