Overlays & feedback
Launch screen
A launch screen is a full-screen view shown while an app or page starts up, usually a logo on a solid color, before the real interface appears.
- Also called
- Splash screen, Preloader, Loading screen, Intro animation
What is a launch screen?
In mobile apps the launch screen is a technical necessity: the operating system shows something while the app loads, and a logo on the brand color makes those first moments feel intentional. The best ones are nearly invisible, a plain frame that matches the app's first screen so the transition feels instant.
The marketing-site equivalent is the preloader or intro animation: a full-screen logo, counter or animated mark that plays before the homepage appears. Studio and portfolio sites use them for drama. On a SaaS marketing site they mostly hurt. They delay the headline for visitors who came to learn what the product does, they get replayed on every visit, and they can push back the moment the page's main content is first painted, which affects both perceived speed and how search engines measure it.
If the page genuinely needs heavy assets, show the content first and let the visuals load in place, with a skeleton or a still image standing in. Brand motion belongs in the hero, after the headline is readable, not in front of it.
When to use a launch screen, and when not to
Use it for
- Native appsA mobile or desktop app that needs a moment to start, where the OS expects a launch view.
- Unavoidable heavy loadsAn interactive 3D or WebGL experience that cannot render anything useful until assets arrive.
- One-time brand momentsA launch event or campaign microsite where the intro is part of the experience and plays only once.
Avoid it for
- SaaS homepagesVisitors came for the headline and value proposition; anything in front of them is a cost.
- Every page loadAn intro replayed on each visit or navigation turns a flourish into a toll.
- Masking a slow siteFix the page weight instead; a preloader only makes the wait more visible.
Anatomy of a launch screen
- 1BackgroundA full-screen solid color or brand gradient.
- 2Logo or markThe centered brand mark, static or lightly animated.
- 3Progress cueAn optional bar, percentage counter or spinner on web preloaders.
- 4TransitionThe fade, wipe or reveal that hands over to the first real screen.
Common launch screen variants
1. App launch screen
A static logo on the brand color, matching the app's first view.
2. Percentage preloader
A counter running to 100 before the page reveals, common on studio sites.
3. Intro animation
A short animated logo or headline sequence that plays before the page.
Often confused with
Launch screen vs. loading indicator
A loading indicator shows progress for one part of the page while the rest stays usable. A launch screen covers everything until loading is done.
Launch screen vs. skeleton
A skeleton shows the page's layout immediately with placeholders. A launch screen hides the layout entirely until it's ready.
Launch screen vs. full-screen overlay
A full-screen overlay opens on top of a loaded page in response to an action. A launch screen comes before the page exists.
Frequently asked
Should a SaaS website have a preloader?
Almost never. It delays the content visitors came for and can worsen how fast the page appears to load. Load the headline first and let visuals fill in afterwards.
What makes a good app launch screen?
Simplicity and speed: the brand color and mark, nothing to read, and a layout that matches the first real screen so the switch feels seamless.