Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create account

Design an App Login Screen for a Dating Service

Posted Aug 27, 2016

Ended 2016-09-03
73 entries (60 users)
Prize Guaranteed

Challenge Description

Love (or lust) is in your heart, and you've downloaded a brand new app to fill the void...

You tap that as..I mean, app launcher, and the first screen you're presented with, is the one YOU'RE responsible for designing!

That's right. For this design challenge, your objective is to design the login screen of an app for a real dating service called "anarchy.love".

This is a REAL dating service.  I (Gary) launched it over a month ago.  https://anarchy.love is a dating service for self-described anarchists and libertarians. We currently have close to 900 members.

We may launch a mobile app, and I thought it would be a great challenge to allow the community to design the login screen!


Requirements

  • This welcome screen MUST include the following elements:
     - The logo (AI File - PNG File)
     - A login with facebook button 
     - An "or" label
     - A textfield for "email"
     - A textfield for "password"
     - A login button
     - A "forgot password?" link

  • Please make sure you present a large enough mockup JPG so that we can see the elements.
  • You're free to customize the background however you wish, but make sure it's with good design in mind, relevant, and good contrast with the foreground elements.
  • Keep the design more simple with flat design in mind, as opposed to a lot of effects (crazy gradients, drop shadows, glows, bevels, etc..)


Good luck!

Prizes


Inspiration

Winning Entry

Robert Ligthart
66%
Simplicity
Relevancy
Uniqueness
Versatility
Color / Contrast
Questions? Learn about ratings


Hello Gary,

This is my first entry, I hope you like it! If you would like to see something different, let me know.

Kind regards,

Robert

Entries

Nafim Dewan
48%
Simplicity
Relevancy
Uniqueness
Versatility
Color / Contrast
Questions? Learn about ratings
Instructor's comments

The "LOG IN" button gets lost with the other hearts a bit, it really needs to stand out a lot more. And the "f" facebook heart isn't obvious that it's a login button.



For this design I incorporated (for the most part) light colors. In the background is an image of a happy couple at about 4% opacity. For the login and facebook login button I decided to use hearts to implement a more creative approach rather than the average rounded square... Please be as harsh as possible, I only want to get better!

Czébely Beni
38%
Simplicity
Relevancy
Uniqueness
Versatility
Color / Contrast
Questions? Learn about ratings
Instructor's comments

Logo clashes too much with the purple bg.



David StanĨík
64%
Simplicity
Relevancy
Uniqueness
Versatility
Color / Contrast
Questions? Learn about ratings
Instructor's comments

Pretty good entry! I don't like the bottom with the random white divider between forgot password and facebook login, though. Forgot password needs to go underneath the password field.



I do app design / flat design for two years now, but This is a great challenge! I had a fun making this to life, so I hope you'll like it! btw. I added my own text, for better UX. (Yes, that one Under Logo).


// First photo is default look, second is for showing, that if you click the email / password input, "placeholder" will slide up and change font-size like shown, to make space for input. :) Hope you understand.

MichaelW Swiftdesigns
50%
Simplicity
Relevancy
Uniqueness
Versatility
Color / Contrast
Questions? Learn about ratings
Instructor's comments

Not bad, but things are a bit squashed near the bottom, and I'm not a fan of the script "or". with the white lines to the side. I'd make "or" consistent with the other sans-serif type, and fade it out to a lesser opacity.



Peter Preter
54%
Simplicity
Relevancy
Uniqueness
Versatility
Color / Contrast
Questions? Learn about ratings
Instructor's comments

The one thing that feels off is the green login button, along with the pink and the blue. I would have also spaced out the elements more, as you have more vertical space to utilize.



Paul Bossle
32%
Simplicity
Relevancy
Uniqueness
Versatility
Color / Contrast
Questions? Learn about ratings
Instructor's comments

This isn't really utilizing any of the logos existing colors. It's also hard to read the form labels because the yellow doesn't offer much contrast against the white.



Rittam Debnath
36%
Simplicity
Relevancy
Uniqueness
Versatility
Color / Contrast
Questions? Learn about ratings
Instructor's comments

The forgot password gets lost, the ".love" symbol doesn't contrast well. The background is coming in too strong, therefore it's clashing with the form elements.



Max Thorn
40%
Simplicity
Relevancy
Uniqueness
Versatility
Color / Contrast
Questions? Learn about ratings
Instructor's comments

The "or" and "forgot password" are barely recognizable, and the or is positioned very funky. I would also use facebook's preferred color as it's more recognizable to people.



Tried to include elements of anarchy by adding noise and diagonal gradients.
Quite challenging for me as I've never done this before.

Robin Seger
68%
Simplicity
Relevancy
Uniqueness
Versatility
Color / Contrast
Questions? Learn about ratings
Instructor's comments

Not a bad entry. The left definitely has issues with contrast with the transparent login button and the background, relatively smaller type. Layout-wise, the middle is the best.



(psst, you forgot about a link to be able to create an account, in the requirements)

Included some variation where I played a bit with the backing itself, the middle one seems to work well with the fields being on a dark, muted background.
I've done any sort of app layout a total of two times now, having a tad of an issue with using the more limited space, while keeping usability in mind.

I think the biggest issue I may be having is pretty much the spacing on such a different canvas to work on.
That, and waking up at 5:30AM to do this :^)

suparman muhsan
34%
Simplicity
Relevancy
Uniqueness
Versatility
Color / Contrast
Questions? Learn about ratings
Instructor's comments

There's not enough contrast between the email/password fields and the background, making it harder to see. Also, that background, lol..



make your partner satisfied

Samir Benoualid
52%
Simplicity
Relevancy
Uniqueness
Versatility
Color / Contrast
Questions? Learn about ratings
Instructor's comments

I would definitely use the more familiar facebook login button with their preferred blue -- people recognize that better. It also helps differentiate between the other login fields. Other than that, not bad.



Roshaun Smith
36%
Simplicity
Relevancy
Uniqueness
Versatility
Color / Contrast
Questions? Learn about ratings
Instructor's comments

Type is too small in some areas, the email and password boxes are misaligned, contrast is low in other areas.



Be as harsh as possible

Login or create an account