Saturday, September 29, 2012

Login Screen Design is done

So, I finished the login screen design.
My first try did not include any graphics but the logo of "BIBEL lesen" and the icon of "Registrieren". This was really plain and very straight forward. But after replacing the opaque color with a repeatable background pattern image, I did not want to go back.
I showed them to a friend of mine. He was polite saying the design was "nice". Since nice is the little sister of ugly I decided that this login screen needed a better appearance. So I used rounded corners instead of sharp ones, replaced the greenish linen background pattern with a stockphoto fullscreen on background-size: cover;.

I also want this app to be mobile friendly. But having no time for developing two or more separate apps, I go  for one app with media queries to the rescue. I chose one basic css and for each higher resolution I add more information. So I work with min-with.I think this matches the mobile-first philosophy better than the max-width approach.I will hopefully result in good (i.e. less) CSS code. But now: The screenshots:

Mobile login screen (320x480)

Mobile login screen showing "wrong password"-error message

The login screen at 1600x900

The same screen showing the error message

No comments:

Post a Comment