Layout Overhaul

[outoftime]

Popcode has an assortment of existing or anticipated UI/UX problems which I believe would be best addressed with a high-level refresh of the tool’s layout. Some prior art can be found in this issue and the original design workups (look at the fourth slide).

A layout refresh should make the following UX improvements:

• Popcode’s login functionality is discoverable
• It’s clear that projects are automatically saved when you’re logged in; it’s also clear and explicit that projects are not automatically saved when you’re logged out
• The “Load Project” view is legible (use the title tag; probably show the project list in a modal rather than inline)
• There’s a persistent visual indicator of which libraries are enabled
• It’s discoverable that you can minimize editors/the output pane

The improved layout should also contemplate and accommodate these future features:

• There is a space for project instructions, separate from the code and output
• It’s possible to switch between multiple pages in the HTML editor
• There is a JavaScript console built in to the tool (N.B. the layout/UI should make this unmistakably distinct from the output/preview pane)

Finally, we want to maintain these current good things about Popcode’s design:

• Avoids unnecessary visual distractions; keeps the focus on the code and the output
• Usable on very small screens (e.g. Chromebooks)
• Fun colors

Action Item Plan

• Add top bar with logo/wordmark; make sidebar dark gray and dashboard light gray; remove wordmark from sidebar
• Remove logo from dashboard
• Add hamburger menu button (opens dashboard)
• Move login/logout state into top bar
• Move text size toggle into top bar
• Move export button into top bar
• Move libraries button into top bar
• Border between top bar and notifications
• “New Project” button in top bar
• My Projects in top bar (maybe release along with New Project)
• Put editor labels in the top-right, chevron to minimize, full-width bar that can be maximized
• Project preview top bar that displays title, refresh and pop-out buttons
• Move remaining functionality from Dashboard into actual hamburger menu (designs TK); temporarily remove sidebar until project instructions functionality is complete