Writing the core logic of a mobile app takes massive effort. Handling what happens when that logic returns zero data feels entirely different. Fitness tracking apps rely heavily on data visualization, daily activity logs, and historical progress metrics. New users creating an account don’t have those data points yet. Dashboards sit blank. Navigation lists stay unpopulated. Progress charts show absolutely nothing at all.
Leaving empty spaces creates a dead user experience that kills retention. Filling those empty white boxes requires real artwork. Finding a way to populate onboarding flows, empty states, and error screens without spending thousands on a custom illustrator usually means making painful compromises. Most developers grab disjointed stock graphics downloaded from random corners of the internet. Ouch, a vector and 3D illustration library by Icons8, tries to solve this exact visual problem for UI designers.
Table of Contents
The Blank Canvas Problem
Late on a Thursday night in October, I sat staring at the iOS simulator on my monitor. My React Native fitness app ran perfectly under the hood but looked visually barren. Navigating to the workout history tab revealed a solid white screen with tiny gray text reading “No workouts found.” Dropping the internet connection triggered a sterile system alert popup. Three plain text slides made up the entire initial onboarding sequence.
I needed graphics to guide new users through their first session. Celebrating a successfully logged run required a satisfying visual payoff. Softening the frustration of a 404 connection error demanded friendly, engaging imagery rather than harsh technical text. Commissioning a professional illustrator would push my launch back a full month and completely destroy my project budget. I needed a complete, production-ready visual system immediately.
Designing a Dynamic Onboarding Flow
First up: the onboarding sequence. I wanted three distinct full-screen slides introducing the core features. Developers often make the mistake of grabbing three completely different illustrations that vaguely match the topic. Mixing different art styles makes software look incredibly cheap and thrown together. Ouch organizes its massive library into 101 distinct visual families, which reveals the actual value of the platform. You aren’t searching a random bucket of images. Browsing within a highly specific, curated design language changes the entire workflow.
Bold, colorful 3D elements fit the energetic vibe of my fitness tracker perfectly. Filtering by the Sport and Healthcare categories surfaced dozens of high-quality scenes. Lacing up running shoes, checking a smartwatch, and doing dynamic stretches-I found 3D characters doing exactly what I needed for my introductory slides.
Static PNG files weren’t going to cut it. Because Ouch supports modern animation formats, I bypassed flat images and downloaded the Lottie JSON files for these three scenes. Dropping Lottie files into a React Native environment requires only a few lines of code and a lightweight dependency like `lottie-react-native`. Performance stays buttery smooth at 60 frames per second. Within an hour, my plain text onboarding turned into looping, interactive 3D animations.
Movement makes custom software feel distinctly premium. Those animated characters breathed immediate life into the first critical moments of the user journey.
Rescuing Error Screens with Customization
Next came empty states and error screens. Stock libraries typically fail miserably here. Finding a great onboarding graphic happens fast, but locating a matching “Server Disconnected” illustration in the exact same art style takes hours of digging.
Many developers resort to typing desperate queries into search engines looking for ai clipart just to fill the void on an error page. Jarring visual transitions happen when onboarding looks like high-end 3D art and the 404 page resembles a messy watercolor painting. Mismatched visuals shatter user trust instantly.
Ouch focuses heavily on deep UX coverage. Creators intentionally design assets within each style family to cover common UI scenarios like empty shopping carts, successful password resets, and missing server data. Staying within my chosen 3D style, I searched for server and web elements. An unplugged cable graphic worked perfectly for the offline state. A confused character looking at a broken chart fit the empty dashboard naturally.
Colors didn’t automatically match my app’s branding palette of neon green and dark slate. I opened Mega Creator, an online editor integrated directly into the platform. Ouch illustrations break down into layered, tagged objects. Swapping the primary colors of the characters’ clothing and background elements took mere seconds. Deleting a generic briefcase from one character’s hand gave me room to add a sports water bottle from the library instead.
Exporting the modified SVG let me drop a perfectly branded asset directly into my codebase folder.
Weighing Off-the-Shelf Options Against Custom Art
Deciding on a visual asset strategy means understanding platform trade-offs deeply.
UnDraw remains a popular open-source alternative among web developers. Completely free access and instant single-color customization sound great on paper. Oversaturation creates a massive problem, though. UnDraw assets show up everywhere across the internet. Users instantly recognize those flat, faceless purple characters. Spotting a free template ruins brand credibility almost immediately in competitive app markets.
Blush offers excellent original artwork from various independent global illustrators. Customization options are fantastic. Finding complete UX flows within a single artist’s collection on Blush gets challenging quickly. Animation support isn’t as native or developer-friendly as Ouch’s direct Lottie and Rive integrations, either.
Custom illustration remains the superior choice for established, funded brands. Professional illustrators create unique intellectual property, tailored metaphors, and bespoke assets perfectly mapped to your user personas. Early-stage apps or solo developers simply don’t have the budget or timeline for custom art. Ouch bridges that gap nicely. Professional consistency happens without the painful wait, provided you put in the necessary work to assemble your own system from their catalog.
Where Pre-Made Libraries Fall Short
Relying on any stock library comes with strict creative limitations. You must use the metaphors the original artists imagined. Highly specific visual concepts-like a kettlebell smoothly transforming into a glowing heart monitor-simply won’t exist. Adapting your UI layouts to fit available art happens frequently when working with off-the-shelf graphics.
Maximizing 3D models requires highly specific technical skills. Ouch provides raw FBX formats for 3D assets. Opening and modifying an FBX file demands proficiency in complex software like Blender, Cinema4D, or Maya. Changing studio lighting or rigging a character for a custom walk cycle introduces a steep learning curve most front-end developers actively want to avoid.
Free tiers rarely work for professional mobile app deployment. Using free PNG files requires placing a highly visible attribution link back to Icons8 directly on your screen. Adding external web links on core onboarding slides breaks immersion. It looks incredibly unprofessional to your users. Purchasing a paid plan removes attribution mandates and unlocks SVGs or Lottie files entirely.
Field Notes for UI Developers
Building a cohesive visual system from pre-made libraries requires a disciplined workflow.
- Pick one single style family across your entire application to maintain strict brand cohesion.
- Export SVGs for all static assets. Vector layers let you manipulate the `fill` property directly in CSS or React Native for automatic dark mode switching.
- Search for individual objects rather than full scenes when building custom compositions inside Figma.
- Grab the Pichon desktop app to drag transparent assets directly into your design canvas during the early prototyping phase.
Populating an app with empty states doesn’t require a massive art budget. Finding a library prioritizing consistent UX coverage over random image dumps matters most. Filter strictly by style. Customize those vector layers directly. Integrate lightweight animation formats.
Interfaces should feel intentional, active, and professionally crafted.
Join The Logo Community
We hope this article has been helpful. If you would like more personal tips, advice, insights, and access to our community threads and other goodies, join us in our community.
You can comment directly on posts, access our community threads, have a discussion and ask questions with our founder Andrew.
Tired of clients questioning your logo design prices? Our new eBook gives you the exact scripts, objection handlers, and confidence to communicate your value. No more awkward pricing conversations—just more high-paying projects.
Get it Now!
