Login Screen

This design has been updated for Repeating Elements! Each plane in the bar on the hero is part of a repeat, where each plane SF Symbol is customized to be arriving or departing and the last one is given a custom color. The buttons are also part of a repeat with the last Sign in with Apple button using a black background, white text color, and “” SF Symbol to change from a standard button to the special button.

——

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!