Live site
divergentweb
Timeline
March - July 2024
Responsabilities
Storytelling
Website Design
Animations
Organization
Unibz – Free University of Bolzano
As more of our daily lives shift into the digital space, accessibility in web design has become more important than ever. While many accessibility standards focus on users with visual impairments, there is far less guidance when it comes to designing for neurodivergent users, a group that represents an estimated 15–20% of the global population.
Conditions such as ADHD, autism, and other cognitive differences often go overlooked in digital accessibility efforts. At the same time, many existing guidelines are complex, text-heavy, and difficult to apply in a real context.
The website is aimed at designers and developers who create digital products and services. Its goal is to help them better understand neurodivergent users and apply accessible design practices in their work.
To make the content engaging and relevant, the site follows a narrative structure inspired by storytelling techniques often used in web design, such as "scrollitelling."
This six-step approach is based on the classic three-act structure, guiding users through the content in a way that builds interest and emotional connection.
On the website, these steps translate into distinct sections: a hero introduction, contextual statistics, common barriers for neurodivergent users, practical recommendations, additional resources, and finally, an about and contact section.
If you're curious to learn more about using narrative in digital design, I recommend thisarticle by Chiara Aliotta on Smashing Magazine.
The six sections shaped by the narrative framework served as the foundation for the first wireframes. These sketches helped visualize how content could be arranged and animated to guide users through a scroll-based storytelling experience.
To bring the wireframes to life, I explored a vibrant color palette that highlights content blocks and adds an engaging, playful tone.
For body text, I selected Atkinson Hyperlegible, a font designed to enhance readability for users with visual or cognitive impairments. This is paired with a more expressive serif italic typeface for headings, adding contrast and fluidity to the overall design.
DivergentWeb is an ongoing personal project that continues to evolve based on feedback and new insights. Built with responsiveness in mind, the website adapts seamlessly across all screen sizes and is brought to life through custom animations built in Webflow. Its modular design allows for easy iteration as the content grows, and as my skills grow with it.
By keeping it flexible and open-ended, I can continue to expand the platform and refine both structure and storytelling along the way.
This project has been a hands-on way to deepen my skills in Webflow, especially exploring animation techniques and interactions. It reinforced the value of learning by doing, and of treating accessibility as an ongoing design mindset rather than a static requirement.
Diving into the topic of neurodiversity gave me a deeper understanding of cognitive barriers, and sparked my interest in creating more accessible experiences for specific user groups such as people with ADHD or autism. In retrospect, I would love to take this further by conducting interviews with neurodivergent users and integrating their perspectives more directly into the design.
I’m also looking forward to experimenting with new Webflow features and animation libraries like GSAP to push the visual language and interactivity even further.
