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.

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

Enhanced Ui of Component Card #1176

Open
4 of 7 tasks
mahak0711 opened this issue Jul 2, 2024 · 3 comments
Open
4 of 7 tasks

Enhanced Ui of Component Card #1176

mahak0711 opened this issue Jul 2, 2024 · 3 comments

Comments

@mahak0711
Copy link

Description

Enhance UI of Component Cards and Add Animations for Better User Experience

Description:
Enhancing the UI of component cards and integrating animations can significantly improve the user experience. This issue outlines the proposed enhancements and their expected benefits.

Enhancements:

Visual Hierarchy: Use different font sizes and weights to distinguish titles, subtitles, and body text.
Highlight important information with color, bold text, or icons.

Color Scheme: Choose a color palette that aligns with our brand.
Use contrasting colors for text and background to improve readability.

Interactive Elements: Incorporate buttons and links with clear call-to-actions (CTAs).
Ensure buttons are easy to identify and click.
Animations:

Smooth Transitions: Implement animations for transitions between different states (e.g., hover effects, page changes).
Aim for smooth and natural transitions to reduce cognitive load.
Guided Interactions:

Use animations to guide users' attention to important elements or actions.
For example, subtle animations on CTA buttons can draw attention without being intrusive.
Feedback and Affordance:

Provide visual feedback for user interactions, indicating actions have been recognized (e.g., button presses, form submissions).
Enhance the sense of control and satisfaction for users.

Attachments/References:

Screen.Recording.2024-07-03.004230.mp4

Screenshots

Screenshot 2024-07-03 004030
Screenshot 2024-07-03 004007

Checklist

  • I have checked the existing issues.
  • I follow Contributing Guidelines of this project.
  • I am a GSSOC'24 contributor.
  • I am a IWOC'24 contributor.
  • I am a JWOC'24 contributor.
  • I am a SWOC'24 contributor.

Code of Conduct

Copy link

github-actions bot commented Jul 2, 2024

Hey @mahak0711, Welcome to the project Beautiify! 🎊
Thanks for opening an issue! 🙌 Please wait for the issue to be assigned. Happy Coding!! ✨

@mahak0711
Copy link
Author

Please @Rakesh9100 assign this issue to me!

@mandeep848
Copy link

Please @Rakesh9100 assign this issue to me, i can add some more UI in this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants