--- title: Medium | daily.dev description: A practical guide covering 14 foundational UX and visual design principles with real-world product examples. Topics include visual hierarchy, contrast,... canonical: https://daily.dev/posts/medium-lxc8jrsqz twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Medium | daily.dev og:description: A practical guide covering 14 foundational UX and visual design principles with real-world product examples. Topics include visual hierarchy, contrast,... og:url: https://daily.dev/posts/medium-lxc8jrsqz og:image: https://api.daily.dev/og/posts/LXc8JrSqZ.png og:image:alt: Medium og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Medium **[Medium](https://daily.dev/sources/medium_js)** · 11 min read · 0 upvotes · 0 comments ## Summary A practical guide covering 14 foundational UX and visual design principles with real-world product examples. Topics include visual hierarchy, contrast, alignment, proximity, repetition, balance, white space, affordance and signifiers, feedback, Fitts's Law, Hick's Law, Gestalt principles, color theory, and typography. Each principle includes concrete examples from products like Google, Stripe, Figma, Slack, and GitHub, along with actionable checklists for applying them in interface design. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What is Fitts's Law in UX design? Fitts's Law predicts that larger and nearer targets are faster and easier for users to reach and interact with. It matters most for mobile interfaces, frequently used actions, and touch controls. Practical applications include making frequent actions large enough to tap easily, placing related controls near the user's current focus, and keeping the clickable area larger than the visible icon. _daily.dev surfaces interaction-design fundamentals for designers refining touch and click targets._ ### What is the 60-30-10 rule for color in UI design? The 60-30-10 rule is a starting framework for distributing color in an interface: 60% dominant color for backgrounds and foundational surfaces, 30% supporting color for panels, navigation, and secondary structure, and 10% accent color for key actions, highlights, and important states. It is a guideline rather than a strict mathematical requirement, meant to keep color purposeful rather than decorative. _Designers balancing brand color with usability can track guidelines like this on daily.dev._ ### What are the four levels of feedback an interface should give users? An interface should give feedback at four levels: acknowledgement (the system received the action), progress (work is continuing), result (the operation succeeded, failed, or changed something), and recovery (the user can cancel, retry, undo, or correct the outcome). Without these signals, users may repeat actions, wait unnecessarily, or assume the product is broken. _daily.dev helps developers and designers building interactive UI keep feedback-pattern know-how close at hand._ ## Similar posts on daily.dev - [10 design psychology principles every UI/UX designer should know](https://daily.dev/posts/10-design-psychology-principles-every-ui-ux-designer-should-know-ilhgwkkue) · Medium · 14 upvotes · 0 comments - [Essential GUI design principles for creating intuitive interfaces](https://daily.dev/posts/essential-gui-design-principles-for-creating-intuitive-interfaces-alrqp02bo) · LogRocket · 0 upvotes · 0 comments - [The 5 UI fundamentals a developer must know](https://daily.dev/posts/the-5-ui-fundamentals-a-developer-must-know-otrjjrpdi) · The Miners · 195 upvotes · 4 comments - [How to Apply Academic Theories to Human-Centered Web Design \[Full Handbook](https://daily.dev/posts/how-to-apply-academic-theories-to-human-centered-web-design-full-handbook-qkixktlax) · freeCodeCamp · 16 upvotes · 0 comments --- Tags: [#ux](https://daily.dev/tags/ux), [#ui-design](https://daily.dev/tags/ui-design), [#accessibility](https://daily.dev/tags/accessibility), [#design-systems](https://daily.dev/tags/design-systems) [View this post on daily.dev](https://daily.dev/posts/medium-lxc8jrsqz) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Medium","url":"https://daily.dev/posts/medium-lxc8jrsqz","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/medium-lxc8jrsqz"},"datePublished":"2026-07-20T19:32:45.814Z","dateModified":"2026-09-14T08:53:10.479Z","description":"A practical guide covering 14 foundational UX and visual design principles with real-world product examples. Topics include visual hierarchy, contrast,...","image":"https://media.daily.dev/image/upload/s--OHB84bZF--/f_auto/v1722860399/public/Placeholder%2010","thumbnailUrl":"https://media.daily.dev/image/upload/s--OHB84bZF--/f_auto/v1722860399/public/Placeholder%2010","isAccessibleForFree":true,"articleSection":"Medium","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Medium","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/medium","url":"https://daily.dev/sources/medium_js"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/medium-lxc8jrsqz","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"ux,ui-design,accessibility,design-systems","timeRequired":"PT11M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Medium","item":"https://daily.dev/sources/medium_js"},{"@type":"ListItem","position":3,"name":"Medium"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/medium-lxc8jrsqz#faq","mainEntity":[{"@type":"Question","name":"What is Fitts's Law in UX design?","acceptedAnswer":{"@type":"Answer","text":"Fitts's Law predicts that larger and nearer targets are faster and easier for users to reach and interact with. It matters most for mobile interfaces, frequently used actions, and touch controls. Practical applications include making frequent actions large enough to tap easily, placing related controls near the user's current focus, and keeping the clickable area larger than the visible icon. daily.dev surfaces interaction-design fundamentals for designers refining touch and click targets."}},{"@type":"Question","name":"What is the 60-30-10 rule for color in UI design?","acceptedAnswer":{"@type":"Answer","text":"The 60-30-10 rule is a starting framework for distributing color in an interface: 60% dominant color for backgrounds and foundational surfaces, 30% supporting color for panels, navigation, and secondary structure, and 10% accent color for key actions, highlights, and important states. It is a guideline rather than a strict mathematical requirement, meant to keep color purposeful rather than decorative. Designers balancing brand color with usability can track guidelines like this on daily.dev."}},{"@type":"Question","name":"What are the four levels of feedback an interface should give users?","acceptedAnswer":{"@type":"Answer","text":"An interface should give feedback at four levels: acknowledgement (the system received the action), progress (work is continuing), result (the operation succeeded, failed, or changed something), and recovery (the user can cancel, retry, undo, or correct the outcome). Without these signals, users may repeat actions, wait unnecessarily, or assume the product is broken. daily.dev helps developers and designers building interactive UI keep feedback-pattern know-how close at hand."}}]} ```