Read Time: 1 min
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
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Sign up
Adi Purdila is a web design instructor for Tuts+. With over 100 courses and 200 tutorials published to date, Adi's goal is to help students become better web designers and developers by creating content that’s easy to follow and offers great value. Being self-taught himself, Adi strongly believes that constant learning (academic or otherwise) is the only way to move forward and achieve your goals. When not typing away at his keyboard, he loves woodworking and caring for his ever-growing family of rescue pets. You can stay up to date with what he's doing by following him on social media or visiting his website at adipurdila.com.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.