15 gorgeous flat design login page and screen

One of the most crucial page for any website is the login screen. This particular page has evolved from year to year as designers take advantage of the latest technology and design changes. This year, flat design has become really popular.  You can definitely expect more designers to start creating flat login design screens for 2014. To help you prepare for this change, I have round up some really beautiful flat login form design as a source of inspiration for future projects.  Regardless of whether you are designing a flat login form for webpage or mobile app, this round up will cover it.


#1: Flat login design for mobile by Calvin Smith

flat login design 1

Featuring a gorgeous color scheme, this flat login form for a mobile app is just beautiful in its simplicity and the use of flat design technique.


#2:  Transparent flat login screen by Rich Smith

flat login design 2

You can’t get more minimalist than this. It uses the full screen design technique to make the whole login page more modern looking. However, if you need some space to convey information to your new visitors, this design might not be appropriate.


#3: Flat login design on Behance

flat login design 3

Most designers should have an behance account.  If you have been using their mobile app, you will notice their flat login design, which is very sleek.


#4: Flat login screen by cssflow

flat login design 4

I love the adding a rainbow header to the login form. This makes it stand out from the rest of the flat login form designs, without adding too much complexity to the whole thing.


#5: Flat login page with cool background color

flat login design 5

Using the right background color can make a lot of difference in terms of look and feel of the login page. In this case, the use of the fresh green background is both modern and refreshing.


#6: Use of photos in flat login design

flat login design 6

Another popular trend is the use of circles to represent images. You can see how this design concept is used in this flat login screen. It looks great and is worthy of a reference.


#7: Retro flat login design by Marina Belova

flat login design 7

It is a nice concept to apply a retro feel to a flat login form. However, I don’t like the color scheme as it is not a good contrast with the kind of background image being used.


#8:  Animated flat login design by CHI-YI CHAO

flat login design 8-2 flat login design 8-1

The animation being applied here is rather nice and function. At its normal state, both the login and password boxes are grey out. Once you start tying, the color changes to white. It is nice touch to an otherwise static flat design.


#9: Horizontal flat login design by Nicholas Bittencourt

flat login design 9

This is a very unique login screen design as you don’t see such a horizontal bar being used. Notice the use of the circular image again? Overall, I loved the creativity in this screen.


#10:  Elegant flat login using typography

flat login design 10

The outstanding feature in this design is the use of typography to create an elegant look for the entire login page. I can picture this being used in luxury hotels’ webpage.


#11: Using drawings in flat login page by Mark Kwong

flat login design 11

A good way to make your flat login design unique is to add a nice drawing image like what is shown above. You can use the image for half the screen to avoid cluttering the entire login page.


#12: Flat login design with full screen image and circular photos

flat login design 12

Skype’s flat login screen uses 2 design concepts that are very trendy now: full screen image and circle photographs. This makes the whole login design looks very modern.


#13: Full screen photos with flat login design by Luiz Carlos Cavalcanti

flat login design 13

Most full screen images are backgrounds. Here is one that uses a real person’s image. The effect is rather cutting edge and might be suitable for certain type of web or app design.


#14: Sophisticated flat login design

flat login design 14

While the overall design seems simple, the combination of a black background, a beautiful font and a cool logo makes the entire login screen looks sophisticated.


#15: Floating flat login design

flat login design 15

This floating flat login form is a nice touch by Apple’s iCloud. I assume upon signing in, the login form will disappear and the actual page can then be interacted with.

About the author

With a passion for Knowledge, Smashinghub has been created to explore things like Free Resources For Designers, Photographers, Web Developers and Inspiration.

Twitter Visit author website

Subscribe to Smashing Hub


  1. Dylann Andre says:

    I like that floating flat login. So simple yet cool.

  2. salman baig says:

    How to download the PSD’s?

  3. Aatif Aneeq says:

    Do you have source code/design for all these interfaces?