LogoLogo
  • 👋Welcome to UX Library
  • 🎁Beginners UX Design Kit
  • EXPLORE
    • 💡The UX Process
      • 📚Books
      • 📃Articles
      • ⚡Activites
      • ⚙️Processes
    • 🔬UX Research
      • 📚Books
      • 📃Articles
      • 🖥️Software
      • 📇Templates
    • 🗂️Information Architecture & Content Strategy
      • 📚Books
      • 📃Articles
      • 🖥️Software
    • 🖍️UI Design
      • 📚Books
      • 📃Articles
        • Sketching & Whiteboarding
        • Color, Typography, & Icons
        • UI Design Principles & Tips
        • Design Systems
      • 🖥️Software
      • 🍂UI Patterns & Inspiration
      • 🛍️Free UI Resources
    • ✍️UX Writing
      • 📚Books
      • 📃Articles
      • 🖥️Software
  • MORE
    • 👔Job Hunting
    • 📺Design Courses
    • 🛍️Free Resources
      • 📱UI Kits
      • 🆎Fonts
      • 🖼️Photos
      • 🏠Icons
      • 🎄Illustrations
    • 🎙️Podcasts
    • 👪Facebook Groups
    • 📖Books & Blogs
    • 🚀About Us & Feedback
Powered by GitBook
On this page
  • Psychology Principles for UI Design
  • A Deep Dive into UI Design Principles
  • Getting Started
  • Customization & Personalization
  • More
  • Improve your UI Design
  • Web Design
  • Mobile App Design
  • Dashboard Design
  • Search Boxes & Search Results
  • Forms
  • Navigation Menus
  • Buttons
  • Onboarding
  • Also Explore

Was this helpful?

  1. EXPLORE
  2. UI Design
  3. Articles

UI Design Principles & Tips

Learn more about UI design with our curated articles.

PreviousColor, Typography, & IconsNextDesign Systems

Last updated 4 years ago

Was this helpful?

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. ()

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

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

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.

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.

More

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

Reading Patterns

Web Layouts

Improving Hero Pages

Common Web Design Mistakes

Mobile App Design

Tips & Tricks

Mobile Navigation

Dashboard Design

Search Boxes & Search Results

Forms

Navigation Menus

Buttons

Onboarding

Also Explore

