Welcome to the UI/UX track of our Codeathon! We are thrilled to have industry professionals and students alike joining us in this creative endeavor to shape the future of user interfaces and experiences. Whether you are a seasoned designer or just beginning your journey, this one-day competition on 15th April 2025 is an opportunity to showcase your talent, innovation, and commitment to creating user-friendly, inclusive digital solutions while following WCAG compliance guidelines for intellectual disabilities. The hackathon will be conducted in a hybrid mode, allowing both online and offline participation. Please note that no system will be provided, so ensure you use your own device. Winners will receive exciting rewards, including exclusive prizes, certificates of achievement, and special recognition for their outstanding performance.

Competition Overview

Objective:

Design themes and templates for both web and mobile applications, incorporating all essential UI elements, while prioritizing intuitiveness, appeal, and inclusivity.

Guidelines

1. Theme and Template Requirements

   • Design themes/templates for web and mobile applications.
   • Include all essential UI elements (buttons, forms, navigation, etc.).(details on the hackathon website)
   • Ensure responsiveness for various screen sizes and devices.
   • Provide a cohesive and consistent design language.
2. Color Palette

   • Create an intuitive, appealing, and colorful design.
   • Avoid using reds and oranges to consider users with color vision deficiencies.
   • Ensure sufficient color contrast for readability.
   • Use color choices that align with the intended application's purpose and brand.
3. Accessibility and Inclusivity

   • Adhere to accessibility standards (WCAG) for usability by persons with disabilities.
   • Provide text alternatives for non-text content.
   • Ensure proper contrast ratios for text and background colors.
   • Include keyboard navigation and focus indicators.
4. Usability and User-Friendly Design

   • Prioritize user-friendly navigation and information architecture.
   • Optimize for an intuitive user experience.
   • Minimize cognitive load by simplifying complex interactions.
   • Consider user personas and design for various user needs.
5. Typography

   • Use readable fonts with different weights for hierarchy.
   • Ensure appropriate font sizes for different screen sizes.
   • Include line spacing and letter spacing for improved readability.
6. Iconography

   • Create clear and recognizable icons for common actions.
   • Ensure consistency in iconography style throughout the design.
7. Animation and Interactivity:

   • Incorporate subtle and purposeful animations to enhance user engagement.
   • Avoid excessive animations that may distract or cause discomfort.
8. Forms and Input Elements:

   • Design user-friendly forms with clear labels and instructions.
   • Ensure proper validation messages and error handling.
   • Consider adaptive placeholders for form fields.
9. Mobile-Specific Considerations:

   • Prioritize a mobile-first design approach.
   • Optimize touch interactions for mobile devices.
   • Consider gestures and swiping for navigation.
10. Feedback and Error Handling:

    • Provide clear feedback for user actions.
    • Design error messages that guide users toward resolution.
    • Ensure that users can easily recover from errors.
11. Documentation:

    • Include detailed documentation explaining the design choices.
    • Provide insights into the intended use cases for different components.
12. Judging Criteria:

    • Judging will consider creativity, usability, and adherence to guidelines.
    • A diverse panel of judges with expertise in UI/UX design will evaluate submissions
13. Ethical Considerations:

    • We encourage designs that prioritize user privacy and data security.
    • We discourage designs that may promote harmful behaviors or stereotypes.

Basic UI Elements

1. Buttons

   • Primary buttons
   • Secondary buttons
   • Ghost buttons
   • Icon buttons
2. 2.Navigation Elements

   • Navigation bars
   • Sidebars
   • Breadcrumbs
   • Pagination links
   • Tabs
3. Forms

   • Input fields
   • Text
   • Checkboxes and radio buttons
   • Dropdown menus
   • Switches
4. Icons

   • Icon sets for common actions
   • Social media icons
5. Typography

   • Headings (H1 to H6)
   • Paragraphs
   • Lists
   • Blockquotes
6. Images

   • Image placeholders
   • Image galleries
   • Responsive images
7. Media Players:

   • Video players
   • Audio players

Advanced UI Elements

1. Modals/Dialogs:

   • Popup windows for additional information or actions
2. 9.Carousels/Sliders

   • Image sliders
   • Content sliders
3. Tabs

   • Horizontal and vertical tabs
   • Icon tabs
4. Accordions

   • Expandable and collapsible content sections
5. Tooltips

   • Small informational pop-ups

Data Presentation Elements

1. Tables

   • Responsive data tables
   • Sortable and filterable columns
   • Responsive data tables
   • Sortable and filterable columns
   • Row actions (edit, delete)
   • Pagination for large datasets
   • Table headers for column names
   • Highlighted rows on hover
2. Charts and Graphs

   • Bar charts
   • Line charts
   • Pie charts
   • Doughnut charts
3. Maps

   • Interactive maps with markers
4. Progress Indicators

   • Linear progress bars
   • Circular progress indicators
5. Countdown Timers

   • Countdown timers for events or promotions

Dashboard-Specific Elements

1. Widgets

   • Small, modular components displaying specific information
2. Cards

   • Containers for organized content or data
3. Data Tiles

   • Visual representations of data metrics
4. Sidebar Navigation

   • Navigation for specific sections of a dashboard
5. Reports and Analytics Elements

   • Graphs, charts, and data visualizations
6. Dashboard Controls

   • Filters, sliders, and dropdowns for data manipulation

Interactive UI Elements

1. Drag-and-Drop

   • Elements that can be moved or rearranged using drag-and-drop interactions.
2. Resizable Panels

   • Sections or panels that can be resized by the user.
3. Toggle Switches

   • On/off switches for activating or deactivating a feature.
4. Steppers

   • Incremental or decremental input controls.

Navigation Elements

1. Mega Menus

   • Large, multi-column dropdown menus.
2. Sticky Navigation

   • Navigation bars that remain fixed as the user scrolls.

Multimedia Elements

1. Image Carousels

   • Rotating displays of images or content.
2. Lightbox

   • Overlay for displaying larger images or media.

Social Interaction Elements

1. Social Share Buttons

   • Buttons for sharing content on social media platforms.
2. Comment Sections

   • Areas for user comments and discussions.

E-commerce Elements

1. Product Cards

   • Displaying key information about products.
2. Shopping Cart

   • Section showing selected items for purchase.
3. Checkout Forms

   • Forms for entering shipping and payment details.

Authentication Elements

1. Login/Registration Forms

   • Forms for user authentication and account creation.

Accessibility Elements

1. Text-to-Speech

   • Integration for converting text to spoken words.
2. High Contrast Mode

   • A switch to enable a high-contrast color scheme.

Animation Elements

1. Parallax Scrolling

   • Background elements moving at a different speed than the foreground.
2. Hover Effects

   • Changes in appearance when the cursor hovers over an element.

Mobile-Specific Elements

1. Hamburger Menu

   • Three-bar icon indicating a hidden menu.
2. Swipe Gestures

   • Navigation or interaction triggered by swiping.

Miscellaneous Elements

1. QR Code Integration

   • QR codes for quick access to information or links.
2. Captcha

   • Verification mechanism to ensure human interaction.
3. Animated Loaders

   • Visual cues indicating that content is loading.
4. Error Pages

   • Custom pages for 404 errors or other issues.
5. Legal and Privacy Links

   • Links to terms of service, privacy policy, etc.