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

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

on Sep 19th 2011 with 34 comments
Tutorial Details
  • Topic: Photoshop form design
  • Difficulty: Beginner
  • Screencast duration: 43 mins

Final Product What You'll Be Creating

Download Source Files
Demo View It Online

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

Adi Purdila is AdiPurdila on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs. If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Alex W

    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!

    • Guilherme Ventura

      Alex, personally, i don’t like the idea of put one scrollbar if this isn’t necessary, do you agree?

      • Alex W

        @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.

  • http://laranzjoe.blogspot.com lawrence77

    U rock man…!

    u r a gift to the beginners like me :)

    thanks adi

  • http://www.rezidenca-celigo.com Andrea

    That’s awesome!

  • http://yufid.com ferly

    I can’t download the latest video

    • http://www.snaptin.com Ian Yates

      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!

    • http://laranzjoe.blogspot.com lawrence77

      or else try this:

      http://blip.tv/webdesigntutspluscom/rss

      U will find all videos including this from webdesigntuts ;)

      • http://www.snaptin.com Ian Yates

        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!

  • http://www.skrzypol.com Fotograf Poznan

    but it doesn’t work in IE8 – it is big problem

  • http://www.webinspeer.com Tomas

    Very strong tutorial, thank you :)

  • http://www.snaptin.com Ian Yates

    I love the way ⌘S pops up all the time when Adi’s designing – a pro’s twitch :)

    • http://www.adipurdila.com AdiPurdila
      Author

      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

  • http://nuvomedia.dk Nicolai Busekist Ohlsen

    This is a great tutorial, especially for newcomers of user experience and user interface design. Thank you.

  • http://www.xpellshop.com ric

    very nice tutorial.

  • supprof1

    thank you very mutch
    i like what you do audy

  • supprof1

    thank you very mutch
    i like what you do audy
    good job

  • Sleeman

    Very helpful indeed , thanks a lot guys , keep on this great work .

  • http://simonwjackson.com Simon W. Jackson

    Wow, that is one sexy form. Cant wait to try this one!

  • Christian

    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

    • http://www.adipurdila.com AdiPurdila
      Author

      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 :)

      • Christian

        Just glad to help! Thank you, for your videos!

  • http://www.earn.com.bd corvus

    Truely nice form……I must use it…..

  • http://www.dhaneshtk.com dini

    Really professional…..keep moving
    This is what we really want…

  • supprof1

    i realy appreciate your tutorials.
    very proffessionals, taking care of evry details in your tutorials
    very good job. thank you very mutch

  • http://faizdesign.wordpress.com faiz al-qurni

    great form!
    adi purdila, are you from indonesia?

  • Pingback: Sign-in or Register: Form Design From Scratch (Day 2) | Webdesigntuts+

  • http://richardmisencik.com Richard

    Very nice form, I really like it :)
    Anyone knows when part 2 is going to be up? Thanks :P

  • http://www.adipurdila.com AdiPurdila
    Author

    Glad you like it guys :)

    And no, I’m not from Indonesia, it’s the second time someone’s asked me that here :D

  • Pingback: Sign-in or Register: Form Design From Scratch (Day 2) | Shadowtek | Hosting and Design Solutions

  • Pingback: Best of Tuts+ in September

  • http://xn--80aesgwg8c.eyankulov.com Emanuel

    Thanks guys! I was looking for something like this right now! Thanks (bow)

  • Pingback: Best of Tuts+ in September | linuxin.ro

  • Pingback: Tutorial - Best of Tuts+ in September | Tutorials and Guides

  • Pingback: Best of Tuts+ in September « Fast Ninja Blog by Freelanceful – Web Design | Coding | Freelancing

  • Pingback: Best of Tuts+ in September | Shadowtek | Hosting and Design Solutions

  • Pingback: Books Empire» Blog ArchiveSign-in or Register: Form Design From Scratch (Day 2) » Books Empire

  • Pingback: Best of Tuts+ in September | Mr Hoang

  • Pingback: Best of Tuts+ in September | Major Templates

  • André

    This one is helping me a lot. Thank you! It’s great result and explanation.

  • Lexander

    Good job for this awesome piece of work! It is indeed helpful!
    And also, Adi Purdila is a romanian name, isn’t it?

  • James Andre

    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?

  • Pingback: 8 Registration and Sign up form Tutorials

  • http://twitter.com/zabualrob Ziyad Abualrob

    Dear Adi, Thanks for this useful tutuorial. What should one do to make a simple validation form, using same functionalities used here (without active and toggle tabs)… KR

  • Pingback: Designing a Better Contact Page | Webdesigntuts+