How To Design Flat UI Web Form?

Understand principles. Learn the tool.

I believe that the flat design trend is a symptom of the growing maturity in the field of web and interface design. This maturity applies to our designers — who are getting better at making interfaces that encourage interactivity and engagement — as well as to our users./Marci Ikeler, Designer & Founder of Little Arrows

Some designers believe that flat design is about something more than just flattened set of gradients, minimized drop-shadows and modest usage of textures. Flat design, in their view, is the ultimate simplification of the form (check “The Flat Design Principles: http://designmodo.com/flat-design-principles/). These designers consider flat design a step towards the maturity of the whole field of user interface design.

And yes. Flat design, if done correctly, looks stunning. Freshness of the form gave us all much needed break from the heaviness of skeuomorphism (often just badly applied). BUT if you think carefull about the principles of flat design:

1. No added effects
2. Simple UI elements
3. Focus on typography
4. Focus on color
5. Minimalist approach

you can easily notice that they’re no different than the principles of the good design.

If you apply these principles to your design and you’ll remember about the importance of visual hierarchy and affordences in your UI — you might create something absolutely great. No matter if you call it flat or not.

The purity of the form always wins.

That’s why I’ve decided to show you how to use the focus on the principles of flat design to create a good-looking, usable, form. My aproach was really simple:

• Clear typography (Lato, 24px)
• Larg, flat, but visible, inputs
• No extra fields (instead of the popular “repeat password”, I’ve used “hide the password” checkbox)
• Subtle button (forgive me the wrong label ;))

Take a look at the short (104 sec) video tutorial: http://youtu.be/JwmQP8otKPI

And that’s the final result with a short description:

Flat Web Form designed in http://www.uxpin.com

The tool that you can see on the screen is UXPin — The UX Design Platform.