Guidelines<\/strong><\/h4>\n\n\n\n\n- Keep form fields on one column as much as possible (except for forms that are highly relevant like password and repeat password).<\/li>\n\n\n\n
- Top align labels.<\/li>\n\n\n\n
- Make the Call-to-action<\/em> button descriptive.<\/li>\n\n\n\n
- Use field lengths as an affordance.<\/li>\n\n\n\n
- Groupe relevant information.<\/li>\n<\/ul>\n\n\n\n
Accessibility & Light mode version <\/h2>\n\n\n\n\n![\"\"](\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Light_Form-455x1024.png\")
Light mode UI form design<\/figcaption><\/figure>\n\n\n\n![\"Dark](\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark_Form-454x1024.png\")
Dark mode UI form design<\/figcaption><\/figure>\n<\/figure>\n\n\n\nThe visual design of the dark mode UI was made to make it appear more cool and modern, and therefore I loosened some aspects of accessibility. <\/p>\n\n\n\n
But if this were to be implemented in a “real” life setting, the accessibility would be much more important. This is why I also created the design in a light mode and with more focus on accessibility. <\/p>\n\n\n\n
To improve the accessibility further<\/h4>\n\n\n\n
To make the accessibility even better I could do the following changes:<\/p>\n\n\n\n
\n- Make the font size larger<\/li>\n\n\n\n
- Make the typography colors all higher contrast<\/li>\n\n\n\n
- Make the form border colors higher contrast<\/li>\n\n\n\n
- Design how tabbing would look for someone who uses tabs to navigate<\/li>\n\n\n\n
- Skip the last drop-down and write out all the alternatives as buttons<\/li>\n<\/ul>\n\n\n\n
Contrast checker <\/h4>\n\n\n\n
Checking color contrasts can be done with sites like Contrastchecker<\/a> or by downloading browser extensions.<\/p>\n\n\n\nBuy books to learn UI Design<\/h2>\n\n\n\n
If you want to learn more about UI design, I recommend the following books. <\/p>\n\n\n\n
Note! These are affiliate links, but my personal recommendations<\/em>.<\/p>\n\n\n\n\n- Designing Interfaces: Patterns for Effective Interaction Design<\/a><\/strong><\/li>\n\n\n\n
- UX\/UI Design: Introduction Guide to Intuitive Design and User-Friendly Experience<\/a><\/strong><\/li>\n\n\n\n
- Practical UI Patterns for Design Systems<\/strong><\/a><\/li>\n\n\n\n
- (Resource) Mobile UX\/UI Design Notebook: Mobile Wireframe Sketchpad<\/a><\/strong><\/li>\n<\/ol>\n\n\n\n
Read my article about the 4 best books for learning UX\/UI design for beginners ><\/a><\/p>\n\n\n\nMore UX & UI design articles<\/h2>\n\n\n\n
If you’re interested in reading more articles about UX & UI design you can check out my related posts:<\/p>\n\n\n\n
\n- UX\/UI Design Inspiration<\/a><\/li>\n\n\n\n
- UX & UI Project Guidelines<\/a><\/li>\n\n\n\n
- How to create modern & soft UI shadows<\/a><\/li>\n\n\n\n
- How to place your UI design in a mock-up (Photoshop tutorial)<\/a><\/li>\n\n\n\n
- Learn UX & UI Design: 4 books to read<\/a><\/li>\n\n\n\n
- Review on Affinity Designer for UI design<\/a><\/li>\n<\/ul>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
This article will teach you how to design good form UX\/UI design. On dribbble you can see that designers enjoy creating landing pages, dashboards, social media feeds, and other existing stuff for practice. Those things can look good by just adding pictures and gradients. I do that too. But… I also think that it’s important […]<\/p>\n","protected":false},"author":1,"featured_media":1480,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[166,6],"tags":[],"class_list":["post-1479","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-ux-and-ui-design","entry","has-media"],"gutentor_comment":6,"uagb_featured_image_src":{"full":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup.png",3140,2306,false],"thumbnail":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup-150x150.png",150,150,true],"medium":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup-300x220.png",300,220,true],"medium_large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup-768x564.png",768,564,true],"large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup-1024x752.png",1024,752,true],"1536x1536":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup.png",1536,1128,false],"2048x2048":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup.png",2048,1504,false],"ocean-thumb-m":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup.png",600,441,false],"ocean-thumb-ml":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup.png",613,450,false],"ocean-thumb-l":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup.png",953,700,false]},"uagb_author_info":{"display_name":"Wendy Zhou","author_link":"https:\/\/www.wendyzhou.se\/blog\/author\/wendy1111live-se\/"},"uagb_comment_info":6,"uagb_excerpt":"This article will teach you how to design good form UX\/UI design. On dribbble you can see that designers enjoy creating landing pages, dashboards, social media feeds, and other existing stuff for practice. Those things can look good by just adding pictures and gradients. I do that too. But… I also think that it’s important…","_links":{"self":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/1479","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=1479"}],"version-history":[{"count":28,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/1479\/revisions"}],"predecessor-version":[{"id":7929,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/1479\/revisions\/7929"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media\/1480"}],"wp:attachment":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media?parent=1479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/categories?post=1479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/tags?post=1479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Accessibility & Light mode version <\/h2>\n\n\n\n\nLight mode UI form design<\/figcaption><\/figure>\n\n\n\nDark mode UI form design<\/figcaption><\/figure>\n<\/figure>\n\n\n\nThe visual design of the dark mode UI was made to make it appear more cool and modern, and therefore I loosened some aspects of accessibility. <\/p>\n\n\n\n
But if this were to be implemented in a “real” life setting, the accessibility would be much more important. This is why I also created the design in a light mode and with more focus on accessibility. <\/p>\n\n\n\n
To improve the accessibility further<\/h4>\n\n\n\n
To make the accessibility even better I could do the following changes:<\/p>\n\n\n\n
\n- Make the font size larger<\/li>\n\n\n\n
- Make the typography colors all higher contrast<\/li>\n\n\n\n
- Make the form border colors higher contrast<\/li>\n\n\n\n
- Design how tabbing would look for someone who uses tabs to navigate<\/li>\n\n\n\n
- Skip the last drop-down and write out all the alternatives as buttons<\/li>\n<\/ul>\n\n\n\n
Contrast checker <\/h4>\n\n\n\n
Checking color contrasts can be done with sites like Contrastchecker<\/a> or by downloading browser extensions.<\/p>\n\n\n\nBuy books to learn UI Design<\/h2>\n\n\n\n
If you want to learn more about UI design, I recommend the following books. <\/p>\n\n\n\n
Note! These are affiliate links, but my personal recommendations<\/em>.<\/p>\n\n\n\n\n- Designing Interfaces: Patterns for Effective Interaction Design<\/a><\/strong><\/li>\n\n\n\n
- UX\/UI Design: Introduction Guide to Intuitive Design and User-Friendly Experience<\/a><\/strong><\/li>\n\n\n\n
- Practical UI Patterns for Design Systems<\/strong><\/a><\/li>\n\n\n\n
- (Resource) Mobile UX\/UI Design Notebook: Mobile Wireframe Sketchpad<\/a><\/strong><\/li>\n<\/ol>\n\n\n\n
Read my article about the 4 best books for learning UX\/UI design for beginners ><\/a><\/p>\n\n\n\nMore UX & UI design articles<\/h2>\n\n\n\n
If you’re interested in reading more articles about UX & UI design you can check out my related posts:<\/p>\n\n\n\n
\n- UX\/UI Design Inspiration<\/a><\/li>\n\n\n\n
- UX & UI Project Guidelines<\/a><\/li>\n\n\n\n
- How to create modern & soft UI shadows<\/a><\/li>\n\n\n\n
- How to place your UI design in a mock-up (Photoshop tutorial)<\/a><\/li>\n\n\n\n
- Learn UX & UI Design: 4 books to read<\/a><\/li>\n\n\n\n
- Review on Affinity Designer for UI design<\/a><\/li>\n<\/ul>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
This article will teach you how to design good form UX\/UI design. On dribbble you can see that designers enjoy creating landing pages, dashboards, social media feeds, and other existing stuff for practice. Those things can look good by just adding pictures and gradients. I do that too. But… I also think that it’s important […]<\/p>\n","protected":false},"author":1,"featured_media":1480,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[166,6],"tags":[],"class_list":["post-1479","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-ux-and-ui-design","entry","has-media"],"gutentor_comment":6,"uagb_featured_image_src":{"full":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup.png",3140,2306,false],"thumbnail":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup-150x150.png",150,150,true],"medium":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup-300x220.png",300,220,true],"medium_large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup-768x564.png",768,564,true],"large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup-1024x752.png",1024,752,true],"1536x1536":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup.png",1536,1128,false],"2048x2048":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup.png",2048,1504,false],"ocean-thumb-m":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup.png",600,441,false],"ocean-thumb-ml":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup.png",613,450,false],"ocean-thumb-l":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup.png",953,700,false]},"uagb_author_info":{"display_name":"Wendy Zhou","author_link":"https:\/\/www.wendyzhou.se\/blog\/author\/wendy1111live-se\/"},"uagb_comment_info":6,"uagb_excerpt":"This article will teach you how to design good form UX\/UI design. On dribbble you can see that designers enjoy creating landing pages, dashboards, social media feeds, and other existing stuff for practice. Those things can look good by just adding pictures and gradients. I do that too. But… I also think that it’s important…","_links":{"self":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/1479","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=1479"}],"version-history":[{"count":28,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/1479\/revisions"}],"predecessor-version":[{"id":7929,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/1479\/revisions\/7929"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media\/1480"}],"wp:attachment":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media?parent=1479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/categories?post=1479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/tags?post=1479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
The visual design of the dark mode UI was made to make it appear more cool and modern, and therefore I loosened some aspects of accessibility. <\/p>\n\n\n\n
But if this were to be implemented in a “real” life setting, the accessibility would be much more important. This is why I also created the design in a light mode and with more focus on accessibility. <\/p>\n\n\n\n
To improve the accessibility further<\/h4>\n\n\n\n
To make the accessibility even better I could do the following changes:<\/p>\n\n\n\n
- \n
- Make the font size larger<\/li>\n\n\n\n
- Make the typography colors all higher contrast<\/li>\n\n\n\n
- Make the form border colors higher contrast<\/li>\n\n\n\n
- Design how tabbing would look for someone who uses tabs to navigate<\/li>\n\n\n\n
- Skip the last drop-down and write out all the alternatives as buttons<\/li>\n<\/ul>\n\n\n\n
Contrast checker <\/h4>\n\n\n\n
Checking color contrasts can be done with sites like Contrastchecker<\/a> or by downloading browser extensions.<\/p>\n\n\n\n
Buy books to learn UI Design<\/h2>\n\n\n\n
If you want to learn more about UI design, I recommend the following books. <\/p>\n\n\n\n
Note! These are affiliate links, but my personal recommendations<\/em>.<\/p>\n\n\n\n
- \n
- Designing Interfaces: Patterns for Effective Interaction Design<\/a><\/strong><\/li>\n\n\n\n
- UX\/UI Design: Introduction Guide to Intuitive Design and User-Friendly Experience<\/a><\/strong><\/li>\n\n\n\n
- Practical UI Patterns for Design Systems<\/strong><\/a><\/li>\n\n\n\n
- (Resource) Mobile UX\/UI Design Notebook: Mobile Wireframe Sketchpad<\/a><\/strong><\/li>\n<\/ol>\n\n\n\n
Read my article about the 4 best books for learning UX\/UI design for beginners ><\/a><\/p>\n\n\n\n
More UX & UI design articles<\/h2>\n\n\n\n
If you’re interested in reading more articles about UX & UI design you can check out my related posts:<\/p>\n\n\n\n
- \n
- UX\/UI Design Inspiration<\/a><\/li>\n\n\n\n
- UX & UI Project Guidelines<\/a><\/li>\n\n\n\n
- How to create modern & soft UI shadows<\/a><\/li>\n\n\n\n
- How to place your UI design in a mock-up (Photoshop tutorial)<\/a><\/li>\n\n\n\n
- Learn UX & UI Design: 4 books to read<\/a><\/li>\n\n\n\n
- Review on Affinity Designer for UI design<\/a><\/li>\n<\/ul>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
This article will teach you how to design good form UX\/UI design. On dribbble you can see that designers enjoy creating landing pages, dashboards, social media feeds, and other existing stuff for practice. Those things can look good by just adding pictures and gradients. I do that too. But… I also think that it’s important […]<\/p>\n","protected":false},"author":1,"featured_media":1480,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[166,6],"tags":[],"class_list":["post-1479","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-ux-and-ui-design","entry","has-media"],"gutentor_comment":6,"uagb_featured_image_src":{"full":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup.png",3140,2306,false],"thumbnail":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup-150x150.png",150,150,true],"medium":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup-300x220.png",300,220,true],"medium_large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup-768x564.png",768,564,true],"large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup-1024x752.png",1024,752,true],"1536x1536":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup.png",1536,1128,false],"2048x2048":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup.png",2048,1504,false],"ocean-thumb-m":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup.png",600,441,false],"ocean-thumb-ml":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup.png",613,450,false],"ocean-thumb-l":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2019\/08\/Dark-Form-Mockup.png",953,700,false]},"uagb_author_info":{"display_name":"Wendy Zhou","author_link":"https:\/\/www.wendyzhou.se\/blog\/author\/wendy1111live-se\/"},"uagb_comment_info":6,"uagb_excerpt":"This article will teach you how to design good form UX\/UI design. On dribbble you can see that designers enjoy creating landing pages, dashboards, social media feeds, and other existing stuff for practice. Those things can look good by just adding pictures and gradients. I do that too. But… I also think that it’s important…","_links":{"self":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/1479","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=1479"}],"version-history":[{"count":28,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/1479\/revisions"}],"predecessor-version":[{"id":7929,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/1479\/revisions\/7929"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media\/1480"}],"wp:attachment":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media?parent=1479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/categories?post=1479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/tags?post=1479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- UX & UI Project Guidelines<\/a><\/li>\n\n\n\n
- UX\/UI Design: Introduction Guide to Intuitive Design and User-Friendly Experience<\/a><\/strong><\/li>\n\n\n\n
- Designing Interfaces: Patterns for Effective Interaction Design<\/a><\/strong><\/li>\n\n\n\n