Log-in Screen for Adventure Meetup App
As part of our design study at Iron Hack we were tasked with learning as much as we can about the Sketch app, testing it’s capabilities, and experimenting with it’s features, by attempting to build our first login screen. My thought process here was firstly to create an “Adventure Meetup App” and have the login screen represent this overall thesis.
I decided to first begin with a snow covered slope in the background to give a user a sense of thrill, hopefully. The logo was already chosen, however I had to recreate it here. I used the boolean features to make it look as close to the proposed logo as possible.
The login elements “Username”, and “Password”, were created as an open form rather than a closed in circle. I feel that the airiness of this adds to the feel of the app (meeting people and being open to experiences), along with the fact that closed in forms sometimes have too much text inside one little box. I’ve become a big fan of spacing.
I added a login with Facebook option, with the Facebook blue of course (or close to it). The general login screen is right below in case one would want to login that way as well. I wanted to add a separate “Sign up” button below, which would potentially open up a light-box above this screen, fading the opacity of the background screen in order to highlight this signup form. I really like the interface to respond in this way because sometimes having sign-in and sign up buttons next to each other may confuse a user in what action they should take next.
As stated here by Nick Babich “Sign In’ and ‘Sign Up’ are quite close. When buttons looks too similar and both use the same verb in their labels it’s pretty easy for users to get confused. Users might click one instead of the other, and usually this problem frustrates the users who log in because they make the mistake the most. Even if users didn’t make the mistake, they’ll spend extra time to distinguish the two buttons.”
Both actions are just too similar.
Overall, I had a lot of fun testing out Sketch’s capabilities, trying out different color themes, and working this screen to make it as user friendly as possible. Looking forward to working out with some more mockups.
