search

ClarkGH / shotlify

Upload a video, take screenshots, and upload the screenshots. Get a slideshow back.
https://slideshow-sigma.vercel.app
2 stars 0 forks source link

FE: Make it pretty #13

Closed ClarkGH closed 1 year ago

ClarkGH commented 1 year ago

Once we have the functionality to MVP, let's get the looks to MVP.

Good time to try out figma.

Create new issues regarding each feature/section we need to style based on the amount of effort before closing.

ClarkGH commented 1 year ago

Consider: https://alvarotrigo.com/react-fullpage/#page1

ClarkGH commented 1 year ago

Needs:

  1. Semantic h2 headers for sub video/image categories.
  2. Color scheme
  3. Animations/Transitions
ClarkGH commented 1 year ago

Mobile UI/UX: https://github.com/ClarkGH/shotlify/pull/44

ClarkGH commented 1 year ago

Following feedback from a Project Manager friend, I'm further bloating scope to have the app make more sense to a first time user.

Will only focus on mobile viewports, as I'm already making way more work than originally planned for a for-fun sideproject.

To simplify, I'm considering the following:

  1. Add a "stepper", navigated via the top of the page "Home" | "Videos" | "Images" as well as a CTA (Call to action) button for each step.
  2. Home step just explains what the app is and does very briefly
  3. Videos page is for adding videos / capturing screenshots
  4. Images page is for adding/deleting local images / uploading image list to microservice (don't worry about the uploading part, just console.log('some text'))
  5. Add a transition between each step. Unnecessary, nice to have.
ClarkGH commented 1 year ago

Done: https://github.com/ClarkGH/shotlify/pull/49

ClarkGH commented 1 year ago

"Images" stage screenshot has some weird colors added as a side-effect of the snipping tool:

dele3 dele2 dele1