Naming strategy
The name for the course was inspired by many of my design essays like Invisible Details of Interaction Design or Designing Depth. To devour details means to be fanatically obsessed with imbuing every aspect of your work with care.1
This naming strategy is called an alliteration where the same consonant sound appears at the beginning of multiple words that are close together in a sentence or phrase. This technique creates rhythm and makes phrases more memorable and easier to say. For example, in "Peter Piper picked a peck of pickled peppers," the repeated 'p' sound is an alliteration.
This comes with a tradeoff on clarity however as it is not exactly clear what Devouring Details means without context, but I believe it provokes interest in a way that a straightforward name usually does not—kind of like a great book title that pulls you in.
Interaction branding
I started working on DD back in 2024 and it felt right to me to establish the brand through Swiss minimalism but flourished with motion design. After all, the course is about interaction design so the visual language should reflect that.
Immediately the logomark became the centerpiece for all interactions. For example, the first home page featured a mouse interaction with rebound physics for the supporting labels.
On the platform, the brand symbol becomes a guiding indicator throughout the course experience—from logging in to moving between talking points, and submitting feedback.
Interactive examples
Before working on this course I wondered: “how have I learned myself?”
By trying to build an idea and realising it sucks in practice. With enough iterations and sometimes by accident I’ll get to a place where it feels really good and with hindsight realise why it sucked. Devouring Details is your shortcut to those eureka learning moments, delivered to you as I experienced them.
Prototypes are far more effective at communicating detail than videos
You won’t solve code challenges or passively answer quizes. Instead, you’ll interact with prototypes on a custom platform to build your intuition for what feels great.
Two column layouts offer better navigation through long-form content
Each chapter is digestible with bite sized efforts through a scrollable experience that doesn't ask for too much at once.
Downloading code
Through Devouring Details I want to not only explore Principles, but give you the tools and Resources to build your own Prototypes from a starting point. The platform offers source code for many of the interactive components where it makes sense—some of which are even implemented on standalone pages for ease of copying.
Prototype with source code panel expanded
To make sure the code is always up to date, the files are extracted directly from the source, there are no duplicates.
Source files are then used to dynamically generate a compressed ZIP with all the imported files—ready for you to download at any point.
Video placeholders
You might have noticed that the videos rendered here do not cause layout shift and display a blurred placeholder while the video is loading. In the Next.js framework this is trivial to do for images but not for videos.
Deconstruction of video placeholder strategy
I wanted the developer experience to be super ergonomic, otherwise I would not do this for all videos. I use a custom Video component throughout the platform. It reads metadata from a generated JSON file using the src property:
You might be wondering how this file gets generated. I hooked a custom script into the build pipeline to read source files and generate metadata for each instance of the Video component.
The component then sets the aspect-ratio with CSS to avoid layout shift, and renders the placeholder with a blur filter:
Error pages
I've tried to instill care in not only the common experiences like interacting with prototypes or logging in, but also in the less novel interactions such as navigating to an invalid page or encountering an error.
404 and 500 error pages
Bespoke iconography
I started using various icons from different sets but found that they quickly looked slightly different and would not align well with each other.
Glenn Hitchcock is probably the only person who would describe crafting icons as "therapeutic and easy". So naturally, he designed some beautiful looking iconography for the platform.
Icons are designed at 16×16 with a 1.5pt stroke
Generally the 16pt icons work well except for aligning with the font baseline at 20pt font size. For parity with the typeface, 18×18 icons with a 1.75pt stroke are used instead when inlined with text.
Some icons are also theme-aware and switch to filled variants on dark mode while retaining the stroked variant on light mode.
Resources Behind scenes