{"id":49184,"date":"2025-09-08T16:21:02","date_gmt":"2025-09-08T20:21:02","guid":{"rendered":"https:\/\/mjtsai.com\/blog\/?p=49184"},"modified":"2025-11-10T13:40:29","modified_gmt":"2025-11-10T18:40:29","slug":"mac-layout-guidelines","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2025\/09\/08\/mac-layout-guidelines\/","title":{"rendered":"Mac Layout Guidelines"},"content":{"rendered":"<p><a href=\"https:\/\/marioaguzman.github.io\/design\/layoutguidelines\/\">Mario Guzm&aacute;n<\/a>:<\/p>\n<blockquote cite=\"https:\/\/marioaguzman.github.io\/design\/layoutguidelines\/\"><p>The following sections are general guidelines that describe fundamental Mac layout principles of center equalization, text and control alignment, appropriate use of white space, and visual balance. Following these guidelines will help you create functional and aesthetically pleasing windows that are easy for Mac users to understand and use.<\/p><p>[&#8230;]<\/p><p>When labels and controls are stacked in a group, they should line up with each other vertically. Note the right alignment of the colons for the main category labels and the left alignment of the checkboxes and radio buttons. The vertical alignment of the first control in each section is also first baseline aligned with the section title label.<\/p><\/blockquote><p>A pet peeve of mine is that some apps put the section title labels in bold.<\/p><blockquote cite=\"https:\/\/marioaguzman.github.io\/design\/layoutguidelines\/\"><p>In such cases, you may use a label below the control with additional information as to how it will alter the application&rsquo;s behavior.<\/p><ul><li>These labels are small-sized multi-line labels.<\/li><li>The text color for these labels is &ldquo;secondary text color&rdquo; so they appear more muted than the actual control itself.<\/li><\/ul><p>[&#8230;]<\/p><p>For any labels you add, they&rsquo;re typically left aligned with the control they&rsquo;re describing. However, for controls such as Checkboxes and Radio Buttons, they must be left-aligned with the label (title) of the control.<\/p><\/blockquote>\n\n<p>Previously:<\/p>\n<ul>\n<li><a href=\"https:\/\/mjtsai.com\/blog\/2025\/09\/03\/macos-tahoe-26-developer-beta-9\/\">macOS Tahoe 26 Developer Beta 9<\/a><\/li>\n<li><a href=\"https:\/\/mjtsai.com\/blog\/2025\/08\/25\/macos-tahoe-26-developer-beta-8\/\">macOS Tahoe 26 Developer Beta 8<\/a><\/li>\n<li><a href=\"https:\/\/mjtsai.com\/blog\/2025\/01\/13\/mac-toolbar-guidelines\/\">Mac Toolbar Guidelines<\/a><\/li>\n<\/ul>\n\n<p id=\"mac-layout-guidelines-update-2025-11-07\">Update (<a href=\"#mac-layout-guidelines-update-2025-11-07\">2025-11-07<\/a>): <a href=\"https:\/\/mastodon.social\/@marioguzman\/115503807101646095\">Mario Guzm&aacute;n<\/a>:<\/p>\n<blockquote cite=\"https:\/\/mastodon.social\/@marioguzman\/115503807101646095\"><p>Cupertino, who literally made the Mac HIG, forgot how to HIG&#8230; This is <em>NOT<\/em> how you make Mac app Settings windows.<\/p><p>How do you forget how to design Mac apps? You <em>literally<\/em> invented them.<\/p><\/blockquote>\n\n<p id=\"mac-layout-guidelines-update-2025-11-10\">Update (<a href=\"#mac-layout-guidelines-update-2025-11-10\">2025-11-10<\/a>): <a href=\"https:\/\/mastodon.social\/@marioguzman\/115516142609130228\">Mario Guzm&aacute;n<\/a>:<\/p>\n<blockquote cite=\"https:\/\/mastodon.social\/@marioguzman\/115516142609130228\"><p>When making Settings windows for your #AppKit \/ #macOS app, it is perfectly okay to break up your pane&rsquo;s content further using a Tab View&#8230; That way you won&rsquo;t end up with long forms like this with tons of overwhelming text.<\/p><p>Also section headers should be on the left-side rather than the top. <em>sigh<\/em><\/p><\/blockquote>\n<p>There are so many things wrong with the Music app&rsquo;s settings layout in Tahoe.<\/p>","protected":false},"excerpt":{"rendered":"<p>Mario Guzm&aacute;n: The following sections are general guidelines that describe fundamental Mac layout principles of center equalization, text and control alignment, appropriate use of white space, and visual balance. Following these guidelines will help you create functional and aesthetically pleasing windows that are easy for Mac users to understand and use.[&#8230;]When labels and controls are [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"apple_news_api_created_at":"2025-09-08T20:21:05Z","apple_news_api_id":"78f3daac-e090-4b01-b086-876def692a6d","apple_news_api_modified_at":"2025-11-10T18:40:32Z","apple_news_api_revision":"AAAAAAAAAAAAAAAAAAAAAQ==","apple_news_api_share_url":"https:\/\/apple.news\/AePParOCQSwGwhodt72kqbQ","apple_news_coverimage":0,"apple_news_coverimage_caption":"","apple_news_is_hidden":false,"apple_news_is_paid":false,"apple_news_is_preview":false,"apple_news_is_sponsored":false,"apple_news_maturity_rating":"","apple_news_metadata":"\"\"","apple_news_pullquote":"","apple_news_pullquote_position":"","apple_news_slug":"","apple_news_sections":"\"\"","apple_news_suppress_video_url":false,"apple_news_use_image_component":false,"footnotes":""},"categories":[2],"tags":[77,30,2742,1816,2294],"class_list":["post-49184","post","type-post","status-publish","format-standard","hentry","category-technology","tag-design","tag-mac","tag-macos-tahoe-26","tag-music-app","tag-weather-app"],"apple_news_notices":[],"_links":{"self":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/49184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/comments?post=49184"}],"version-history":[{"count":3,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/49184\/revisions"}],"predecessor-version":[{"id":49982,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/49184\/revisions\/49982"}],"wp:attachment":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/media?parent=49184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/categories?post=49184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/tags?post=49184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}