Login Screen

This SwiftUI template can be downloaded and opened in DetailsPro on iPhone, iPad, and Mac.
Open in DetailsPro

This design is our Design of the Week for April 8th, 2022, and a companion to Issue 26 of UI Designer Weekly. Check out the latest issue on the DetailsPro blog!

This design is an exciting example of a hero area (“hero” normally refers to a large, vibrant top section of a design that is made to really grab someone’s attention and get them excited about a product). With a layering system that starts with an image, then adds the app’s icon and some text, and then adds a fun blurred bar with plane symbols, this design seeks to be futuristic but still legible.

Login Screen imagines the initial screen of a travel app that offers high-end, luxurious travel options with a color scheme that feels modern, clean, and travel-oriented with the famous airport yellow accent color. Check out the usage of Overlay and Overlay’s Alignment property that was used to put the hero overlay into the Top Leading corner. Also, check it out in Dark Mode! Strangely, it sort of works (even though the app icon changes color in that case. We liked that, so we left it 😉)

Try changing this design into something entirely new, or experiment with the hero area elements to see what other looks you can find. And see you next week for the next issue of UI Designer Weekly!