Research

The most important thing to get right before you get started is to make sure that you understand your client and what service or product they offer. This doesn’t only apply to freelancers or web designers who work in a design agency where they deal with multiple different clients but also those who work in-house. Think of your employers as your client as they, much like a traditional client, pay your for your service.

FreelanceSwitch has a great post on How to Extract the Facts with a Web Design Client Questionnaire. This is designed to get the most information out of your client that they probably never thought that you would need to know. Obviously these questions aren’t suited to everyone but if you follow the idea that you need to find out as much about your client as is required then you’ll be setting yourself up for a good start.

Good research has an added benefit further down the road. If you have a solid understanding of what the client needs, then in theory, it will reduce the amount of changes that the client will make as the design or development is in progress.

Inspiration

Hopefully, having a better understanding of what your client needs will create something in you mind’s eye in which you can springboard off from. If you’re still stuck with that blank PhotoShop screen then there are a few things you can do to trigger the design stage.

Compare your Client’s Competitors

Have a look at what your client’s competitors are doing and see what you can do better and improve upon. Try to find something that they’re missing and fit that into your design. At this stage it’s important to not forget what the client requires or you can end up not delivering what the client asked for. At this stage, if you can thing of something that the client wants that you can improve then discuss it with them.

Find Inspiration from Existing Sites

There are a number of great design galleries out there that can help you get a project off the ground. Best Web Gallery, CSS Remix and CSS Line are examples of some of the best galleries out there. These galleries showcase the best or most popular web designs.

Remember, inspiration is not about copying but rather kick-starting an idea of your own.

Hopefully the above advice should give you a helping hand when you are struggling to start a new project. If you have any ideas or ways you do things differently then please feel free to comment.

WPCoder uses a high quality image of a clipboard for their order form.

Alex Cohaniuc uses a piece of paper for his contact form.

Paramore Redd have a nicely styled, clean contact form.

Graphik uses a big friendly header on their contact form.

Kontain clearly defines form fields by using bounding boxes and colour.

Tumblr uses big form fields and a nice clean appearance.

News Pond gets users to focus on their sign-up form with the use of a background glow.

Duoh uses a big bold header and a paragraph to introduce their contact form.

Neutron Creations fills in fake details on their contact form, showing clearly, at a glance, what details should be entered.

Ballpark has a nice clean design with clearly defined sections.

Dragon Interactive uses a tab interface to distinguish the type of message on their contact form.

Substrakt uses the familiarity of a postcard for their contact form.

Battle.net implements a progress tracker for each step of signing up to their service.

Tuitive uses sIFR for non-web safe fonts on the label tags of their contact form.

David Hellmann uses plastic tape for the label tags of his contact form.

Elliot Jay Stocks uses nice big and clear elements on the comments form of his blog.

Be Inspired

As you can see, forms don’t have to be boring, there are a number of different ways that you can make forms more interesting and more usable, increasing the chance that users will sign up to a service or send feedback.

Feel free to share your own form designs and any others that you have seen out there in the comments.