Admin Dashboard

Readingful's "Admin Dashboard" shall simply use the same overall design as the "Teacher Dashboard," with a navigation menu of five icons, representing different areas, as shown in the mockup above. They are 1. Userbase, 2. Story Library, 3. Activity, 4. Settings, and 5. Helpbook. By default, when the admin first signs in, the third section, "Activity," shall display.

 

Styling Checklist:

 

Images:

1. Admin Account Navigation Menu Users: users.svg, 48 x 48

2. Admin Account Navigation Menu Stories: stories.svg, 48 x 48

3. Admin Account Navigation Menu Activity: activity.svg, 48 x 48

4. Admin Account Navigation Menu Settings: settings.svg, 48 x 48

5. Admin Account Navigation Menu Helpbook: helpbook.svg, 48 x 48

6. Admin Account Navigation Menu Icon: #FFFFFF80

7. Admin Account Navigation Menu Icon Hover: #FFFFFFBF

8. Admin Account Navigation Menu Icon OnClick: #FFFFFF

9. Admin Account Navigation Menu Icon Selected: #FFFFFF

-NOTE: Colors 6 to 9 account for images 1 to 5, above.

10. Admin Account Topline Menu Button: #FFFFFFBF

11. Admin Account Topline Menu Button Hover: #FFFFFF80

12. Admin Account Topline Menu Button OnClick: #FFFFFF40

13. Admin Account Topline Menu Button Selected: #FFFFFF

-NOTE: Colors 10 to 14 account for all Topline menu button icons across all 5 adminaccount sections.

14. Admin Account Default Avatar: admin_account_avatar.svg, 72 x 72

15. Admin Account Sign Out Button Icon: admin_sign_out.svg, 72 x 72, #FFFFFF

16. Admin Account Sign Out Button Icon OnClick: #FFFFFF80

 

Text:

MOCKUP 1:

1. Admin Account Section Title: 3.8 rem, #FFFFFF

2. Admin Account Section Subtitle: 2.0 rem, #FFFFFFB3

3. Admin Account Welcome Message Title: 2.8 rem, #FFFFFF -NOT SHOWN

4. Admin Account Welcome Message Subtitle: 2.4 rem, #FFBC36BF -NOT SHOWN

5. Admin Account Navigation Menu Title: 2.4 rem, #FFFFFF80 -NOT SHOWN

6. Admin Profile Name: 2.4 rem, #FFFFFF

7. Admin Account Sign Out Text: 2.4 rem, #FFFFFF

 

Objects:

1. Admin Account Section Area Background: 814 x 380, #FFFFFF

2. Admin Account Sign Out Button Background: 72 x 72, #5395FF

3. Admin Account Sign Out Button Background OnClick: 72 x 72, #5395FF80