Make OpenELIS Global Webpage More Visually Appealing and Colorful

[nidhiisinghh]

Affected Section:

The overall UI design of the OpenELIS Global webpage, particularly:
• Homepage/Dashboard layout.
• Navigation menus and tabs.
• Forms and reports sections.

Description of the Issue:

The current design of OpenELIS Global is functional but appears bland and lacks engaging visual elements. The use of neutral colors and minimal design does not effectively capture attention or create a user-friendly experience. This can deter users from engaging with the platform, especially new users or stakeholders evaluating the system.

Specific issues:
• The color palette is too neutral, making the interface appear dull.
• Buttons and action elements do not stand out due to limited styling.
• There are no highlights or emphasis on critical information or navigation links.

Steps to Encounter the Issue:
1. Navigate to any section of OpenELIS Global (e.g., Dashboard, Patient Management).
2. Observe the lack of vibrant colors or visual differentiation in interface elements like buttons, headings, and tabs.

For example: https://openelis-global.org/

Proposed Solution:

To make the webpage more visually appealing and colorful:
1. Modernize the Color Palette:
• Incorporate vibrant primary and secondary colors for headers, links, and buttons.
• Use softer background colors for sections to create contrast.
• Ensure the color scheme adheres to accessibility standards (e.g., WCAG contrast ratios).
2. Enhance Button Styling:
• Add hover effects, shadows, and color changes to improve interactivity.
3. Highlight Critical Information:
• Use colored banners or cards to emphasize notifications, alerts, and key statistics.
4. Add Visual Elements:
• Use gradients, icons, or subtle patterns to add depth to the design.
• Introduce thematic banners for the homepage or dashboard.
5. Typography Improvements:
• Pair modern, readable fonts with a hierarchy of text styles for headers, subheaders, and body text.

Severity of the Issue:

Rating: 1
This issue does not affect the functionality but significantly impacts user engagement and the overall impression of OpenELIS Global. An appealing design can improve user satisfaction and help promote the platform.

I have experience in UI/UX design and front-end development and would love to work on implementing these changes. Please let me know if I can proceed!

Thank you for considering my proposal!
@mozzy11 kindly assign me this issue.

[Agaba-derrick]

hey @NidhiSinghh can you make a Pr for this !

[2003Aditya]

@Agaba-derrick can i work on this issue?

[Isabirye1515]

Thanks @nidhiisinghh , is that you want openELIS to mimic this https://o3.openmrs.org/openmrs/spa/home, just to help me get the form of designe sir