UI/UX Design Changes

[eric2523]

Design UI/UX Changes

Body

• [x] Find better font
  • I like the about page font which is the semantic font. We can change all fonts to that if so

    NavBar

• See https://material.io/develop
• [x] Change active styling to have a bottom border when active.
• [x] Right align Navbar links
• [x] Keep logo left aligned
  • GitHub icon can go left aligned as well
• [x] Total size of NavBar and contents can be slightly increased

  Hamburger Menu

• I think we should incorporate this as doing this will only benefit us in the future if we need to make the website responsive
• [x] Dropdown menu that has login/logout
• [x] Profile link can go in here too (UPDATE: Profile link now only appears when logged in)
• [x] UPDATE: Give login/logout buttons blue button styling, sign-up button grey button styling

Templates Page

• [x] Animate "Pick your starting Point" to change text every x seconds -- more interactive and appealing

• [ ] Provide short description of each visualizer

  • Prob need Hal to whip up a more convincing/attractive description later
  • See https://material.io/develop and scroll down to Tutorials section

• [x] Remove mute/unmute button

  Profile Page

• [x] Make thumbnails smaller, potentially 2 visualizers per row

Footer

• [x] Add footer to website with socials
• [x] Remove title from footer
• [x] Resize github icon

Splash Page

• [x] Resize buttons, adjust alignments

About Page

• [x] Add Linkedin links and icons to about page
• [ ] Possibility: Split page in half down the middle
• [x] Increase left/right padding (12%), text-align: justify, resize headshots
• [x] Remove 100vh from .about-info-1. Replace with min-height 900px

Auth Modals

• [x] Add color to demo user button

Edit Page

• [x] Padding to settings controls
• [x] Cursor pointer for play button

[johnnthough]

Hello i am a UI designer and i believe i can be of help to you