All About Splash Screens

I used this week’s design challenge to learn about splash screens then create my own.

What is a splash screen?

Sample splash screens

A splash screen is the first thing users see when they open an app. It serves as a loading screen before bringing the user to the landing page. It can also be used to collect login info. It is important that this screen represents your brand and product because even though ideally the user only sees it for a second or two, it is still the first impression the user will get of your app. It’s an opportunity to set the right tone.

Designing my splash screen

I decided to create a splash screen for users visiting my portfolio site. With that in mind, I made a few initial design choices for the sake of consistency, namely that I used the same colors and fonts used on my website.

Where I decided I had some more wiggle room was in creating an animation for the screen. I don’t have any sort of signature animation that I need to be loyal to so I decided to create one. My main consideration was duration. It had to be an animation that would look good if it went on for two seconds or twenty (though hopefully we stick to the shorter end of that scale).

The long version: waves can continue expanding out indefinitely without the animation ending awkwardly

The short version: lasts only a couple seconds and ends before the waves can reach the ends of the screen

The animation is simple and rhythmic and, most importantly, it works regardless of duration without seeming awkward.