Sign-in or Register: Form Design From Scratch (Day 1)
Tutorial Details
- Topic: Photoshop form design
- Difficulty: Beginner
- Screencast duration: 43 mins
Final Product What You'll Be Creating
We deal with web forms all the time; when we log in to YouTube, Facebook, or any other web service, we have to get through a login or sign up process. Often this can be difficult because some forms are too long, or too cluttered. We’re going to build a stylish, straightforward login form, and today we’ll be looking at the Photoshop side of things.
Section 1: Introduction
Let’s take a look at login forms, examine one-page vs. multi-page forms, and dive into our Photoshop project.
Section 2: Sign in
It’s time to look more closely at our sign-in form.
Section 3: Sign up
Lastly, let’s take care of our registery form.
Time lapse: The PSD Build in FFWD
Further Reading and Useful References
- Smashing Magazine Web form design patterns
- Webdesigntuts+ An Introduction to Color Theory for Web Designers
- Six Revisions A Look into Color Theory in Web Design
- dezinerfolio.com30 Free Vector Icons
- Nettuts+ Build a Neat HTML5 Powered Contact Form
- Dive Into HTML5 A Form of Madness
- A List Apart Forward Thinking Form Validation
- Nettuts+ 8 Regular Expressions You Should Know
- HTML5 Input Patterns
- CSS Tricks Force Element To Self-Clear its Children
- Code Style Font stack builder
- FamFamFam Silk Icons
){kind=link}
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Adi Purdila
Sign up now!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Webdesigntuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Hey there,
I liked this tutorial a lot!
One recommendation I would have is to put this in the css.
html { overflow-y: scroll; }
It prevents the unnecessary jumping of the screens when you go back and forth between login and regsiter. It makes the animations much more fluid as well.
Great job!
Alex, personally, i don’t like the idea of put one scrollbar if this isn’t necessary, do you agree?
@Guilherme I suppose it doesn’t really matter. I’m just saying from a UI perspective, it’s nice not having the small jump of content when you switch in between the two states. It depends on the monitor size as well, but yeah, it’s not really a huge deal.
U rock man…!
u r a gift to the beginners like me :)
thanks adi
That’s awesome!
I can’t download the latest video
That’s weird (?) I’ve changed all the download links to the HD 720 m4v source files, instead of the original mov files – have a go now!
or else try this:
http://blip.tv/webdesigntutspluscom/rss
U will find all videos including this from webdesigntuts ;)
Thanks lawrence :) While we’re on the subject then… feel free to subscribe to the Webdesigntuts+ YouTube and iTunes channels – you’ll never miss a beat!
but it doesn’t work in IE8 – it is big problem
Very strong tutorial, thank you :)
I love the way ⌘S pops up all the time when Adi’s designing – a pro’s twitch :)
Hehe, yeah. A wise man’s twitch I’d say, learned by the many years of suffering and headbanging because I was relying waaaaay too much on Windows to not crash… which it did eventually :D
This is a great tutorial, especially for newcomers of user experience and user interface design. Thank you.
very nice tutorial.
thank you very mutch
i like what you do audy
thank you very mutch
i like what you do audy
good job
Very helpful indeed , thanks a lot guys , keep on this great work .
Wow, that is one sexy form. Cant wait to try this one!
Hello Adi. Here is another tip for you (before i commented about the %| in TextExpander) :)
I can see you are using Trim a lot to save pictures/graphics from a PSD. And i know – there is no short command for this, so let’s just make one!
In photoshop:
* Edit -> Keyboard Shortcuts
* Expand the Image menu
* Scroll down to Trim and click on it
* Press your desired short command for Trim (i use ctrl+alt+cmt+T)
* Done!
Screenshot:
http://goo.gl/JDJhg
And Christian comes to the rescue one more time :D
Thank you so much, this will save me a bunch of time. Now, the flood gates are opened LOL, I’ll probably spend a few trying to remap my PS :)
Just glad to help! Thank you, for your videos!
Truely nice form……I must use it…..
Really professional…..keep moving
This is what we really want…
i realy appreciate your tutorials.
very proffessionals, taking care of evry details in your tutorials
very good job. thank you very mutch
great form!
adi purdila, are you from indonesia?
Very nice form, I really like it :)
Anyone knows when part 2 is going to be up? Thanks :P
About three seconds ago :)
Glad you like it guys :)
And no, I’m not from Indonesia, it’s the second time someone’s asked me that here :D
Thanks guys! I was looking for something like this right now! Thanks (bow)
This one is helping me a lot. Thank you! It’s great result and explanation.
Good job for this awesome piece of work! It is indeed helpful!
And also, Adi Purdila is a romanian name, isn’t it?
I love this. What I would like to achieve in the design I’m doing is to have this login form open up (javascript) from the click of a login on my homepage. Help me?