Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Website Redesign: Release 1 navigation bars #127

Open
UXBrendan opened this issue Nov 11, 2023 · 6 comments · May be fixed by #134
Open

Website Redesign: Release 1 navigation bars #127

UXBrendan opened this issue Nov 11, 2023 · 6 comments · May be fixed by #134
Assignees
@coderaries12 @yyu233

Comments

@UXBrendan
Copy link

UXBrendan commented Nov 11, 2023 •
edited
Loading

User Story
AS a New Orcahome user I WANT to be able to easily navigate through the page and find relevant links SO THAT I can complete my goal without having to read the all the text on the page.

Description
The intent of this story is to implement the UI finalized design from the Orcasound UX/UI team for the website redesign on the Navigation Bars.

Notes
Use this Figma file page (Navigation Bars page): https://www.figma.com/file/AKxnlPthLEMQyYrYuMWqOW/Orcahome-Dev-Design?type=design&node-id=517-94&mode=design

Acceptance Criteria
GIVEN I open the Orcasound website WHEN I look at the pages THEN I see a UI that matches the attached UX/UI design.

Mobile navigation bars
Image

Tablet navigation bars
Image

Desktop navigation bars
Image
@Zekrom-7780
Copy link

I'd like to participate in this

@NayoBaez you want to participate?

yyu233 added a commit to yyu233/orcahome that referenced this issue Nov 16, 2023
@yyu233
Website Redesign: Release 1 navigation bars orcasound#127
5306d9c 
* Replaced the app bar icon
* Reordered and added new nav menu items
* Changed the notification and support buttons color styles
yyu233 added a commit to yyu233/orcahome that referenced this issue Nov 16, 2023
@yyu233
Website Redesign: Release 1 navigation bars orcasound#127
9a6d4d6 
* Hovering over the support button will invert the color of the volunteer icon
* Increased the notification and support button width
* Increased the spacing between the nav items
yyu233 added a commit to yyu233/orcahome that referenced this issue Nov 17, 2023
@yyu233
Website Redesign: Release 1 navigation bars orcasound#127
d85bd32 
* Added blue wavy line png
* Hovering over navigation item will display the blue wavy line
yyu233 added a commit to yyu233/orcahome that referenced this issue Nov 17, 2023
@yyu233
Website Redesign: Release 1 navigation bars orcasound#127
57b60b0 
* Added footer orca logo, third party platform icons
* Added two columns of navigation items
* Added license logo
@yyu233
Copy link

yyu233 commented Nov 17, 2023

@UXBrendan I have couple of questions commented on the Figma document. Let me know what you think.

yyu233 added a commit to yyu233/orcahome that referenced this issue Nov 18, 2023
@yyu233
Website Redesign: Release 1 navigation bars orcasound#127
4e58efb 
* Updated blue wavy line implementation
coderaries12 added a commit to coderaries12/orcahome that referenced this issue Nov 21, 2023
@coderaries12
Website Redesign: Release 1 navigation bars orcasound#127 * Nav-bar d…
8c2df88 
…one for mobile view
@coderaries12
Copy link

@UXBrendan Can you please have a look at the mobile view of Nav-bar. Let me know your feedback or any improvements.

@UXBrendan
Copy link
Author

@UXBrendan I have couple of questions commented on the Figma document. Let me know what you think.

@yyu233 Can you please provide a link here to the comment you'd like feedback on?

@UXBrendan
Copy link
Author

@UXBrendan Can you please have a look at the mobile view of Nav-bar. Let me know your feedback or any improvements.

@coderaries12 Can you please provide a link here to the mobile view of the nav bar you'd like my feedback on?

@UXBrendan
Copy link
Author

UXBrendan commented Jan 10, 2024 •
edited
Loading

@coderaries12 @yyu233

I wanted to check in with you about this project. Please see my feedback below regarding questions Yizheng asked me about the design:

Since Vera isn't getting back to us, I'll answer your questions so you can move forward.
1.) Does hovering over the "Notify Me" and "Support Me" button change color of the buttons?
Let's not have a hover effect, since there's no hover for mobile. Ignore change states for those buttons and just use the initial color.
2.) Which event causes the "Notify Me" button to turn on the orange ringing bell icon? Which event inverts the color of the "Support Me" button?
Again, no change states, just static buttons.
3.) Do you think if you can change the color of X and github icon to make them more visible in the footer?
Yes, please invert colors or do whatever you have to to make any icons visible with the black background. Please make them WCAG compliant for contrast.

yyu233 added a commit to yyu233/orcahome that referenced this issue Jan 15, 2024
@yyu233
Website Redesign: Release 1 navigation bars orcasound#127
8db193c 
* Disabled hover effect over 'Notify Me' and 'Support' buttons
* Updated useIsMobile breakpoint from 'sm' to 'lg' because the 'Notify Me'and 'Support' buttons will cause overflow when breakpoint is 'sm'
* Inverted the X and github icons color
yyu233 added a commit to yyu233/orcahome that referenced this issue Jan 16, 2024
@yyu233
Website Redesign: Release 1 navigation bars orcasound#127
70358d5 
* Removed unused vars.
@yyu233 yyu233 linked a pull request Jan 16, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@coderaries12 coderaries12

@yyu233 yyu233

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Resolves #127: Nav bar & Footer Release 1 Desktop Updates Completed yyu233/orcahome
4 participants
@coderaries12 @yyu233 @UXBrendan @Zekrom-7780