Interface Design: Login/SignUp

Posted by Adelle on Dec 1, 2008 | 32 Comments

Interface design in websites focuses on the user’s experience and interaction. Where as traditional graphic design seeks to make the object or application physically attractive. Goal’s of user interface design is to make the user’s interaction as simple and efficient as possible. Where good graphic/industrial design is bold and eye catching, good user interface design is to facilitate finishing the task at hand over drawing unnecessary attention to itself. Graphic design may be utilized to apply a theme or style to the interface without compromising its usability. The design process of an interface must balance the meaning of its visual elements that conform the mental model of operation, and the functionality from a technical engineering perspective, in order to create a system that is both usable and easy to adapt to the changing user needs.

The following inspiration is focused on Logins/Signups in Web Design. I was doing research on login forms and thought the community could put this to good use and seek tips / design from these examples. My absolute favorites are Big Cartel, Vimeo, Gist & Status for it’s sleek design and beautiful interface.

32 comments

Kay
December 1, 2008
Tumblr?
Reply
Aaron Irizarry
December 1, 2008
Very cool!
I design a lot of interfaces for work… this is great lots of cool inspiration.

Thanks Adelle!
Reply
adelle
December 1, 2008
Glad you enjoyed it Aaron!

@Kay Tumblr is a nice one as well, although the signup part is a little huge in my opinion, but still nicely designed.
Reply
Mabuc
December 1, 2008
First list is unique, thank you for sharing this one.
Reply
liam
December 1, 2008
Wow, great post Adelle, lovely collection!
Reply
Andrei
December 1, 2008
Nice. Keep ‘em coming. I am always on a look out for cool inspirational design.
Reply
Brad C
December 1, 2008
I’ve always said you can tell how good a designer is by the forms they design. These are some great examples of that. Nice stuff Adelle.
Reply
Anthony
December 1, 2008
Thanks for the Login/SignUp love Adelle!
Reply
adelle
December 1, 2008
@Mabuc glad you liked it!

@Liam thank you very much

@Andrei glad you enjoyed it, I love finding these types of UI examples and hope to do more of these in the future.

@Brad C Thank you so much, glad you liked the examples!

@Anthony your welcome!
Reply
ptamaro
December 1, 2008
Wow, nice job Adelle — Thanks for the inspiration!
Reply
Ricks
December 1, 2008
Nicely compiled list as always. I really like the branding of GoodBarry. I saw them at FOWA a month or so ago with their tin boxes. Ha awesome!
Reply
Carlos Hermoso
December 2, 2008
Nice collection. Some of them are really inspiring
Reply
josh
December 2, 2008
I’m pretty proud of my doofy little contact form:

http://concept1027.com/information.shtml
Reply
Rayanne Langdon
December 2, 2008
Thanks for including FreshBooks in this list, Adelle!

I’ve always been a big fan of Vimeo’s login page, as well.

Rayanne Langdon — Marketing Coordinator, FreshBooks.com
Reply
devolved
December 3, 2008
Many of these illustrate that the beauty of things is inherant and not necessarily connected to aesthetics.

Do what you need first and what you want second.
Reply
Nathan Beck
December 4, 2008
Some nice examples, a lot of web 2.0 sites there but I guess that’s all the rage. I’m a big fan of really big fat spacious input boxes like on Gist, Pattern Tap and Hahlo.

On the subject of login/signup forms, Smashing Magazine published some great posts a few months back, definitely worth checking out:

1. – http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/

2. – http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/
Reply
Craig Farrall
December 8, 2008
Great post Adelle I love the login designs here, definately ones I will be trying to recreate if I need a login system.
Reply
Larz
December 10, 2008
Thanks for the plug Adelle here’s our Xmas login http://businesscatalyst.com/admin
Reply
Todd Smith
December 10, 2008
What a great resource, Adelle! Thanks.
Reply
Maud
December 11, 2008
In a very discreet on the Mylene Farmer fanclub’s website

http://www.mffcf.org
Reply
Thomas
December 17, 2008
Great Post, Very usefull thanks
Reply
Sarfraz
December 29, 2008
This is good post! very interesting and helpful.

Sarfraz
http://www.greepit.com
Reply
Leila Boujnane
December 29, 2008
Adelle: this is a great resource list. Thanks for the mention.
Reply
Erik Jenkins
December 31, 2008
I think this one should be included:
http://www.bestofjoomla.com/index2.php?option=com_bestoftemplate&task=demo&no_html=1&id=1893
Reply
Juan
January 27, 2009
Pretty cool!
I found an other one very nice in http://www.neositios.com it could be included
Reply
John Davis
October 5, 2009
Wow, major cool dude!

RR
http://www.complete-privacy.net.tc
Reply
Mc. Mary George
October 6, 2009
Nice collections, want to add:

http://lovelogger.com/register

which has some different pattern for it’s signup page.
Reply
Jelle Verkleij
October 6, 2009
I think the login of Wakoopa is one of the best. You should have added that site to

Check it out at http://www.wakoopa.com/
Reply
Kalais
October 8, 2009
I like Vimeo the most

prolly coz this cute drawing
Reply
sara
June 24, 2010
vb c++
Reply
Fahrenheit
July 28, 2011
This login/signin thingies was the exact inspiration I was looking 4…awesome
Reply
ömer
February 3, 2012
thank you. I like this
Reply

Web Design Ledger

Related Posts

32 comments

Kay

Erik Jenkins

John Davis

Mc. Mary George

Fahrenheit

Leave a Reply

Subscribe