Skip to main content
A strong Niblet app can be understood from across the room in a few seconds. Start with the information; use color and motion only to support it.

​
Start with one clear idea

  • Give each frame one main job.
  • Lead with the value people will look for most often.
  • Remove labels when position, color, or a familiar symbol already explains the data.

​
Work at the final size

Design images at 64×32 or smaller. Downscaling a large illustration usually creates soft edges and noisy details. Use simple silhouettes and leave enough space for each element to stay distinct.

​
Make text easy to scan

  • Prefer one data point or phrase per frame.
  • Use bundled pixel fonts and test every required glyph.
  • Use a marquee only when the content cannot be shortened.

​
Use color for structure

Choose a small palette with clear contrast. Similar colors can blend together on a physical panel, especially at lower brightness. Use color consistently to show meaning, status, or hierarchy.

​
Add motion with a purpose

Niblet WebP output can contain multiple frames. Use render.Animation, render.Sequence, or the animation module for controlled movement. Keep loops short, avoid flashes, and inspect the transition from the last frame back to the first.

​
Test like a viewer

  1. View the preview at its actual size to catch unreadable detail.
  2. Zoom in to inspect alignment and animation edges.
  3. Check a physical display from the distance where people will use it.
A clean static frame is better than an animation that competes with the information. Add motion only when it explains change or reveals content.
Last modified on August 29, 2026