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

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

Not bad. The form labels being the same white/value as the form input text isn't quite ideal, and the form input fields don't contrast a ton -- but those are minor gripes. And PS: "UtopianLove"? Ha! You want to know what I think is utopian? Thinking that we can achieve freedom while being subjugated by political overlords who only seek to steal nearly half of everyone's money (taxation). ;)



Sleek, engaging design.

Justin Schwartz
60%
Simplicity
Relevancy
Uniqueness
Versatility
Color / Contrast
Questions? Learn about ratings
Instructor's comments

Good, simple entry.



Simple, flat design.

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

Lol, thanks for the video. This isn't bad. The biggest issue is not enough white space on the right and left side of the layout. The logo really stretches almost 100% of the way -- give it more white space, along with the main form elements.



Please read!! This is clean, minimalist and flat UI design. Forms are more visible on phone. You should check out this design in action here http://goo.gl/pcpJqK

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

When you're using a photograph background, you want to really make it *not* stand out. This stands out way too much and creates issues with contrast/usability.



All Icons and photos have been used under CC License.

Rory Malgs
42%
Simplicity
Relevancy
Uniqueness
Versatility
Color / Contrast
Questions? Learn about ratings
Instructor's comments

The main problem here is that the form labels appear just a bit too small. Also, the login button should extend 100% width and styled differently than the input fields above it, so it's a clear call to action.



my variations of the login screen

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

Unfortunately too many issues here. Issues with complexity (shadows, fades overlapping), color/contrast with the bg and form elements, etc..



Anet Ann
44%
Simplicity
Relevancy
Uniqueness
Versatility
Color / Contrast
Questions? Learn about ratings
Instructor's comments

The email address and password labels; not enough contrast with the dark background. I'd make those white. The right aligned login button is not a good idea on mobile design. I'd make it 100% width like the input fields.



Hi, wow, it was a big challange to me. I'm start with design at all. But... about my project - I saw the page and the colors on it, and thouhgt that I could use them. I try to put everything needed and also keep it simple.

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

The major problem with this is visual hierarchy. The "or" should never deserve that much importance. It's larger than the email and password labels. This makes the whole flow of the layout hard to follow.



First time designing an app login screen.

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

Not a bad attempt. But you can see you have space left vertically at the bottom - try to use the whole layout and space things out as needed. And "Forgot password?" is way too close to the login button. I'd add more white space.



Here is my design.

Tariq Ali
46%
Simplicity
Relevancy
Uniqueness
Versatility
Color / Contrast
Questions? Learn about ratings
Instructor's comments

Not bad, but doesn't use the full logo (not a big deal), and I think a bit too much space is designated for the .love symbol, while everything else is compacted quite a bit towards the bottom.



App Login Screen.

Tunde Ojediran
46%
Simplicity
Relevancy
Uniqueness
Versatility
Color / Contrast
Questions? Learn about ratings
Instructor's comments

This is simple and gets a lot right, but just a tad bland. Circling the "or" doesn't quite fit, the dark gray login screen doesn't work (I'd use a color that stands out more). Good attempt.



Tariq Ali
44%
Simplicity
Relevancy
Uniqueness
Versatility
Color / Contrast
Questions? Learn about ratings
Instructor's comments

The form fields get a bit lost with all that's happening in the background / design. I would simplify things a bit more by perhaps adding a lot more transparency to the couple dancing.



App Login Screen for Anarchy.Love

epic zahid
60%
Simplicity
Relevancy
Uniqueness
Versatility
Color / Contrast
Questions? Learn about ratings
Instructor's comments

Good entry. I think the "SIGN IN" button is too far away from the form fields, it feels separated too much. Otherwise, solid attempt.



Hello gary! I am an absolute beginner and im still learning. I just want your feedback about how can I improve stuffs. I really appreciate your feedback :)

About the design:
I like simplicity so I tried to keep it clean and flat. Also tried to keep the colors relevant. I COULD NOT INCLUDE THE "OR" BECAUSE IT WAS NOT LOOKING THAT GOOD WITH IT. hope you will understand :) thanks for your hard work and time :)

Fábio Silva
48%
Simplicity
Relevancy
Uniqueness
Versatility
Color / Contrast
Questions? Learn about ratings
Instructor's comments

It's not bad, for sure. But I think the labels "Feel free to.." and "or enter" stick out too much, which causes an issue with visual hierarchy. Look up the term to get a better understanding of what I mean. ;)



First time here! Hope you like the design i made

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

Color / contrast is graded slightly low only because of the placeholder text in the 2 form input fields is way too light; not enough contrast. Otherwise, solid attempt.



I kept it very simple with a white background just like the site and logo on top. The facebook login is as flat as can be but the input fields and the login button do boast a very slight gradient to add some depth and interest. In my own opinion the layout is very understandable and clean. More images can be found here as well http://imgur.com/a/G9PGx

Login or create an account