30 Days to Your First Website Design

Lesson Notes * Sign In or Register: Form Design from Scratch

Transcript Hi guys, welcome back to 30 Days to Your First Website Design, a Tuts+ Premium course. I’m Ian Yates and today we’re going to talk about our contact form. We’ll begin as always by taking a quick look at what we’re going to cover in this video:

• Firstly we’ll talk a little bit about usability
• Before we jump straight into our layout file to continue with the design
• With our form design complete, I’ll leave you with an assignment before we move into the next video

Barely a website comes to fruition these days without including a form of some sort. Contact forms, newsletter sign up forms, online checkouts, login forms, comment forms – they all invite users to enter information and submit it in order to complete a process.

You’ll remember we talked about goals and conversions earlier in the series, and forms are often a fundamental step in the user completing goals of some sort. They’re also therefore, a classic stumbling block. If ever there was a sure fire way of preventing someone from completing an online process, it’s presenting them with an awkward form.

Take Captcha for example, you’ll have no doubt completed one in the past, and you’ll have no doubt had to have had a couple of attempts at some point too. They’re a great way of preventing spam from hitting your inbox, but they’re also a significant hurdle for users. A Captcha input runs a very high risk of turning users away.

There being too many fields is also a turn-off. In our contact form, for example, we’re only going to request the bare minimum information needed – name, email, and message. With this information we can get in touch with the user – we don’t need their address, telephone number, shoe size etc. In short, we want our form to be as user friendly, as easy to fill in as possible.

Alright – let’s dive into our psd and polish up our contact section.

[Photoshop live demo not included in transcript.]

Next Steps OK, it’s time for some further reading: This article on Webdesigntuts+ is a short series of two tutorials on building a sign-up and register form. The first part of the series deals purely with the design aspects and using Photoshop.

And before we jump into the next video, I have an assignment for you: much in the vein of the last few videos, I’d like to you continue with the psd file we’re building; adding of course, the contact form.

Next time on 30 Days to Your First Website Design we’ll be looking into our footer section. I’m Ian Yates and from all of us at Tuts+ thanks for watching!