# UI Design Principles & Tips

## Psychology Principles for UI Design

Psychology plays a big part in a user’s experience with an application. By understanding how our designs are *perceived*, we can make adjustments so that the apps we create are more effective in achieving the goals of the user. ([Source: Thanasis Rigopoulos](https://uxplanet.org/the-psychology-principles-every-ui-ux-designer-needs-to-know-24116fd65778)) 

This first section of articles will give you the foundations on which many UI design principles and patterns have been made. 

{% embed url="<https://uxplanet.org/the-psychology-principles-every-ui-ux-designer-needs-to-know-24116fd65778>" %}

{% embed url="<https://uxdesign.cc/8-ux-surefire-ways-to-design-for-trust-7d3720b57a4c>" %}

{% embed url="<https://www.nngroup.com/articles/recognition-and-recall/?utm_campaign=Cognitive%2BUXD&utm_medium=web&utm_source=Cognitive_UXD_14>" %}

{% embed url="<https://www.webdesignerdepot.com/2018/02/how-gamification-improves-ux/?ref=webdesignernews.com>" %}

{% embed url="<https://uxdesign.cc/scarcity-in-ux-the-psychological-bias-that-became-the-norm-3e666b749a9a>" %}

{% embed url="<https://www.webdesignerdepot.com/2019/01/respectful-ux-5-ways-to-make-users-feel-valued/?ref=webdesignernews.com>" %}

{% embed url="<https://infinum.com/the-capsized-eight/dark-patterns-designs-that-pull-evil-tricks-on-our-brains?ref=webdesignernews.com>" %}

{% embed url="<https://blog.convert.com/effective-persuasion-hacks.html>" %}

{% embed url="<https://uxdesign.cc/how-uber-chrome-and-netflix-made-advantage-of-the-psychology-of-idleness-aversion-a963cf3f2a6d>" %}

{% embed url="<https://uxplanet.org/how-to-influence-choice-through-default-options-50e59152dc1a>" %}

{% embed url="<https://uxdesign.cc/ux-strategies-to-guide-users-through-a-complicated-journey-6b945b61eadd>" %}

{% embed url="<https://medium.muz.li/gamification-in-ux-design-designing-fun-experiences-for-serious-situations-5a55e2d6a730>" %}

## A Deep Dive into UI Design Principles

Before starting any UI design process it is always good to get yourself familiarized with the principles of UI design. With the articles below you will be able to give yourself a quick crash-course on the most important UI design principles and learn how to become a better UI designer.

### Getting Started&#x20;

While these are different for everyone there are a set of commonly followed rules such as the law of proximity, hicks law, and more which are essential to improving your interface's usability.&#x20;

{% embed url="<https://lawsofux.com/>" %}

{% embed url="<https://blog.prototypr.io/product-design-principles-in-a-single-card-2f6023419a87>" %}

{% embed url="<https://medium.muz.li/design-principles-behind-great-products-6ef13cd74ccf>" %}

{% embed url="<https://uxplanet.org/a-primer-to-web-accessibility-for-designers-2c548448c612>" %}

{% embed url="<https://www.microsoft.com/design/inclusive/>" %}

### Customization & Personalization

Today just making an app which can perform a task is not enough. We live in an age of both customization & personalization where we need to cater tailored user experiences for each user. Hence it is important to learn how you can integrate customization & personalization into your UI with these design principles highlighted in the articles below.

{% embed url="<https://uxplanet.org/the-difference-between-customization-and-personalization-624ddd70b163>" %}

{% embed url="<https://alistapart.com/article/emerging-ux-role-in-personalization/>" %}

{% embed url="<https://www.smashingmagazine.com/2019/04/privacy-ux-aware-design-framework/?ref=webdesignernews.com>" %}

### More

{% embed url="<https://www.smashingmagazine.com/2018/01/friction-ux-design-tool/>" %}

{% embed url="<https://uxplanet.org/best-practices-for-minimalist-design-7af4a9b61ad7>" %}

{% embed url="<https://blog.prototypr.io/ux-best-practices-part-3-interactions-driving-connections-1623d41c4f62>" %}

{% embed url="<https://uxplanet.org/ux-design-glossary-how-to-use-affordances-in-user-interfaces-393c8e9686e4>" %}

{% embed url="<https://uxplanet.org/designing-a-vui-voice-user-interface-c0b3b9b57ace>" %}

{% embed url="<https://onezero.medium.com/the-ui-ux-patterns-you-literally-cant-use-64875a5c965f>" %}

## Improve your UI Design

Designing your UI can be the most crucial step to ensuring your product is usable and that people don't abandon it. In the articles below you will learn the best industry practices which you can immediately start applying to your project.

### Web Design

#### Quick Fixes

{% embed url="<https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886>" %}

{% embed url="<https://uxplanet.org/how-to-ux-your-website-in-6-steps-555977ffce6a>" %}

{% embed url="<https://uxdesign.cc/9-simple-tips-to-improve-your-ui-designs-fast-377c5113ac82>" %}

{% embed url="<https://twitter.com/i/events/880688233641848832?lang=en>" %}

{% embed url="<https://uxdesign.cc/how-to-improve-your-product-ui-designers-checklist-58510947e6ab>" %}

{% embed url="<https://uxplanet.org/creating-a-ux-design-style-guide-for-your-team-e756210865a4>" %}

#### Reading Patterns

{% embed url="<https://uxplanet.org/f-shaped-pattern-for-reading-content-80af79cd3394>" %}

{% embed url="<https://uxplanet.org/z-shaped-pattern-for-reading-web-content-ce1135f92f1c>" %}

{% embed url="<https://www.nngroup.com/articles/zigzag-page-layout/>" %}

{% embed url="<https://blog.prototypr.io/the-f-shaped-pattern-is-not-alone-understanding-how-people-scan-content-32a4cb533a0c>" %}

{% embed url="<https://www.nngroup.com/articles/horizontal-attention-leans-left/>" %}

#### Web Layouts

{% embed url="<https://uxplanet.org/bidirectional-scrolling-is-here-to-save-responsive-design-be1afe53206d>" %}

{% embed url="<https://www.uxpin.com/studio/blog/web-layout-best-practices-12-timeless-ui-patterns-explained/>" %}

{% embed url="<https://www.arun.is/blog/10-year-challenge/>" %}

{% embed url="<https://uxdesign.cc/digging-deep-in-layout-grids-in-mobile-app-design-ef07ace5b291>" %}

#### Improving Hero Pages

{% embed url="<https://uxplanet.org/best-practices-for-hero-images-eeb234b664d6>" %}

{% embed url="<https://www.nngroup.com/articles/page-fold-manifesto/>" %}

{% embed url="<https://www.nngroup.com/articles/get-started/>" %}

#### Common Web Design Mistakes

{% embed url="<https://www.nngroup.com/articles/top-10-enduring/>" %}

{% embed url="<https://www.nngroup.com/articles/centered-logos/>" %}

{% embed url="<https://www.nngroup.com/articles/duplicate-links/>" %}

{% embed url="<https://www.nngroup.com/articles/low-contrast/>" %}

{% embed url="<https://www.nngroup.com/articles/text-over-images/>" %}

{% embed url="<https://uxplanet.org/13-tips-for-improving-landing-page-design-849801372da4>" %}

{% embed url="<https://medium.com/swlh/the-principles-of-dark-ui-design-2d0e6c98487e>" %}

### Mobile App Design

#### Tips & Tricks

{% embed url="<https://medium.com/sketch-app-sources/design-cheatsheet-274384775da9>" %}

{% embed url="<https://uxplanet.org/30-things-we-often-forget-when-designing-mobile-apps-ae30cc3b2c6b>" %}

{% embed url="<https://medium.muz.li/5-tips-for-designing-a-great-mobile-app-4567f04c9f2f>" %}

{% embed url="<https://medium.muz.li/11-things-every-designer-needs-to-know-about-mobile-app-interaction-a22c635527b3>" %}

{% embed url="<https://medium.com/@rickypellegrini/top-5-easy-mistakes-to-avoid-in-your-mobile-app-72a9796227c4>" %}

{% embed url="<https://uxplanet.org/mobile-motion-20-creative-concepts-of-ui-animation-b7c0f550a754>" %}

{% embed url="<https://developer.apple.com/design/tips/>" %}

#### Mobile Navigation

{% embed url="<https://uxplanet.org/3-creative-concepts-of-mobile-tab-bar-navigation-86ec7e3b11ab>" %}

{% embed url="<https://medium.com/tall-west/lets-ditch-the-nav-bar-3692cb17cc67>" %}

{% embed url="<https://uxmovement.com/mobile/how-to-prevent-users-from-mistapping-icons/>" %}

{% embed url="<https://uxplanet.org/12-mobile-ux-design-trends-for-2018-5b4ce7e8445f>" %}

### Dashboard Design

{% embed url="<https://thenextweb.com/syndication/2020/05/24/a-designers-guide-to-creating-effective-dashboards/?ref=webdesignernews.com>" %}

{% embed url="<https://rahulgulati.com/designing-a-usable-dashboard-896f50636841>" %}

{% embed url="<https://uxdesign.cc/designing-charts-principles-every-designer-should-know-5bd3969a0150>" %}

{% embed url="<https://uxplanet.org/10-rules-for-better-dashboard-design-ef68189d734c>" %}

{% embed url="<https://www.nngroup.com/articles/dashboards-preattentive/>" %}

{% embed url="<https://search.muz.li/inspiration/dashboard-inspiration/>" %}

{% embed url="<https://uxdesign.cc/colouring-data-visualizations-89c69e21ce20>" %}

{% embed url="<https://uxplanet.org/10-tips-for-better-financial-ux-design-564fd360f8b4>" %}

{% embed url="<https://taras-bakusevych.medium.com/data-tables-design-3c705b106a64>" %}

{% embed url="<https://divamithoughts.medium.com/importance-of-getting-ux-design-right-for-b2b-saas-app-25ef8cc4fd0>" %}

### Search Boxes & Search Results

{% embed url="<https://uxplanet.org/design-a-perfect-search-box-b6baaf9599c>" %}

{% embed url="<https://uxdesign.cc/how-to-design-search-bars-6d4ca9944ad3>" %}

{% embed url="<https://uxplanet.org/best-practices-for-search-results-1bbed9d7a311>" %}

{% embed url="<https://uxplanet.org/34-ux-search-guidelines-for-ecommerce-35d50f33dff9>" %}

### Forms

{% embed url="<https://uxdesign.cc/design-better-forms-96fadca0f49c>" %}

{% embed url="<https://uxplanet.org/10-rules-for-efficient-form-design-e13dc1fb0e03>" %}

{% embed url="<https://uxplanet.org/mobile-form-usability-2279f672917d>" %}

{% embed url="<https://medium.com/commonux/how-to-design-a-form-wizard-b85fe1cc665a>" %}

{% embed url="<https://baymard.com/blog/avoid-multi-column-forms>" %}

{% embed url="<https://uxmovement.com/forms/the-best-place-for-error-messages-on-forms/?ref=webdesignernews.com>" %}

{% embed url="<https://uxmovement.com/forms/improve-your-sign-up-form-with-off-white-text-fields/>" %}

{% embed url="<https://webdesign.tutsplus.com/articles/accessibility-in-form-design--cms-33093?ref=webdesignernews.com>" %}

{% embed url="<https://uxplanet.org/the-anatomy-of-input-field-c3ef863e01d7>" %}

{% embed url="<https://uxdesign.cc/7-tips-for-dropdown-menu-design-da86d548584c>" %}

{% embed url="<https://uxdesign.cc/selection-controls-ui-component-series-3badc0bdb546>" %}

{% embed url="<https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0>" %}

### Navigation Menus

{% embed url="<https://www.uxbooth.com/articles/the-rules-for-modern-navigation/>" %}

{% embed url="<https://blog.prototypr.io/ux-design-for-navigation-menus-d9875c91a7ea>" %}

{% embed url="<https://blog.prototypr.io/an-alternate-approach-to-menu-systems-for-a-better-ux-5131be448c6f>" %}

{% embed url="<https://uxplanet.org/redesigning-the-bottom-navigation-for-2020-d332ee487ddb>" %}

{% embed url="<https://uxdesign.cc/death-by-hamburger-2d1db115352a>" %}

{% embed url="<https://jamesarcher.me/hamburger-menu>" %}

{% embed url="<https://www.webdesignerdepot.com/2017/08/5-smart-alternatives-to-the-hamburger-menu/>" %}

{% embed url="<https://uxdesign.cc/top-navigation-vs-side-navigation-wich-one-is-better-24aa5d835643>" %}

### Buttons

{% embed url="<https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4>" %}

{% embed url="<https://medium.muz.li/ok-key-and-cancel-key-which-one-should-be-set-up-on-the-left-4780e86c16eb>" %}

{% embed url="<https://medium.com/@uxmovement/how-to-design-destructive-actions-that-prevent-data-loss-f0b0f51448b>" %}

{% embed url="<https://www.leadpages.net/blog/leadpages-pro-tip-cta-buttons-that-convert/>" %}

{% embed url="<https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7>" %}

### Onboarding

{% embed url="<https://uxplanet.org/how-to-excel-at-designing-a-great-user-onboarding-experience-b87129485529>" %}

{% embed url="<https://infinum.co/the-capsized-eight/five-ways-to-design-the-perfect-onboarding-experience?ref=webdesignernews.com>" %}

{% embed url="<https://uxplanet.org/design-of-onboarding-tutorial-greet-inform-engage-55c36c9b4999>" %}

{% embed url="<https://uxplanet.org/best-practices-for-onboarding-92f3a9f0b21a>" %}

{% embed url="<https://uxplanet.org/little-big-details-for-your-mobile-app-6ec1ca615abc>" %}

{% embed url="<https://uxdesign.cc/how-a-nightclub-saved-my-onboarding-design-f90a8e6daae>" %}

{% embed url="<https://uxplanet.org/10-case-studies-that-show-how-an-applications-new-icon-increased-downloads-e9fbc5691c4d>" %}

{% embed url="<https://uxplanet.org/4-mobile-app-onboarding-flows-i-am-in-love-with-20e89eebc1f4>" %}

{% embed url="<https://blog.hiri.com/a-novel-approach-to-onboarding-4a6c952a3e62?ref=webdesignernews.com>" %}

{% embed url="<https://up.com.au/blog/designing-a-super-powered-welcome-pack-experience/?ref=webdesignernews.com>" %}

{% embed url="<https://uxplanet.org/the-power-of-defaults-992d50b73968>" %}

{% embed url="<https://blog.usejournal.com/5-product-marketing-tips-to-help-your-startup-cross-the-chasm-97e64583fd71>" %}

{% embed url="<https://www.freecodecamp.org/news/how-we-updated-our-onboarding-experience-and-got-more-users-b0cd353677d6/>" %}

## Also Explore

{% content-ref url="/pages/-Lvzc3xXsMczPmyS\_3Rd" %}
[UI Patterns & Inspiration](/explore/ui-design/ui-patterns-and-inspiration.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LwCZW-iTirRRWhrzf59" %}
[UI Kits](/more/free-resources/ui-kits.md)
{% endcontent-ref %}

![](/files/-LyTzMN_2df8kzPj8tGD)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.uxlibrary.org/explore/ui-design/articles/ui-design.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.