{"id":6082,"date":"2021-12-01T20:39:06","date_gmt":"2021-12-01T20:39:06","guid":{"rendered":"https:\/\/www.wendyzhou.se\/blog\/?p=6082"},"modified":"2025-10-14T16:36:18","modified_gmt":"2025-10-14T16:36:18","slug":"form-ui-design-inspiration-tips","status":"publish","type":"post","link":"https:\/\/www.wendyzhou.se\/blog\/form-ui-design-inspiration-tips\/","title":{"rendered":"Form UI Design Inspiration &#038; Tips"},"content":{"rendered":"\n<p><strong>Here&#8217;s a collection of form UI design inspiration and some tips to think about!<\/strong><\/p>\n\n\n\n<p><strong>Related: <\/strong><a href=\"https:\/\/www.wendyzhou.se\/blog\/list-ui-design-inspiration-ux-tips\/\">List UI Design Inspiration &amp; UX Tips<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>Almost every website and application today contain some type of form UI element. Sometimes it&#8217;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. <\/p>\n\n\n\n<p>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&#8217;ll try to cover multiple types of form UI design inspiration in this post.<\/p>\n\n\n\n<p>If you&#8217;re looking for a more UX related article about the form UI element, you may be interested in this post: <a href=\"https:\/\/www.wendyzhou.se\/blog\/dark-light-form-ui-design-designing-good-form-ux\/\">How to Create Good Forms UX\/UI Design<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p><em>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.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Login Form Inspiration<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>In this first one by <a href=\"https:\/\/dribbble.com\/shots\/14981045-Login-Sign-in\">Michael Yonke<\/a>, some things to observe in the design and that you can incorporate in your own is to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Include icons to the left to aid the representation of what should go into each field<\/li>\n\n\n\n<li>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.<\/li>\n\n\n\n<li>Stretch out the &#8220;Sign in&#8221; button to the width of the input fields<\/li>\n<\/ul>\n\n\n\n<p>The second one (by <a href=\"https:\/\/dribbble.com\/shots\/15820957-Login-Screen-from-Webpixels-Templates\">Webpixels<\/a>) is quite similar but some ideas that you can take away from this one is:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Include social-media login functions if applicable<\/li>\n\n\n\n<li>Fill in the background color instead of the border (gives a little bit modern UI look than solid borders)<\/li>\n\n\n\n<li>If in desktop, it may work effectively to split the screen and have the login forms to one side of the splitscreen<\/li>\n<\/ul>\n\n\n\n<p>This dark mode login form UI design by <a href=\"https:\/\/dribbble.com\/shots\/15230513-Sign-up-Daily-UI-001\">Oliver Cederborg<\/a> is absolutely gorgeous. It is a <em>great<\/em> inspiration if you&#8217;re designing in dark mode. He has thought about color contrast really well. Some special points to draw from this design is:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Highlight the selected\/active input field with a strong border-color, while keeping unselected inpute fields less eye-catching<\/li>\n\n\n\n<li>If an input is accepted, you may add a check to the right to show the user that they are doing good<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Complex Form UI Design <\/h2>\n\n\n\n<p>And now on to a bit more complex form UI designs, that contain a bit more input fields and functionalities.<\/p>\n\n\n\n<p>Our first example is a form UI design by <a href=\"https:\/\/dribbble.com\/shots\/16111369-Company-Settings\">Vishnu Prasad<\/a>. 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 &#8220;categories&#8221; (e.g. Personal vs Company). <\/p>\n\n\n\n<p>If your input fields need to contain different types of information, then you may find inspiration in this form design by <a href=\"https:\/\/dribbble.com\/shots\/16159049-Checkout-Form\">Pixsellz<\/a>. For example, observe:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>That the &#8220;Number of users&#8221; 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.<\/li>\n\n\n\n<li>If there&#8217;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 &#8220;Payment method&#8221; and &#8220;Payment term&#8221;.<\/li>\n<\/ul>\n\n\n\n<p>Here&#8217;s a great resource from <a href=\"https:\/\/dribbble.com\/shots\/16846799-Inputs-Selects\">Phil Goodwin<\/a>, with lots of different inputs &amp; selects to use in form UI design. I&#8217;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!<\/p>\n\n\n\n<p>Another great design from <a href=\"https:\/\/dribbble.com\/shots\/16046922-Create-Event-Form-Dark-Light\">Pixsellz<\/a>. This is a great inspiration for dark mode form UI design. I think he did a gorgeous job with the look for &#8220;+ Add description&#8221; and &#8220;+ Set meeting room&#8221; 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.<\/p>\n\n\n\n<p>If your design requires the user to go through multiple steps of forms, you may incorporate a progress bar of some sort, as <a href=\"https:\/\/dribbble.com\/shots\/15184687-Register-Scriptcase\">Sam Marxz<\/a> 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.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>There&#8217;s an endless amount of ways to design and display forms, so I won&#8217;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&#8217;d recommend checking out the <a href=\"https:\/\/dribbble.com\/search\/form\">form tag on Dribbble<\/a> &gt;<\/p>\n\n\n\n<p>Thanks for reading!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s a collection of form UI design inspiration and some tips to think about!<\/p>\n","protected":false},"author":1,"featured_media":6084,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[175],"tags":[247,568,516],"class_list":["post-6082","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-design","tag-design-inspiration","tag-form-en","tag-ui-design-en","entry","has-media"],"gutentor_comment":0,"uagb_featured_image_src":{"full":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/12\/Form-UI-Design-Inspiration-Tips.png",2560,1370,false],"thumbnail":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/12\/Form-UI-Design-Inspiration-Tips-150x150.png",150,150,true],"medium":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/12\/Form-UI-Design-Inspiration-Tips-300x161.png",300,161,true],"medium_large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/12\/Form-UI-Design-Inspiration-Tips-768x411.png",768,411,true],"large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/12\/Form-UI-Design-Inspiration-Tips-1024x548.png",1024,548,true],"1536x1536":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/12\/Form-UI-Design-Inspiration-Tips-1536x822.png",1536,822,true],"2048x2048":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/12\/Form-UI-Design-Inspiration-Tips-2048x1096.png",2048,1096,true],"ocean-thumb-m":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/12\/Form-UI-Design-Inspiration-Tips.png",600,321,false],"ocean-thumb-ml":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/12\/Form-UI-Design-Inspiration-Tips.png",800,428,false],"ocean-thumb-l":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/12\/Form-UI-Design-Inspiration-Tips.png",1200,642,false]},"uagb_author_info":{"display_name":"Wendy Zhou","author_link":"https:\/\/www.wendyzhou.se\/blog\/author\/wendy1111live-se\/"},"uagb_comment_info":0,"uagb_excerpt":"Here's a collection of form UI design inspiration and some tips to think about!","_links":{"self":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/6082","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/comments?post=6082"}],"version-history":[{"count":9,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/6082\/revisions"}],"predecessor-version":[{"id":7819,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/6082\/revisions\/7819"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media\/6084"}],"wp:attachment":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media?parent=6082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/categories?post=6082"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/tags?post=6082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}