Advertisement
Site Elements

Sign-in or Register: Form Design From Scratch (Day 1)

by

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.

Don't like ads? Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!


Section 2: Sign in

It's time to look more closely at our sign-in form.

Don't like ads? Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!


Section 3: Sign up

Lastly, let's take care of our registery form.

Don't like ads? Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!


Time lapse: The PSD Build in FFWD

Don't like ads? Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!


Further Reading and Useful References

Related Posts
  • Web Design
    CMS
    Adding a Twitter Timeline to a Tumblr ThemeTumblr 28 retina
    Welcome to this, the first of three bonus videos in our series Tumblr Theming 101. During this lesson we'll look at incorporating a simplified Twitter timeline into our theme; a slightly more complex process since Twitter updated their API to v1.1.Read More…
  • Web Design
    HTML/CSS
    Creating Friendlier, “Conversational” Web FormsForm retina
    Web forms are constantly a hot topic when it comes to web design and user interaction. The reasons for this are vast, but one of the more obvious reasons is that forms are the most basic way for a user to input information into your application. In this article, we'll discuss a few techniques that allow your forms to respond to the user's input, while helping to obscure unnecessarily confusing or overwhelming elements.Read More…
  • Web Design
    Applications and Tools
    Working With Gumby's Parallax ExtensionGumby parallax retina
    Having covered how to install the Gumby framework and how to work with its semantic grids (plus Sass and Compass), it's now time to dive into some of Gumby's extensions. The first extension we're going to play with is the parallax module.Read More…
  • Web Design
    CMS
    The Code Behind a Tumblr ThemeTumblr 2 retina
    In this screencast we'll take a first look at the structure of a Tumblr theme and the Tumblr customize area.Read More…
  • Web Design
    Applications and Tools
    A First Look at Google Web DesignerGoogle web designer logo retina
    Unless you've been hiding under a stone recently, you'll have no doubt seen Google's latest application release: Google Web Designer. Currently in Beta, GWD is a tool for building interactive websites and, perhaps more significantly, ad banners, through modern web standards. Let's take a first look at the interface, then build ourselves an animated banner using the tools on offer.Read More…
  • Web Design
    Site Elements
    Sign-in or Register: Form Design From Scratch (Day 2)Preview 2
    Having completed our form design in Photoshop, we're now going to turn our attention to the nuts and bolts of the process. Let's slice up the PSD, sort out some markup, style the whole lot, add some jQuery flourishes, then finish off with some inline form validation. There's a lot to do, so let's get started!Read More…