🖍️
📃
🍂UI Patterns & Inspiration
📱UI Kits
Source: Thanasis Rigopoulos
https://uxplanet.org/the-psychology-principles-every-ui-ux-designer-needs-to-know-24116fd65778uxplanet.org
8 UX Surefire Ways to Design for TrustMedium
Memory Recognition and Recall in User InterfacesNielsen Norman Group
How Gamification Improves UXWebdesigner Depot
Scarcity in UX: The psychological bias that became the normMedium
Respectful UX: 5 Ways to Make Users Feel ValuedWebdesigner Depot
Logo
Dark Patterns Designs That Pull Evil Tricks on Our Brainsinfinum
The Top Three Cognitive Biases Booking.com Uses (and You Should Too)A/B Testing Software
Logo
How Uber, Chrome, and Netflix take advantage of the idleness aversion?Medium
How to Influence Choice Through Default OptionsMedium
UX strategies to guide users through a complicated journeyMedium
Gamification in UX Design: Designing Fun Experiences for Serious SituationsMedium
Home | Laws of UXLaws of UX
Product Design Principles in a Single CardMedium
Design Principles Behind Great ProductsMedium
https://uxplanet.org/a-primer-to-web-accessibility-for-designers-2c548448c612uxplanet.org
Microsoft Designmicrosoft-design
https://uxplanet.org/ux-design-glossary-how-to-use-affordances-in-user-interfaces-393c8e9686e4uxplanet.org
The Difference Between Customization and PersonalizationMedium
UX in the Age of PersonalizationA List Apart
Privacy UX: Privacy-Aware Design Framework — Smashing MagazineSmashing Magazine
Designing Friction For A Better User Experience — Smashing MagazineSmashing Magazine
Best Practices for Minimalist DesignMedium
UX Best Practices (Part 3): Interactions driving connectionsMedium
Designing a VUI — Voice User InterfaceMedium
The UI/UX Patterns You Literally Can’t UseMedium
7 Practical Tips for Cheating at DesignMedium
How to UX your website in 6 stepsMedium
9 tips to quickly improve your UI designsMedium
Little UI DetailsTwitter
Logo
Logo
A checklist to improve your product UIMedium
Creating a UX design style guide for your teamMedium
F-Shaped Pattern for Reading ContentMedium
https://uxplanet.org/z-shaped-pattern-for-reading-web-content-ce1135f92f1cuxplanet.org
Zigzag Image–Text Layouts Make Scanning Less EfficientNielsen Norman Group
Logo
https://blog.prototypr.io/the-f-shaped-pattern-is-not-alone-understanding-how-people-scan-content-32a4cb533a0cblog.prototypr.io
Horizontal Attention Leans LeftNielsen Norman Group
Logo
Bidirectional Scrolling is here to save Responsive DesignMedium
12 Timeless UI Layouts & Website Design Patterns AnalyzedStudio by UXPin
Logo
10 Year Challenge: How Popular Websites Have Changedzhenpixels
https://uxdesign.cc/digging-deep-in-layout-grids-in-mobile-app-design-ef07ace5b291uxdesign.cc
Best Practices for Hero ImagesMedium
The Fold Manifesto: Why the Page Fold Still MattersNielsen Norman Group
Logo
"Get Started" Stops UsersNielsen Norman Group
Top 10 Enduring Web-Design MistakesNielsen Norman Group
Logo
Logo
Centered Logos Hurt Website NavigationNielsen Norman Group
Logo
The Same Link Twice on the Same Page: Do Duplicates Help or Hurt?Nielsen Norman Group
Logo
Low-Contrast Text Is Not the AnswerNielsen Norman Group
Logo
Ensure High Contrast for Text Over ImagesNielsen Norman Group
Logo
https://uxplanet.org/13-tips-for-improving-landing-page-design-849801372da4uxplanet.org
The Principles of Dark UI DesignMedium
10 cheat codes for designing User InterfacesMedium
30 Things We Often Forget When Designing Mobile AppsMedium
5 Tips for designing a great mobile appMedium
https://medium.muz.li/11-things-every-designer-needs-to-know-about-mobile-app-interaction-a22c635527b3medium.muz.li
Top 5 Easy Mistakes to Avoid in Your Mobile AppMedium
https://uxplanet.org/mobile-motion-20-creative-concepts-of-ui-animation-b7c0f550a754uxplanet.org
UI Design Dos and Don’ts - Apple Developer
Logo
3 Creative Concepts of Mobile Tab Bar NavigationMedium
All Thumbs, Why Reach Navigation Should Replace the Navbar in iOS DesignMedium
How to Prevent Users from Mistapping IconsUX Movement
12 Mobile UX Design Trends For 2018Medium
A designer’s guide to creating effective dashboardsTNW | Syndication
Designing a Usable DashboardMedium
https://uxdesign.cc/designing-charts-principles-every-designer-should-know-5bd3969a0150uxdesign.cc
https://uxplanet.org/10-rules-for-better-dashboard-design-ef68189d734cuxplanet.org
Dashboards: Making Charts and Graphs Easier to UnderstandNielsen Norman Group
Logo
500+ Dashboards, admin panels &apm; analytics design inspiration, ideas and examples - MuzliMuzli
Colouring data visualizationsMedium
10 tips for better Financial UX DesignMedium
Data Tables DesignMedium
Importance of Getting UX Design Right for B2B SaaS AppMedium
https://uxplanet.org/design-a-perfect-search-box-b6baaf9599cuxplanet.org
How to design: accessible search barsMedium
Best Practices for Search ResultsMedium
34 UX Guidelines for Search Box and Results PageMedium
Design Better FormsMedium
https://uxplanet.org/10-rules-for-efficient-form-design-e13dc1fb0e03uxplanet.org
Mobile Form UsabilityMedium
How to Design a Form WizardMedium
Form Field Usability: Avoid Multi-Column Layouts (13% Make This Form Usability Mistake) – Articles – Baymard InstituteBaymard Institute
The Best Place for Error Messages on FormsUX Movement
Improve Your Sign-Up Form with Off-White Text FieldsUX Movement
6 Tips for Accessibility in Form DesignWeb Design Envato Tuts+
https://uxplanet.org/the-anatomy-of-input-field-c3ef863e01d7uxplanet.org
https://uxdesign.cc/7-tips-for-dropdown-menu-design-da86d548584cuxdesign.cc
https://uxdesign.cc/selection-controls-ui-component-series-3badc0bdb546uxdesign.cc
https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0uxdesign.cc
The Rules for Modern Navigation | UX BoothUX Booth
Logo
https://blog.prototypr.io/ux-design-for-navigation-menus-d9875c91a7eablog.prototypr.io
An alternate approach to menu systems for a better UXMedium
Redesigning the bottom navigation for 2020Medium
Death by HamburgerMedium
The hamburger menu doesn't workjamesarcher
5 Smart Alternatives to the Hamburger MenuWebdesigner Depot
https://uxdesign.cc/top-navigation-vs-side-navigation-wich-one-is-better-24aa5d835643uxdesign.cc
https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4uxplanet.org
“Ok-Key” and “Cancel-Key”, Which One Should Be Set Up on the Left?Medium
How to Design Destructive Actions That Prevent Data LossMedium
The Ultimate Guide to Call to Action ButtonsLeadpages Blog
Logo
https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7uxdesign.cc
How to excel at designing a great user onboarding experienceMedium
Five Ways to Design the Perfect Onboarding Experienceinfinum
Design of Onboarding Tutorial: Greet, Inform, Engage.Medium
https://uxplanet.org/best-practices-for-onboarding-92f3a9f0b21auxplanet.org
Little Big Details For Your Mobile AppMedium
How a nightclub saved my onboarding designMedium
10 case studies that show how an application’s new icon increased downloadsMedium
4 Mobile App Onboarding Flows I am in Love WithMedium
A novel approach to onboardingMedium
Designing a Super Powered Welcome ExperienceUp - Upgrade your banking
Logo
The Power of DefaultsMedium
5 product marketing tips to help your startup cross the chasmMedium
How we updated our onboarding experience and got more usersfreeCodeCamp.org
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo