1 2 3 4 Change Plan $5 Infinite SMS 2GB Data/Day Untill 28 February Unlimited calls Bali Bali is part of the Coral Triangle, the area with the highest... 4.0 (98) Explore More Start PRO 50 projects Shareable files 2 editors $120/m $300/m Get This Plan Get This Plan ₹21,900 Add to Cart Dos Don’ts & Present your Design like a Professional with these 50 well-known User Interface Design Tips. For UI Design. Free Edition ixsel A c a d e m y 28. Add Contrast with Overlay 29. Gradient Tip 30. Onboarding Tip 31. Make CTA Stand Out 32. Cut off Verbs in Label 33. Button Hierarchy 34. One Typeface is Good 35. Improve Onboarding Experience 36. Make Your Cards Look Clickable 37. Highlight The Best Plan 38. Avoid Too Wide Lines 39. Hick’s Law 40. Serial Positioning Effect 41. Use Input Masks 42. 2 to 4 Option Rule 43. Avoid Writing When Possible 44. Spacing is the Key 45. Logo Repetition 46. Border Radius 47. Avoid using Scroll 48. Use Swipe Actions 49. Icon Selection 50. Using Right Words 51. Enhancing Clickable Area 52. The Gutenberg Principle 53. Prompt User to Scroll 4. Human-like Language 5. Limit Saturation 6. Making 2 Color Palettes 7. Horizontal Alignment 8. Menu Representation 9. Breaking Up Content 10. Icon Consistency 11. Descriptive Options 12. Process Bar 13. Tooltips & Guides 14. CTA - Fitt’s Law 15. Color Psychology 16. Fewer Font Sizes 17. Single Column Form 18. Avoid Pure Black 19. Social Media Login First 20. Text Alignment 21. Checklist Vs Radio Button 22. Selection Color 23. Space the Sections 24. Different Shades For Layers 25. Padding & Margin 26. Pattern Repetition 27. Search Input pixselacademy Use language to connect labels and values. human-like Dos & Don’ts For UI Design 04 Human-like Language Tip - 1 Avoid using Robotic language, this will make user confused. APPLE Airpods Pro APPLE Airpods Pro ₹21,900 ₹21,900 with MagSafe Charging Case Bluetooth Headset with MagSafe Charging Case Bluetooth Headset In stock: 7 Cart Only left in stock! 7 Add to Cart Button Button pixselacademy Limit Saturation Tip - 2 Title Title Adding elements with high saturation will damage the contrast ofyour dark UI. Avoid going beyond of tone level when using colors. 200 - 500 Dos & Don’ts For UI Design 05 pixselacademy Most of the people prefer light theme. So, make a different color palette with darker shades. 06 Making 2 Color Palettes Tip - 3 Avoid using same color palettes for both Dark and Light mode. Dos & Don’ts For UI Design pixselacademy Using alignment make user’s orient much better and faster in forms. horizontal Horizontal Alignment Tip - 4 Inconsistent alignment looks very unprofessional and hard to follow. Name Name Email Email Contact Contact Submit Submit Dos & Don’ts For UI Design 07 pixselacademy Use + representation to create rational and emotional impact. Icon Label Menu Representation Tip - 5 Avoid using only labels for complex or abstract functions. New Tab New Tab New Incognito New Incognito Recent Tabs Recent Tabs Downloads Downloads History History Bookmark Bookmark Dos & Don’ts For UI Design 08 pixselacademy Property Feature Breaking Up Content Beautiful Waterfront Location Fast check-in experience Free secure parking PROPERTY FEATURES Beautiful waterfront location. 98% of recent guests gave this location a 5- star review. Fast check-in experience. 95% of recent guests gave the check-in experience a 5-star review. Free secure parking. This property features a single lock-up garage with storage. 98% of recent guests gave this location a 5-star review. 95% of recent guests gave the check- in experience a 5-star review. This property features a single lock- up garage with storage. Tip - 6 Allow people to quickly scan content by using and descriptive headings icons Avoid using only text for showing important features. Dos & Don’ts For UI Design 09 pixselacademy Use a consistent icon set for better communication among the users. Icon Consistency Tip - 7 Inconsistent icons could create a risk of confusion and can hurt brand’s visual credibility. Icons Icons See our Icons collections: See our Icons collections: A B C Dos & Don’ts For UI Design 10 pixselacademy Having options with clear description helps the users to take decision as per his/her choice. Descriptive Options Tip - 8 This is an example of bad UX. It creates confusion for users to select an option. Discard draft Discard draft Are you sure you want to cancel your upload? Are you sure you want to cancel your upload? Cancel Don’t Cancel OK Yes, Cancel Dos & Don’ts For UI Design 11 pixselacademy Use a to indicate the user’s status in the process flow. process bar Process Bar Payment Shipping Detals Payment Card Card Tip - 9 Here user won’t be able to track their process in the flow. Card Number: Card Number: Cardholder Name: Cardholder Name: Expires on: Expires on: CVV: CVV: Pay Now Pay Now 3 2 Dos & Don’ts For UI Design 12 pixselacademy Show the user and the error occurred. This help users to do the necessary changes. where why Tooltips & Guides Here users will find it difficult to locate the error and the reason for the same. Tip - 10 Cancel Cancel Login Login Username: Username: pixselacademy pixselacademy ********* ********* Password: Password: Username not valid! 1 error found Dos & Don’ts For UI Design 13 pixselacademy Fitt’s Law Tip - 11 Keep main CTA and . This will help users to identify easily. big closer to the thumb Small and Distanced CTAwill acquire more time for users to take action. Dos & Don’ts For UI Design 14 Are you sure you want to delete your account? Cancel Yes, Delete pixselacademy Color Psychology Tip - 12 Blue color for destructive action looks normal. Red color for destructive action alerts the users and act as a warning sign. Delete Account Delete Account Are you sure you want to delete your account? Cancel Yes, Delete Dos & Don’ts For UI Design 15 pixselacademy Try to differentiate the font only between sections and actions. 16 Sign in Email: 16 12 32 Enter your email Enter your password Password: Fewer Font Sizes Tip - 13 The more font sizes, the longer it takes to process the form. Sign in Email: 12 32 Enter your email Enter your password Password: Dos & Don’ts For UI Design pixselacademy Use a on small forms, or group them on other cases. single column Single Column Form Tip - 14 Multiple columns disrupt a user’s vertical momentum. Dos & Don’ts For UI Design 17 pixselacademy Avoid pure black using instead, you can use variation like this. Avoid Pure Black Tip - 15 Pure black or white can cause uneasiness in user’s eyes. Black Dark Grey #000000 #333335 Dos & Don’ts For UI Design 18 pixselacademy Using help the user to see it first and help to log in without filling the registration form. social media login first Don’t,have an account? Create here Don’t,have an account? Create here or log In with or log In with Password Username Social Media Login First Log In Log In Facebook Facebook Log In Tip - 16 Avoid using registration form before social media login option. Password Username Log In Dos & Don’ts For UI Design 19 pixselacademy Aligning text is an easy way to your design and make content clean up easy to read Beautiful Waterfront Location Fast check-in experience Free secure parking 98% of recent guests gave this location a 5-star review. 95% of recent guests gave the check- in experience a 5-star review. This property features a single lock- up garage with storage Beautiful Waterfront Location Fast check-in experience Free secure parking 98% of recent guests gave this location a 5-star review. 95% of recent guests gave the check- in experience a 5-star review. This property features a single lock- up garage with storage Text Alignment Tip - 17 Unaligned text creates difficulty for users to scan the content. Dos & Don’ts For UI Design 20 pixselacademy Whereas, Radio buttons are use for single choice selections. Checklist Vs Radio Button Tip - 18 Checklist is use for multiple choice selections. What are your favourite skills? What are your favourite skills? Programming Python Design Java Videography Ruby Photography JavaScript Marketing Swift Dos & Don’ts For UI Design 21