Here’s a collection of form UI design inspiration and some tips to think about!
Related: List UI Design Inspiration & UX Tips
Almost every website and application today contain some type of form UI element. Sometimes it’s something simple such as a single search field or a login section, or it may be a more complex UI form containing many input fields, tabs, multiple choices, and other dynamic elements.
The visual and interaction part of a form UI design element can be very minimalistic, or you can take them up a notch and incorporate feedback, illustrations, and other things that make the experience more fun. I’ll try to cover multiple types of form UI design inspiration in this post.
If you’re looking for a more UX related article about the form UI element, you may be interested in this post: How to Create Good Forms UX/UI Design
Note! When I do inspiration articles like these, most designs are not mine, so credits are given to each designer/owner under every image, with a link.
Login Form Inspiration
As mentioned, one of the most popular types of form is the login page or section. Here are some quick simple ones that you can draw inspiration from in your own project.
In this first one by Michael Yonke, some things to observe in the design and that you can incorporate in your own is to:
- Include icons to the left to aid the representation of what should go into each field
- Have solid borders around the whole input field, and have good paddings inside each field. It makes the input fields look more breathable and clean.
- Stretch out the “Sign in” button to the width of the input fields
The second one (by Webpixels) is quite similar but some ideas that you can take away from this one is:
- Include social-media login functions if applicable
- Fill in the background color instead of the border (gives a little bit modern UI look than solid borders)
- If in desktop, it may work effectively to split the screen and have the login forms to one side of the splitscreen
This dark mode login form UI design by Oliver Cederborg is absolutely gorgeous. It is a great inspiration if you’re designing in dark mode. He has thought about color contrast really well. Some special points to draw from this design is:
- Highlight the selected/active input field with a strong border-color, while keeping unselected inpute fields less eye-catching
- If an input is accepted, you may add a check to the right to show the user that they are doing good
Complex Form UI Design
And now on to a bit more complex form UI designs, that contain a bit more input fields and functionalities.
Our first example is a form UI design by Vishnu Prasad. One of the biggest sources of inspiration from this one is how he has incorporated different tabs above the form. This is a layout you could use as well if you are designing a frame where the user should be able to choose between different “categories” (e.g. Personal vs Company).
If your input fields need to contain different types of information, then you may find inspiration in this form design by Pixsellz. For example, observe:
- That the “Number of users” is not in the form of a usual input field, but a counter. Ideally, the user should be able to type in their own number as well. This could be made clearer with a darker font-color for the number.
- If there’s a set of pre-determined choices (max 4-6), you could write them all out and allow the user to chose one of them, as Pixsellz have done for “Payment method” and “Payment term”.
Here’s a great resource from Phil Goodwin, with lots of different inputs & selects to use in form UI design. I’d especially regard the input fields to the left and observe and learn from how the design represents different states (inactive, selected, unselected, neutral, error, etc). The drop-down search input with selectable multi-choice elements is great too!
Another great design from Pixsellz. This is a great inspiration for dark mode form UI design. I think he did a gorgeous job with the look for “+ Add description” and “+ Set meeting room” labels, although it is a bit unclear if they set the choice or add a new one. So if you draw inspiration from those, you may gain from thinking one extra turn on how the user will interpret them.
If your design requires the user to go through multiple steps of forms, you may incorporate a progress bar of some sort, as Sam Marxz has done in the example below. Incorporating a progress bar multiple-steps of forms may be a good way to give the user a sense of progression, and prevent them from exiting.
There’s an endless amount of ways to design and display forms, so I won’t go through more of them. But I hope these examples gave you some good form UI design inspiration and tips on things you may not have thought about before. If you are looking for more inspiration, I’d recommend checking out the form tag on Dribbble >
Thanks for reading!