izzdwizz
commented
8 months ago Hi! If this hasn't been worked on yet, I would like to be assigned to it. Thank you!
Open Khadijaarike opened 8 months ago
izzdwizz
commented
8 months ago Hi! If this hasn't been worked on yet, I would like to be assigned to it. Thank you!
Khadijaarike
commented
8 months ago hi @izzdwizz, I am sorry it is not in my power to assign issue reports. Also, mentor @birm had mentioned in a response, I quote "We don't usually assign issue reports, so we'll look at any open pulls". I hope this helps
Summary: I propose redesigning the navigation bar and home page for consistency across the brand CaMicroscope.
Background: Currently, the designs on the landing pages/websites localhost and https://camicroscope.org/ are different and are not consistent with each other, different colours and fonts are used. Brand consistency is a crucial aspect of building a successful and recognizable brand and plays a significant role in shaping customer perception and building brand loyalty, this is why i decided to propose these changes.
Use Cases: Colour and font The colour used on the landing page caMicroscope colour is #9a2ca0 and the font used is Poppins. On the other website (http://[localhost](http://localhost:4010/apps/landing/landing.html):4010/apps/landing/landing.html) there is no consistency and the font used is Arial.
However, the colour used #9A2CA0 on the background #FFFFFF has poor contrast for small letters and failed WCAG STANDARD AAA, I recommend changing it to #742178 as it passed for both small and big letters for WCAG STANDARD AA and AAA. The right colour contrast makes your page accessible to a large group of people such as colour-blind, nearsighted or just users of an older age.
Accessibility The images do not have accessible text that is visible to screen readers, implementing alt text will improve the accessibility of the page, especially for screen readers.
Aesthetics Elements on the page were not aesthetically pleasing because the elements were not balanced on the page, and had unequal spacing.
Implementation: These are screenshots of the proposed redesign changes from my Figma file. Consisting of the light mode and dark mode home page, and also the design with ALT text.
Expected Impact: The redesigned navigation bar on the website will ensure brand consistency.
The redesigned home page, improves the balance and hierarchy of the page.
The included dark mood option for the home page can help users reduce eye strain, also for users with dyslexia or visual processing disorder who find it tough to interpret black text on a white background.
Alt text included to images will help screen readers.
Additional Notes: This is the link to the figma file https://www.figma.com/file/mBg74uj7xVPxMo4A0iOOVP/outreachy-project?type=design&node-id=0%3A1&mode=design&t=UlosQYHD3iH1GHkB-1.