What is this ADHD Simulator?
This is a visual representation of an oridnary day of the ADHD people
Intentionally bad web design
web collection of different visual vignettes
So, what is this ADHD?
Attention-Deficit / Hyperactivity Disorder
Neurodevelopmental disorder characterized by persistent patterns of inattention, hyperactivity, and impulsivity that interfere with daily functioning and development
Predominantly
Inattentive
Primarily exhibits symptoms of inattention.
Predominantly
Hyperactive-Impulsive
Primarily exhibits symptoms of hyperactivity and impulsivity.
Combined
Exhibits significant symptoms of both inattention and hyperactivity-impulsivity.
Purpose
An Empathetic lens
To create an empathetic lens into the lived experiences of ADHD
(especially: internal struggle of task completion)
Immerse, Experience, Understand
Not designed for sympathy, but for understanding
Challenges Assumptions
Challenges assumptions against ADHDers about laziness, irresponsibility/ inattention
Core Features (Design Principles)
Sensory Overload
Chaotic Website with images all over the place
Distraction
Mechanics
All kinds of little distractions on the website to shift audience's focus on trying to complete the task as prompted
Distraction
Mechanics:
Everything interactive
Time
Perception
Hyperfocus
Mode
ADHDers also have a hyperfocus mode where they forgot about anything else
3D animtion
Falling into
rabbit holes
ADHDers often dive into non-relevant tasks when trying to do one task Here I'm using hyperlinks that leads to everywhere to demonstrate this trait
He
Process
Add breakpoints to your blank page, then drop sections to have them responsive out of the box.
Get Started
Learn More
Double click the image placeholders to add images. Do the same for any text, then tweak styles and publish.
Get Started
Learn More
Add breakpoints to your blank page, then drop sections to have them responsive out of the box.
Get Started
Learn More
Double click the image placeholders to add images. Do the same for any text, then tweak styles and publish.
Get Started
Learn More
Copy Paste from Figma
Install the Figma plugin and you’re ready to convert your designs to a responsive site.
Start with Site Templates
Browse dozens of professionally designed templates. Click, duplicate, customize.
Plugins
Connect your site to the most popular apps out there.
Powerful Effects
Add effects with a few clicks and capture your audience’s attention when they land on your website.
Design & Layout
Design your site on a familiar free-form canvas. Visually set up your breakpoints to make it responsive.
Navigation
Visually structure your pages and link to them easily.
Ready to play around?
© Framer Inc. 2023