Day 11 — Splash Screens

My design for a failed and a successful login attempt


Traditionally, red means failure where as green or blue means success, which are conventions I stuck to for my designs. Knowing the colors I wanted for my end results, I worked backwards to develop a color scheme for a neutral state. In this case I chose yellow, which is meant to represent the default color of the site/app, not necessarily a neutral status

To the left is my basic login screen. It includes a link to create a new account as well as links for users who forget either their username or password. There is also text reminding them of the password requirements for this particular product. The coloring on the ‘Continue’ button matches the header, which I feel provides good consistency.

For a failed login, I changed the header color to red as well as the name of the field that was incorrect (“Username”). This should quickly convey to the user that the login was not successful. The header text has also been changed from “Login” to “Login Failed” to further differentiate this splash from the previous, default login screen.

Green is used for the header of a successful login to convey acceptance. The window ratio has also changed to illustrate a transition of state; the splash has transformed from tall and thin to wide and short similar to how the user has transitioned from not logged in to logged in.


Overall, I’m pleased with my design(s), but am even more pleased with how quick I was able to churn it all out. I definitely feel like I’m getting more efficient with Sketch. Visually, I think my color gradients look pretty good but are still to bland for an actual product. It was odd creating a ‘successful login’ splash because ideally this would just be a banner message on a landing page as opposed to a standalone window with a call to action to continue. In theory, changing window ratio based on login status makes sense and could possibly work, but I have my doubts. I would need to get a prototype running to see if that transition is actually appreciated or if it is just jarring.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.