Core mobile app functionality usually beats visual polish early on. You route data, optimize performance, and scale backends. Then you run your build on a physical device. Reality hits hard.
Your interface feels abandoned.
Empty states matter deeply for fitness trackers. First-time users don't have logged workouts, active friends, or synced biometrics. Greeting them with a blank screen and a tiny gray label guarantees churn. Finding ways to visually populate onboarding flows, error screens, and empty dashboards becomes urgent.
Can solo developers build cohesive UI systems from stock libraries without looking cheap? Relying on Ouch, an illustration library by Icons8, offers a clear answer. Let's break down exactly how to pull it off.
The Tuesday Night Desperation Search
Late Tuesday evening at a local diner, my app's visual gaps became impossible to ignore. I'd just wired up Bluetooth sync logic for heart rate monitors. Users failing to connect got hit with a standard system alert over stark white space.
Cold. Technical. Brutal.
Broken connections need clear communication without looking like catastrophic server failures. Opening Ouch, I bypassed the initial graphics wall. Filtering specifically for technology and healthcare revealed massive variety. Millions of assets live inside these platforms. Ouch alone houses over 23,000 tech illustrations.
Locating a sketchy, monochromatic style fit my interface's athletic tone perfectly. Ten minutes later, I dropped a high-res PNG into my canvas. A disconnected cable sitting next to a confused character transformed a sterile error into an approachable recovery step. Users need reassurance during failures, not clinical error codes.
Scenario One: Assembling the Onboarding Sequence
Absolute visual consistency makes or breaks an onboarding flow. Users swiping through welcome screens, profile creation prompts, and goal-setting pages must feel grounded in one brand environment. Breaking that illusion ruins trust.
Working with the Pichon desktop app speeds up this process drastically. Desktop access means grabbing transparent PNGs, photos, and icons instantly. Setting up my fitness onboarding meant picking a single minimal 3D style for four distinct screens. Consistency is everything here.
Forget downloading files one by one from a browser. Dragging assets straight from Pichon onto the design canvas saves hours. First up, a generic welcome graphic. Next, an illustration of someone checking a smartwatch. Because Ouch styles cover entire user experience flows, finding matching elements for specific actions feels effortless. Missing pieces don't derail your momentum when the library runs deep enough.
Examining Alternative Approaches
Developers typically weigh a few standard options before settling on an interface workflow.
Relying on unDraw serves as the industry default. It's totally free and highly customizable. But that ubiquity kills its value. Thousands of startups use unDraw daily. Users recognize that aesthetic immediately. Slapping it onto your screens signals a cheap template approach, eroding trust in consumer-facing trackers.
Humaaans provides another path with deep mix-and-match character creation. People-centric graphics look fantastic here. Try building a disconnected smartwatch or a server 404 error, though. Its narrow human focus falls apart for tech-heavy empty states.
Custom art remains the absolute gold standard. Hiring professionals ensures brand exclusivity
and exact visual matching. Startup timelines rarely survive the budget and turnaround time required to commission custom art for every edge case. Hand-drawn assets take weeks.
Ouch sits comfortably in the middle. Spanning 101 distinct styles from bold graphics to surrealism, it avoids the hyper-recognizable trap. Volume matters when covering obscure edge cases. Your app needs personality, not generic filler.
Scenario Two: Customizing the Unconventional Empty State
Pre-made scenes rarely cover every wild scenario a developer dreams up. My tracker required a "Rest Day" dashboard empty state. Default search results spat out generic sleeping characters or intense runners. Neither fit active recovery concepts.
Endless hunting for random clipart wastes time. Tagging specific layered objects works much better. These aren't just flat scenes. Vectors here are searchable and layered. Mega Creator, their free online editor, became my next stop.
Inside that editor, I isolated a character from a yoga graphic. Background elements got deleted instantly. Next, I swapped in a foam roller from another sports illustration within that exact style family. Rearranging these components built a totally new scene.
Exporting the result as an SVG let me inject the graphic straight into my codebase. Dynamic CSS coloring meant I could match the user's selected app theme perfectly. Code-driven illustration changes everything.
Boundaries of Pre-Packaged Graphics
Stock libraries aren't magic bullets. You're entirely bound by what those original designers created. Building a tracker for underwater hockey? Good luck finding vector elements to mix and match.
Pricing structures also dictate how you build products. Free tiers cap out at PNG formats and force attribution links back to Icons8. Dropping a credit link directly under a critical mobile onboarding graphic ruins the native feel. Upgrading to a Pro plan becomes mandatory for SVGs, large formats, and clean interfaces. Professional polish doesn't come free.
Don't forget file sizes. High-end 3D models arrive in FBX and MOV formats. Professionals craft these stunning assets, sure. Integrating heavy 3D files into lightweight mobile apps for simple empty states just isn't practical. Application bloat kills install rates. Keep things lean.
Practical Directives for UI Population
Mastering stock libraries requires disciplined asset management.
- Test aesthetics using free tiers first. Search with the "Free" badge filter to grab placeholder PNGs. Hardcode them into development builds. Test on physical devices before swiping your credit card for a style family.
- Animate your success states. Hitting a workout goal deserves motion. Download Lottie JSON or Rive formats for these moments. Lightweight animations drive high engagement without the crushing file sizes of GIFs.
- Track credit usage strategically. Unused downloads roll over on paid plans. Pause your downloading during heavy coding sprints. Accumulate those credits for dedicated UI refinement phases later.
- Open After Effects formats for advanced motion tweaks. Timing matters. Adjust a character lifting a weight to match your specific screen transition speeds. Then export custom JSON files.
Building a coherent visual system without an in-house illustrator isn't impossible. Stick strictly to one style family. Modify objects inside an editor. Dynamically color SVGs in your code. That barren app dashboard quickly transforms into a vibrant, engaging experience.
