{"id":60,"date":"2010-07-11T18:41:00","date_gmt":"2010-07-12T01:41:00","guid":{"rendered":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/the-borders-cut-them-all-down-mockup\/"},"modified":"2021-12-01T11:35:46","modified_gmt":"2021-12-01T19:35:46","slug":"the-borders-cut-them-all-down-mockup","status":"publish","type":"post","link":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/11\/the-borders-cut-them-all-down-mockup\/","title":{"rendered":"The borders: Cut them all down!! (Mockup)"},"content":{"rendered":"\n

I keep babbling about how ugly I think Appearance Preferences is, so I played with GIMP just now and made a couple of mockups.
I’m hoping to stay grounded in reality here.<\/p>\n\n\n\n

First: the problem!<\/p>\n\n\n\n

\"\"<\/a><\/figure><\/div>\n\n\n\n\n\n\n\n

This here is the status quo in Gnome. The problem is not limited to Appearance Preferences, but it’s easy to demonstrate with it. I’m just going to focus on the Background section, too, but what I’m doing can be applied to the others. Let’s say I right clicked on my desktop and innocently selected \u201cChange Desktop Background.\u201d<\/p>\n\n\n\n

The thing that immediately deserves a significant chunk of ire is that empty white patch to the right of the icon view. Were the window a few pixels wider, it wouldn’t be there. As it is, this gives us a 3×3 grid of tiny icons, with more space between the icons than the icons themselves, from which we need to choose a background picture. And that breaks one of my rules: Never, ever<\/em> expect your user to resize a window.
We aren’t going to make the window wider, but we are going to fix that problem.<\/p>\n\n\n\n

The next issue is visible by scanning across the window. I go through three heavy lines: the window border, the tab bar, and the frame around the icon view, before I get to the meat of this thing. That is three layers; three sections of the interface.
If this was a printed document, the icon view would be a subsection.
But what is this interface’s main objective? Choosing your background picture! Doesn’t that seem a little bit crazy?<\/p>\n\n\n\n

My first mockup is getting rid of that excess border between the tab bar and the icon view\u2026<\/p>\n\n\n\n

\"\"<\/a><\/figure><\/div>\n\n\n\n

This highlights a particular habit Gnome apps have, especially when they follow today’s HIG.  (And, as you might have guessed, I disagree with this habit). They add padding, padding, padding. They are obsessed with padding. Every container has 12 pixels of padding on every side.<\/p>\n\n\n\n

Of course, I like padding, too. I want<\/em> things to use padding. If everyone used padding and margins, maybe themes wouldn’t be using so many lines! (The other thing that makes me crazy, but it turns out these go together in our case. Note that one strangely thick border is now gone. I did cheat a bit by making it a 1px border instead of a 3px border, but as far as I can tell that’s a theme thing).<\/p>\n\n\n\n

Unfortunately, padding is being used robotically to fill an arbitrary requirement. Everything uses the exact same amount of padding around every element regardless of what that element means<\/em>. The result is a tangle. (See above).
I propose a slightly more organic approach: \u201cPadding should be in multiples of x<\/em>, never less than y<\/em> pixels and never more than z<\/em> pixels. In general, no control should reach within w <\/em>pixels of a window’s edge or a heavy border.\u201d<\/p>\n\n\n\n

There is another problem here: if a container creates a heavy border, it is redundant to give the next container inside it a heavy border as well. Besides, having a sudden contrast between two halves of a double border defeats the purpose; it adds noise right in the middle of the attempt to create a clean surface. That can happen if one follows a mathematical guide to padding.<\/p>\n\n\n\n

At this point the mockup is attainable with GTK as it is right now. However, I think I only applied my solution half-way. The icon view still has its own spacing around each icon. (Conveniently enough, it is precisely the same as the padding within a toplevel container: 12px). Here’s my attempt with that:<\/p>\n\n\n\n

\"\"<\/a><\/figure><\/div>\n\n\n\n

This one would need a few small changes in GTK, in themes and in philosophy.<\/p>\n\n\n\n

The first thing is this interface stacks vertically, and only vertically<\/em>. Trying to differentiate empty space from another element’s empty space going horizontally was a fruitless exercise, so this stops trying to do that.<\/p>\n\n\n\n

If you draw a line down the left side, you will notice that the edge of the left-most icon in the icon view, the Style label and the Help button are all aligned. However, instead of a single Alignment, I’m adjusting each element on an individual basis to align based on its content.<\/p>\n\n\n\n

As well, the buttons part of the Notebook widget would need a settable left margin. Quite attainable, really! There’s precedent in any web browser where the content spans to the edge of the screen. (MacOS’s design is interesting, too. Over there, a tab bar at the top of a window is styled a bit differently than one somewhere else).<\/p>\n\n\n\n

I’m cheating a little by assuming that the theme will use a different background colour inside a frame or a notebook container. That is the case with Clearlooks or Elementary, for example. By varying the background colour, we can strongly communicate that the tabs at the top affect a particular thing without wasting 45,156px\u00b2 of screen space on layers of margins and borders.<\/p>\n","protected":false},"excerpt":{"rendered":"

I keep babbling about how ugly I think Appearance Preferences is, so I played with GIMP just now and made a couple of mockups.
I’m hoping to stay grounded in reality here.<\/p>\n

First: the problem!<\/p>\n

\"\"<\/a><\/p>\n","protected":false},"author":2,"featured_media":525,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1],"tags":[33,34],"class_list":["post-60","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-design","tag-mockup-2"],"yoast_head":"\nThe borders: Cut them all down!! (Mockup) - Dylan McCall<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/11\/the-borders-cut-them-all-down-mockup\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The borders: Cut them all down!! (Mockup) - Dylan McCall\" \/>\n<meta property=\"og:description\" content=\"I keep babbling about how ugly I think Appearance Preferences is, so I played with GIMP just now and made a couple of mockups.I’m hoping to stay grounded in reality here. First: the problem!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/11\/the-borders-cut-them-all-down-mockup\/\" \/>\n<meta property=\"og:site_name\" content=\"Dylan McCall\" \/>\n<meta property=\"article:published_time\" content=\"2010-07-12T01:41:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-01T19:35:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/dylanmc.ca\/wp-content\/uploads\/AppearancePrefs-After.png\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"588\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Dylan McCall\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dylan McCall\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/11\/the-borders-cut-them-all-down-mockup\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/11\/the-borders-cut-them-all-down-mockup\/\"},\"author\":{\"name\":\"Dylan McCall\",\"@id\":\"https:\/\/dylanmc.ca\/\/-\/#\/schema\/person\/c244419a779c5414c768bc53ac5fb2d5\"},\"headline\":\"The borders: Cut them all down!! (Mockup)\",\"datePublished\":\"2010-07-12T01:41:00+00:00\",\"dateModified\":\"2021-12-01T19:35:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/11\/the-borders-cut-them-all-down-mockup\/\"},\"wordCount\":861,\"image\":{\"@id\":\"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/11\/the-borders-cut-them-all-down-mockup\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/dylanmc.ca\/wp-content\/uploads\/AppearancePrefs-After.png?fit=720%2C588&ssl=1\",\"keywords\":[\"design\",\"mockup\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/11\/the-borders-cut-them-all-down-mockup\/\",\"url\":\"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/11\/the-borders-cut-them-all-down-mockup\/\",\"name\":\"The borders: Cut them all down!! (Mockup) - Dylan McCall\",\"isPartOf\":{\"@id\":\"https:\/\/dylanmc.ca\/\/-\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/11\/the-borders-cut-them-all-down-mockup\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/11\/the-borders-cut-them-all-down-mockup\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/dylanmc.ca\/wp-content\/uploads\/AppearancePrefs-After.png?fit=720%2C588&ssl=1\",\"datePublished\":\"2010-07-12T01:41:00+00:00\",\"dateModified\":\"2021-12-01T19:35:46+00:00\",\"author\":{\"@id\":\"https:\/\/dylanmc.ca\/\/-\/#\/schema\/person\/c244419a779c5414c768bc53ac5fb2d5\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/11\/the-borders-cut-them-all-down-mockup\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/11\/the-borders-cut-them-all-down-mockup\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/dylanmc.ca\/wp-content\/uploads\/AppearancePrefs-After.png?fit=720%2C588&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/dylanmc.ca\/wp-content\/uploads\/AppearancePrefs-After.png?fit=720%2C588&ssl=1\",\"width\":\"720\",\"height\":\"588\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/dylanmc.ca\/\/-\/#website\",\"url\":\"https:\/\/dylanmc.ca\/\/-\/\",\"name\":\"Dylan McCall\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/dylanmc.ca\/\/-\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/dylanmc.ca\/\/-\/#\/schema\/person\/c244419a779c5414c768bc53ac5fb2d5\",\"name\":\"Dylan McCall\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/dylanmc.ca\/\/-\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c94ab3a7e6a884542205e0408711cd54bb1fd5f4e90e7a5f621a54656a18a037?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c94ab3a7e6a884542205e0408711cd54bb1fd5f4e90e7a5f621a54656a18a037?s=96&d=mm&r=g\",\"caption\":\"Dylan McCall\"},\"description\":\"Software developer, tea drinker, GNOME contributor. Occasionally a raving fanatic.\",\"sameAs\":[\"https:\/\/dylanmc.ca\/\/-\"],\"url\":\"https:\/\/dylanmc.ca\/\/-\/blog\/author\/dylan\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The borders: Cut them all down!! (Mockup) - Dylan McCall","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/11\/the-borders-cut-them-all-down-mockup\/","og_locale":"en_US","og_type":"article","og_title":"The borders: Cut them all down!! (Mockup) - Dylan McCall","og_description":"I keep babbling about how ugly I think Appearance Preferences is, so I played with GIMP just now and made a couple of mockups.I’m hoping to stay grounded in reality here. First: the problem!","og_url":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/11\/the-borders-cut-them-all-down-mockup\/","og_site_name":"Dylan McCall","article_published_time":"2010-07-12T01:41:00+00:00","article_modified_time":"2021-12-01T19:35:46+00:00","og_image":[{"width":720,"height":588,"url":"https:\/\/dylanmc.ca\/wp-content\/uploads\/AppearancePrefs-After.png","type":"image\/png"}],"author":"Dylan McCall","twitter_misc":{"Written by":"Dylan McCall","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/11\/the-borders-cut-them-all-down-mockup\/#article","isPartOf":{"@id":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/11\/the-borders-cut-them-all-down-mockup\/"},"author":{"name":"Dylan McCall","@id":"https:\/\/dylanmc.ca\/\/-\/#\/schema\/person\/c244419a779c5414c768bc53ac5fb2d5"},"headline":"The borders: Cut them all down!! (Mockup)","datePublished":"2010-07-12T01:41:00+00:00","dateModified":"2021-12-01T19:35:46+00:00","mainEntityOfPage":{"@id":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/11\/the-borders-cut-them-all-down-mockup\/"},"wordCount":861,"image":{"@id":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/11\/the-borders-cut-them-all-down-mockup\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/dylanmc.ca\/wp-content\/uploads\/AppearancePrefs-After.png?fit=720%2C588&ssl=1","keywords":["design","mockup"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/11\/the-borders-cut-them-all-down-mockup\/","url":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/11\/the-borders-cut-them-all-down-mockup\/","name":"The borders: Cut them all down!! (Mockup) - Dylan McCall","isPartOf":{"@id":"https:\/\/dylanmc.ca\/\/-\/#website"},"primaryImageOfPage":{"@id":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/11\/the-borders-cut-them-all-down-mockup\/#primaryimage"},"image":{"@id":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/11\/the-borders-cut-them-all-down-mockup\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/dylanmc.ca\/wp-content\/uploads\/AppearancePrefs-After.png?fit=720%2C588&ssl=1","datePublished":"2010-07-12T01:41:00+00:00","dateModified":"2021-12-01T19:35:46+00:00","author":{"@id":"https:\/\/dylanmc.ca\/\/-\/#\/schema\/person\/c244419a779c5414c768bc53ac5fb2d5"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/11\/the-borders-cut-them-all-down-mockup\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dylanmc.ca\/\/-\/blog\/2010\/07\/11\/the-borders-cut-them-all-down-mockup\/#primaryimage","url":"https:\/\/i0.wp.com\/dylanmc.ca\/wp-content\/uploads\/AppearancePrefs-After.png?fit=720%2C588&ssl=1","contentUrl":"https:\/\/i0.wp.com\/dylanmc.ca\/wp-content\/uploads\/AppearancePrefs-After.png?fit=720%2C588&ssl=1","width":"720","height":"588"},{"@type":"WebSite","@id":"https:\/\/dylanmc.ca\/\/-\/#website","url":"https:\/\/dylanmc.ca\/\/-\/","name":"Dylan McCall","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dylanmc.ca\/\/-\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/dylanmc.ca\/\/-\/#\/schema\/person\/c244419a779c5414c768bc53ac5fb2d5","name":"Dylan McCall","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dylanmc.ca\/\/-\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c94ab3a7e6a884542205e0408711cd54bb1fd5f4e90e7a5f621a54656a18a037?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c94ab3a7e6a884542205e0408711cd54bb1fd5f4e90e7a5f621a54656a18a037?s=96&d=mm&r=g","caption":"Dylan McCall"},"description":"Software developer, tea drinker, GNOME contributor. Occasionally a raving fanatic.","sameAs":["https:\/\/dylanmc.ca\/\/-"],"url":"https:\/\/dylanmc.ca\/\/-\/blog\/author\/dylan\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/dylanmc.ca\/wp-content\/uploads\/AppearancePrefs-After.png?fit=720%2C588&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pcXOQX-Y","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/dylanmc.ca\/\/-\/wp-json\/wp\/v2\/posts\/60","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dylanmc.ca\/\/-\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dylanmc.ca\/\/-\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dylanmc.ca\/\/-\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dylanmc.ca\/\/-\/wp-json\/wp\/v2\/comments?post=60"}],"version-history":[{"count":8,"href":"https:\/\/dylanmc.ca\/\/-\/wp-json\/wp\/v2\/posts\/60\/revisions"}],"predecessor-version":[{"id":11025,"href":"https:\/\/dylanmc.ca\/\/-\/wp-json\/wp\/v2\/posts\/60\/revisions\/11025"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dylanmc.ca\/\/-\/wp-json\/wp\/v2\/media\/525"}],"wp:attachment":[{"href":"https:\/\/dylanmc.ca\/\/-\/wp-json\/wp\/v2\/media?parent=60"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dylanmc.ca\/\/-\/wp-json\/wp\/v2\/categories?post=60"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dylanmc.ca\/\/-\/wp-json\/wp\/v2\/tags?post=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}