Horizons

The Objective​

The objective is to revamp the Horizons website with a clean, minimal design that prioritizes user-friendliness and effectively communicates our mission to the blind and visually impaired community. We aim to streamline content presentation, emphasizing the business side of our transcription services, which include both secured and non-secured transcriptions from English to Braille. The website will feature industry-specific contact forms for easy communication, catering to sectors such as Brochures & Flyers, Business Cards, Restaurant Menus, and more. Through collaboration between blind, visually impaired, disabled, and sighted individuals, our goal is to create a straightforward and professional online platform for Horizons.

The Work

We kicked off the website redesign process by creating rough sketches and low-fidelity mockups using Balsamiq Mockups. These initial designs were presented to the client for approval. Once approved, we delved into brainstorming the section functionalities and color schemes. Opting for greys and blacks to maintain a minimal look, we aimed to enhance user experience. A key challenge was incorporating a distinctive element to represent English and Braille. The solution emerged as a captivating text animation where English text gracefully transitions into Braille on each banner image. The client embraced this creative concept. Subsequently, we commenced building a responsive website, ensuring compliance with WCAG and AA accessibility standards throughout the development process.

Tools & Tehnology

Graphic Design:
Adobe Illustrator
Adobe Photoshop

Prototyping:
Balsamiq Mockups

Web Development:
HTML, CSS, PHP, JavaScript

Achieving an elegant text animation on scroll was a pivotal aspect of our website development for Horizons. Leveraging HTML, CSS, and JavaScript, we incorporated a captivating reveal effect for images with text. The HTML structure encapsulates sections, each housing a dual-content block. The accompanying CSS styles define the layout and aesthetics, utilizing gradients and transitions for smooth visual effects. The magic unfolds in the JavaScript section, where we utilized the GSAP library, specifically ScrollTrigger, to trigger the looping text animation upon scrolling into view. The script efficiently handles the dynamic application of classes, initiating the animation loop seamlessly. The keyframes in the CSS animate the text reveal, creating a visually engaging transition from English to Braille and back. This combination of HTML, CSS, and GSAP ensures a user-friendly and visually compelling experience, aligning perfectly with Horizons’ goal of accessibility and innovation. 
				
					<section class="content_section">
    <div>
        <!-- Content -->
    </div>
    <div>
        <div class="img_reveal_block is_left_aligned is_animated is_looping">
            <img decoding="async" class="img_reveal_block__bg_img" src="braille-left-aligned.jpg" alt="">
            <div class="img_reveal_block__overlay">
                <img decoding="async" class="img_reveal_block__overlay__img" src="print-left-aligned.jpg" alt="">
            </div>
        </div>
    </div>
</section>

				
			
				
					@keyframes imageReveal_leftToRight_loop {
    0%, 25% {
        right: 100%;
    }
    75%, 100% {
        right: 0%;
    }
}


.img_reveal_block.is_left_aligned.is_animated .img_reveal_block__overlay {
    right: 0%;
}

.img_reveal_block.is_left_aligned.is_looping .img_reveal_block__overlay {
    animation: imageReveal_leftToRight_loop 2s ease-in 1s forwards alternate infinite;
}

Creating a fully responsive and accessible website adhering to 100% WCAG AA standards is a testament to our commitment to inclusivity and user experience at Horizons. Our monthly maintenance ensures the seamless functionality of the website, addressing any evolving needs. Additionally, we prioritize client empowerment by providing comprehensive manuals. These guides empower clients to navigate and understand the website’s backend, promoting autonomy and confidence in managing their online presence. This holistic approach reflects our dedication to delivering not just a website but an accessible, sustainable, and user-friendly digital solution for Horizons.

The Outcome

We’ve crafted a website for Horizons that’s not only fully responsive and accessible, meeting the rigorous standards of WCAG AA, but also undergoes regular monthly maintenance to ensure ongoing functionality aligned with the organization’s evolving needs. To empower our clients, we provide detailed manuals, enabling them to navigate and understand the backend of their website with ease. This comprehensive approach reflects our commitment to delivering a user-friendly, accessible, and sustainable digital solution for Horizons.

Check Horizons Website