Redesign Timeline UI/UX

in Adobe XD

to do

  • past present future
  • stick the timeline to the top of the page

UI of the timeline

Each day will be represented by a square in the timeline and a representative block.

  • Nothing (almost blank)
  • Diaries (Dark Gray)
  • Work (Purple) (logs or lower level completions)
  • Release (Red) (top level comptions)
  • Completions (Red with a dot)

(the release is relative to the page being viewed. IF looking at the top level, red squares will be all top-level projects. when viewing a top level project, red squares will be all child projects (for instance, benchmarks of Astrus)

A82E2E red

832525 muted red

472BBF purple

UX of the timeline

  • When I first go to the timeline, I would like today's block to be immediately showing.
  • I would like to also see minimized blocks for future and past days that I can scroll to.
  • I would like the time title (Past, Present, or Future) to stick to the top of the vertical timeline
  • When I click on a square on the actual timeline or a contracted block, I would like the block to be expanded and shown for that day.
  • logic for completing maintenance tasks on the front-end.

design of the timeline

  • Glyph templates. Parents are the platonic, children are seperate . (Metamechanics is the eye, music is waves, etc)
  • make the past fade out?

Data structure

Each timeline object will have associated with it

Date (parent)
day of week ?
moon sign
primary task (what I spent the most on that day)
secondary tasks
diary

levitation content only includes life maintenance tasks

Separate events and releases

Lets say I have a song

Subtasks of the song will be get the mix done by this date
get the artwork done by this date. I dont want them all to trigger as events. I just want the actual completion of the project to be done.

  • Clean up the timeline snippet
  • refactor the timeline array to allow for more than one event per key (perhaps make events a sub object)
  • Differentiate top-level release dates (releases, red) and small features being done (checkpoint, purple w/ dot?)