Homepage and content pages responsive and visual improvements

[lynwilhelm]

Use Case

This work stems from responsive improvements research discoveries. I attempted to keep the scope focused, but there are some some minor enhancements folded in that hopefully do not take much additional effort. An overhaul of content writing was not in scope for this project. You'll notice that content sections are primarily just moved around.

• Cards were not discovered as clickable
• Many reported top content as useful but too dense
• Excessive spacing between sections (on small screens)
• "Try Simularium Now" was misleading
• Excessive scrolling - expected some categorization of content to reduce
• "Load your data" card was eye-catching, but was lost on first-time visitors
• Reported that helpful info is buried at the bottom of page
• Time units on cards stood out but meaning was not immediately clear
• Color contrast issues - paragraph text should not be over purple. Dark theme? Can we lighten the grey?

Acceptance Criteria

• Shift to dark theme (change in background colors and font color)
• New page: “About Simularium”
• New page title: Change “Quickstart guide” to “Getting started” in menu
• Change “Help” to “resources”
• Swap order/position of action buttons and navigation buttons in header
• Update h1, h2, and h3 global sizes for desktop
• Add new h1 and h2 sizes for mobile.
• Minor content updates-I’d suggest a side-by-side comparison against current site or check with Lyndsay if you need help identifying differences
• Tighter spacing between sections. I am trying to avoid alternate values for small screens. (Try padding-top: 2.2em and padding-bottom 2em. This looks like it works well after noodling in the browser.)
• New cards design with improved animation (load button, simulation title and GIF load trajectory)
• Enable drag and drop when the “Choose a Simularium fille to load” modal is shown
• Update “Choose a Simularium fille to load” modal (update tab group styling if you can in this round)
• Hope I didn’t miss anything! Let me know if you find anything puzzling in the design file!

Details

Design link

[lynwilhelm]

@blairlyons feel free to check out final designs and let me know if you catch anything wacky.