Enhancements
Enhancement 1 - Hover Effect
Description:
Application of CSS hover effects on the "index.html", "activities.html" , and "deafawareness.html" delivers visually appealing and natural interactions, guiding visitors smoothly across the site's interface, resulting in better navigation and greater engagement with the content. These changes not only improve the aesthetics of the website, but the consistent use of hover effects preserves brand consistency and professionalism while adding a layer of polish to the entire user experience, promoting trust and loyalty among visitors.
Page(s) applied: index activities awareness
Resource(s): Source
Enhancement 2 - Flip Cards
Description:
The introduction of a flip card effect in our webpages enhance the visual appeal of the user interface, providing users with an engaging and interactive way to explore details. This update brings a dynamic element to the browsing experience, facilitating seamless navigation between the front and back of each card. By offering quick access to additional information about featured members, services, activities and forms, the flip card effect encourages user interaction and curiosity.
Page(s) applied: services activities forms members
Resource(s): Source
Enhancement 3 - Dropdown Navigation Bar
Description:
The presence of dropdown navigation bars in "services.html", "activities.html", "forms.html" and "members.html" improves user navigation and accessibility throughout these pages. By grouping menu items into expandable dropdowns, users may simply explore and move across various sections or categories without cluttering the interface. This enhancement improves the user experience, providing for easier navigation and faster access to needed material. Overall, the installation of a dropdown menu bar improves usability and the surfing experience on these webpages.
Page(s) applied: services activities forms members
Resource(s): Source
Enhancement 4 - Responsive Navigation Bar
Description:
Introducing a responsive navigation bar delivers an ideal user experience across all devices, adjusting fluidly to different screen sizes. When the screen size decreases, the navigation bar switches to a sidebar layout, optimizing space efficiency. This modification ensures accessibility regardless of the device used, whether it's a desktop, tablet, or smartphone. This flexible design allows users to easily find and interact with desired content, increasing overall engagement and satisfaction with the website's usability.
Page(s) applied: ALL
Resource(s): Source
Enhancement 5 - Embedded YouTube Video,
Google Maps and Audio
Description:
Embedding YouTube videos, Google Maps, and audio components increases the website's multimedia context, with an emphasis on improving user comprehension and attention capture. These elements provide an interactive browsing experience, allowing users to easily connect with a variety of material types, including video tutorials for activities, interactive maps for event locations, and instructive audio resources on deaf awareness topics. Beyond text, these multimedia components enhance comprehension, boost retention of data, and keep visitors interested.
Page(s) applied: index hairandtrim awareness
Resource(s): Video Source Maps Source Audio Source
Enhancement 6 - Sparkling effect
Description:
The addition of a sparkling effect to the "members.html" web page, particularly on member images, improves visual appeal and engagement. Using CSS keyframes animation, we create the illusion of sparkling lights, carrying pictures with a sense of surprise. Adjustment of variables such as color, size, and opacity ensures that the sparkling effect complements the website's design style. The change is intended to capture users' attention, increase interaction, and leave a lasting impression. Furthermore, adhering to adaptable design principles ensures that the glitter effect retains its visual charm across a variety of devices, enhancing the overall user experience.
Page(s) applied: member1 member2 member3 member4 member5
Resource(s): Source
Enhancement 7 - Hoverable sidebar
Description:
The applicatipon of a hover-able side bar on the website, triggered by hovering over a specific area. This aims to streamline navigation through smooth animations and transitions, ensuring an enjoyable browsing experience. The side bar will also automatically appear on smaller screens and devices for accessibility purposes. Moreover, each link within the side bar will feature hover effects, facilitating effortless navigation to different web pages. Through CSS integration, this enhancement intends to provide a cohesive and engaging user experience across all devices, thereby enhancing overall user satisfaction and interaction.
Page(s) applied: ALL
Resource(s): Source