Jakub Steiner Designer. Camera Pilot. http://jimmac.musichall.cz/blog 2019-01-23T13:00:00+01:00 Jakub Steiner The Big App Icon Redesign http://jimmac.musichall.cz/blog/2019-01-23-the-big-app-icon-redesign/ 2019-01-23T13:00:00+01:00 2019-01-24T10:54:11+01:00 Article Author <p style="display: none;">If your&rsquo;re reading this on Planet Gnome, please visit the <a href="/log/">article on my site</a> to enjoy the inline CSS effects.</p> <h1>The Revolution is Coming</h1> <p>As you may have heard, GNOME 3.32 is going to come with a radical new icon style and new guidelines for app developers. This post aims to give some background on why this was needed, our goals with the initiative, and our exciting plans for the future.</p> <h1>The Problem</h1> <p>Our current icon style dates back all the way to the early 00s and the original <a href="http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines">Tango</a>. One of the foundational ideas behind Tango was that each icon is drawn at multiple sizes, in order to look pixel-perfect in every context. This means that if you want to make an app icon you&rsquo;re not drawing one, but up to 7 separate icons (symbolic, 16px, 22px, 24px, 32px, 48px, and 512px).</p> <div class='image pixelated'> <img alt='' src='/log/index/index/xchat.png'> </div> <div class="icons"> <div class='image '> <img alt='' src='/log/index/index/boxes.png'> </div> <div class='image '> <img alt='' src='/log/index/index/builder.png'> </div> <div class='image '> <img alt='' src='/log/index/index/gimp.png'> </div> <div class='image '> <img alt='' src='/log/index/index/gitg.png'> </div> <div class='image '> <img alt='' src='/log/index/index/inkscape.png'> </div> <div class='image '> <img alt='' src='/log/index/index/music.png'> </div> <div class='image '> <img alt='' src='/log/index/index/photos.png'> </div> <div class='image '> <img alt='' src='/log/index/index/recipe.png'> </div> </div> <p>Making these icons takes quite a bit of experience and craftsmanship, and many of our high-detail icons are more <a href="/blog/2018-07-18-detail-considered-harmful/">art than design</a>. However, as a part of our design system the style has not succeeded, and is in dire need of reform. Some of the major issues:</p> <ul> <li>Many of the sizes aren&rsquo;t being used anywhere in the OS, and haven&rsquo;t been for the better part of a decade. Since we use either large sizes or symbolics in most contexts, the pixel-hinted small sizes are rarely seen by anyone.</li> <li>Only a handful of people have the skills to draw icons in this style, and it can take weeks to do a single app icon. This means that iterating on the style is very hard, which is one of the reasons why our icon style has been stagnant for years.</li> <li>Very few third-party apps are following the guidelines. Our icons are simply too hard to draw for mere mortals, and as a result even the best third-party GNOME apps often have bad icons.</li> <li>We (GNOME Designers) don&rsquo;t have the bandwidth to keep up with icon requests from developers, let alone update or evolve the style overall.</li> <li>The wider industry has moved on from the detailed icon styles of the 2000s, which gives new users the impression that our software is outdated.</li> <li>Cross-platform apps tend to ship with very simple, flat icons these days. The contrast between these icons and our super detailed ones can be quite jarring. </li> </ul> <div class="icons"> <div class='image '> <img alt='' src='/log/index/index/peek.png'> </div> <div class='image '> <img alt='' src='/log/index/index/firefox.png'> </div> <div class='image '> <img alt='' src='/log/index/index/skype.png'> </div> <div class='image '> <img alt='' src='/log/index/index/spotify.png'> </div> </div> <h1>A New Beginning</h1> <p>One of the major project-wide goals GNOME over the past years has been empowering app developers. A big reason for this initiative is that we realized that the current style is holding us back as an ecosystem. Just as <a href="https://wiki.gnome.org/Apps/Builder">Builder</a> is about providing a seamless development workflow, and <a href="https://flatpak.org/">Flatpak</a> is about enabling direct distribution, this initiative is about making good icons more attainable for more apps.</p> <p>So, what would a system designed from the ground up to empower app developers/designers to make good icons look like?</p> <p>The first step is having clearer guidelines and <a href="/blog/2017-01-25-artistic-constraints/">more constraints</a>. The old style was all about eyeballing it and doing what feels right. That&rsquo;s fine for <a href="https://twitter.com/lapz">veteran designers</a> used to the style, but makes it inaccessible to newcomers. The new style comes with a grid, a set of recommended base shapes, and a new color palette. We have also updated the section on <a href="https://developer.gnome.org/hig/stable/icon-design.html.en">app icons</a> in the <a href="https://developer.gnome.org/hig/stable/">HIG</a> with a lot more detailed information on how to design the icons.</p> <video muted autoplay loop controls class='full'> <source src='/log/index/index/color.webm' type='video/webm'> <source src='/log/index/index/color.mp4' type='video/mp4'> </video> <div class="icons"> <div class='image '> <img alt='' src='/log/index/index/Template.png'> </div> <div class='image '> <img alt='' src='/log/index/index/Template2.png'> </div> <div class='image '> <img alt='' src='/log/index/index/Template3.png'> </div> <div class='image '> <img alt='' src='/log/index/index/Template4.png'> </div> <div class='image '> <img alt='' src='/log/index/index/icon-round.svg'> </div> <div class='image '> <img alt='' src='/log/index/index/icon-landscape.svg'> </div> <div class='image '> <img alt='' src='/log/index/index/icon-portrait.svg'> </div> <div class='image '> <img alt='' src='/log/index/index/icon-square.svg'> </div> </div> <p>The style is very <strong>geometric</strong>, making it easy to reuse and adapt elements from other icons. We&rsquo;re also removing baked-in drop shadows in favour of drawing them automatically from the icon&rsquo;s alpha channel in GTK/Shell depending on the rendering context. In most cases 3rd party icons don&rsquo;t come with baked in shadows and this makes icons easier to draw and ensures consistent shadows.</p> <p>Another cornerstone of this initiative is reducing the number of icons to be drawn: From now on, you only need one full color icon and a monochrome symbolic icon.</p> <p>The color icon is optimized for 64px (with a nominal size of 128px for historical reasons), but the simple geometric style without 1px strokes means that it also looks good larger <em>and</em> smaller.</p> <div class='image full'> <img alt='' src='/log/index/index/onesize.png'> </div> This means the workflow changes from drawing 6 icons to just one (plus one symbolic icon). It also simplifies the way icons are shipped in apps. Instead of a a half dozen rendered PNGs, we can now ship a single color SVG (and a symbolic SVG). Thanks to the simple style most icons are only around 15kB. <div class='image full'> <img alt='' src='/log/index/index/template-plus-symbolic.svg'> </div> <h1>Welcome to the Future</h1> <p>Having this single source of truth makes it orders of magnitude easier to iterate on different metaphors for individual icons, update the style as a whole, and a number of other exciting things we&rsquo;re working towards.</p> <div class="icons"> <div class="icon"> <div class="mask devel" style="mask-image: url('/blog/2019-01-23-the-big-app-icon-redesign/index/nightly-darktable.svg'); -webkit-mask-image: url('/blog/2019-01-23-the-big-app-icon-redesign/index/nightly-darktable.svg')"></div> <img src="/blog/2019-01-23-the-big-app-icon-redesign/index/nightly-darktable.svg"> </div> <div class="icon"> <div class="mask devel" style="mask-image: url('/blog/2019-01-23-the-big-app-icon-redesign/index/nightly-darktable.svg'); -webkit-mask-image: url('/blog/2019-01-23-the-big-app-icon-redesign/index/nightly-games.svg')"></div> <img src="/blog/2019-01-23-the-big-app-icon-redesign/index/nightly-games.svg"> </div> <div class="icon"> <div class="mask devel" style="mask-image: url('/blog/2019-01-23-the-big-app-icon-redesign/index/nightly-darktable.svg'); -webkit-mask-image: url('/blog/2019-01-23-the-big-app-icon-redesign/index/nightly-passwordsafe.svg')"></div> <img src="/blog/2019-01-23-the-big-app-icon-redesign/index/nightly-passwordsafe.svg"> </div> <div class="icon"> <div class="mask devel" style="mask-image: url('/blog/2019-01-23-the-big-app-icon-redesign/index/nightly-darktable.svg'); -webkit-mask-image: url('/blog/2019-01-23-the-big-app-icon-redesign/index/nightly-fragments.svg')"></div> <img src="/blog/2019-01-23-the-big-app-icon-redesign/index/nightly-fragments.svg"> </div> </div> <style type="text/css"> div.mask.devel { z-index: 2; box-sizing: border-box; width: 100%; height: 100%; position: absolute; float: right; mask-size: 100%; -webkit-mask-size: 100%; /* bottom stripes */ background-image: repeating-linear-gradient(to top right, transparent, transparent 10%, black 10%, black 20%), linear-gradient(to bottom, #f9f06b 70%, #f5c211); clip-path: inset(63% 0 0 0); -webkit-clip-path: inset(63% 0 0 0); opacity: 0.8; transition: all 300ms ease-in-out; animation-name: develpulse; animation-duration: 3s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes develpulse { 0% {clip-path: inset(100% 0 0 0);-webkit-clip-path: inset(100% 0 0 0);} 50% {clip-path: inset(63% 0 0 0);-webkit-clip-path: inset(63% 0 0 0);} 100% {clip-path: inset(63% 0 0 0);-webkit-clip-path: inset(63% 0 0 0);} } </style> <p>We&rsquo;ve also been working on improving design tooling as part of this initiative. <a href="https://flathub.org/apps/details/org.gnome.IconPreview">Icon Preview</a>, a new app by <a href="https://github.com/ZanderBrown">Zander Brown</a>, is designed to make the icon design workflow smoother and faster. It allows you to quickly get started from a template, preview an icon in various contexts as you&rsquo;re designing it, and then finally optimizing and exporting the SVG to use in apps. The latter part is not quite ready yet, but the app already works great for the former two use cases.</p> <div class='image full'> <img alt='' src='/log/index/index/icon-preview.png'> </div> <h1>Let&rsquo;s Make Beautiful App Icons!</h1> <p>If you&rsquo;re a graphics designer and wish to bring consistency to the world of application icons, familiarize yourselves with <a href="https://developer.gnome.org/hig/stable/icon-design.html.en">the style</a>, grab <a href="https://flathub.org/apps/details/org.gnome.IconPreview">Icon Preview</a>, <a href="https://flathub.org/apps/details/org.inkscape.Inkscape">Inkscape</a> and instead of patching up poor icons downstream with icon themes, please come join us <a href="https://gitlab.gnome.org/GNOME/Initiatives/issues/2">make beautiful upstream application icons</a>!</p> Detail Considered Harmful http://jimmac.musichall.cz/blog/2018-07-18-detail-considered-harmful/ 2018-07-18T14:55:00+02:00 2019-01-23T14:03:56+01:00 Article Author <p>Ever since the dawn of times, we&rsquo;ve been crafting pixel perfect icons, specifically adhering to the target resolution. As we moved on, we&rsquo;ve kept with the times and added these highly detailed high resolution and 3D modelled app icons that WebOS and MacOS X introduced.</p> <div class='image full'> <img alt='' src='/log/index/index/highres.svg'> </div> <div class='image full'> <img alt='' src='/log/index/index/lowres.png'> </div> <p>As many moons have passed since GNOME 3, it&rsquo;s fair to stop and reconsider the aesthetic choices we made. We don&rsquo;t actually present app icons at small resolutions anymore. Pixel perfection sounds like a great slogan, but maybe this is another area that dillutes our focus. Asking app authors to craft pixel precise variants that nobody actually sees? Complex size lookup infrastructure that prominent applications like Blender fail to utilize properly?</p> <p><div class='image full'> <img alt='Blender: Linux is the only platform with botched app icon.' src='/log/index/index/blender.svg'> <small>Blender: Linux is the only platform with botched app icon.</small> </div></p> <p>For the platform to become viable, we need to cater to app developers. Just like Flatpak aims to make it easy to distribute apps, and does it in a completely decetralized manner, we should emphasize with the app developers to design and maintain their own identity.</p> <p>Having clear and simple guidelines for other major platforms and then seeing our super complicated ones, with destructive mechanisms of theming in place, makes me really question why we have anyone actually targeting GNOME.</p> <p>The irony of the previous <a href="/blog/2018-03-14-builder-nightly/">blog post</a> is not lost on me, as I&rsquo;ve been seduced by the shading and detail of these highres <em>artworks</em>. But every day it&rsquo;s more obvious that we need to do a dramatic redesign of the app icon style. Perhaps allowing to programatically generate the unstable/nightlies style. Allow a faster turnaround for keeping the style contemporary and in sync what other platforms are doing. Right now, the dated nature of our current guidelines shows.</p> <div class='image full'> <img alt='' src='/log/index/index/appgrid.svg'> </div> <p>Time to murder our darlings…</p> Builder Nightly http://jimmac.musichall.cz/blog/2018-03-14-builder-nightly/ 2018-03-14T12:58:00+01:00 2019-01-23T14:03:56+01:00 Article Author <p>One of the great aspects of the <a href="http://flatpak.org">Flatpak model</a>, apart from separating apps from the OS, is that you can have multiple versions of the same app installed concurrently. You can rely on the stable release while trying things out in the development or nightly built version. This creates a need to easily identify the two versions apart when launching it with the shell.</p> <p>I think Mozilla has set a great precendent on how to manage multiple version identities.</p> <div class='image full'> <img alt='' src='/log/index/index/firefox.png'> </div> <p>Thus came the desire to spend a couple of nights working on the Builder nightly app icon. While we&rsquo;ve generally tried to simplify app icons to match what&rsquo;s happening on the mobile platforms and trickling down to the older desktop OSes, I&rsquo;ve decided to retain the 3D wokflow for the builder icon. Mainly because I want to get better at it, but also because it&rsquo;s a perfect platform for <a href="https://en.wikipedia.org/wiki/Kitbashing">kit bashing</a>.</p> <div class='image full'> <img alt='' src='/log/index/index/blender-wip.jpg'> </div> <p>For Builder specifically I&rsquo;ve identified some properties I think should describe the &lsquo;nightly&rsquo; icon:</p> <ul> <li>Dark (nightly)</li> <li>Modern (new stuff)</li> <li>Not as polished &ndash; dangling cables, open panels, dirty</li> <li>Unstable / indicating it can move (wheels, legs &hellip;)</li> </ul> <div class='image full'> <img alt='' src='/log/index/index/builder-shell.png'> </div> <p>Next up is giving a stab at a few more apps and then it&rsquo;s time to develop some guidelines for these nightly app icons and emphasize it with some Shell styling. Overlaid emblems haven&rsquo;t particularly worked in the past, but perhaps some tag style for the label could do.</p> What 3 Words? http://jimmac.musichall.cz/blog/2018-03-08-what-3-words/ 2018-03-08T08:06:00+01:00 2019-01-23T14:03:56+01:00 Article Author <p>I dig online maps like everyone else, but it is somewhat clumsy sharing a location. The <a href="https://map.what3words.com">W3W</a> service addesses the issue by chunking up the whole world into 3x3m squares and assigning each a name (Supposedly around 57 trillion). Sometimes it&rsquo;s a bit of a tongue twister, but most of the time it&rsquo;s fun to say to meet at a &ldquo;<a href="http://w3w.co/massive.message.chuckle">massive message chuckle</a>&rdquo; for some fpv flying. I&rsquo;m really surprised this <a href="https://www.wired.com/2013/09/what3words/">didn&rsquo;t take off</a>.</p> Everything is Better in Slow Motion http://jimmac.musichall.cz/blog/2018-02-26-everything-is-better-in-slow-motion/ 2018-02-26T12:14:00+01:00 2019-01-23T14:03:56+01:00 Article Author <p class='image full'> <iframe src='https://player.vimeo.com/video/257369483' height='500' class='image full' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <small><a href='https://vimeo.com/257369483'>Powerslidin&rsquo; Sunday</a> from <a href='https://vimeo.com/jimmacfx'>jimmac</a> on <a href='https://vimeo.com'>Vimeo</a>.</small> </p> <p>Superb weather over the weekend, despite the thermometer dipping below 10°C. </p> CSS Grid http://jimmac.musichall.cz/blog/2018-02-20-css-grid/ 2018-02-20T11:25:00+01:00 2019-01-23T14:03:56+01:00 Article Author <p>This would totally have been a tweet or a facebook post, but I&rsquo;ve decided to invest a little more energy and post these on my blog, accessible to everybody. Getting old, I guess. We&rsquo;re all mortal and the web isn&rsquo;t open by its own. </p> <p>In the past few days I&rsquo;ve been learning about CSS grid while redesigning <a href="http://flatpak.org">Flatpak</a> and <a href="http://flathub.org">Flathub</a> sites (still coming). And with the knowledge of really grokking only a fraction of it, I&rsquo;m in love. So far I really dig:</p> <ul> <li>Graceful fallback</li> <li>Layout fully controlled by the theme</li> <li>Controlled whitespace (meaning the layout won&rsquo;t fall apart when you add or remove some whitespace)</li> <li>Reasonable code legibility</li> <li>Responsive layouts even without media queries</li> </ul> <p> <iframe width='100%' height='500' src='https://www.youtube.com/embed/YfIjFeBLhyA' frameborder='0' allowfullscreen> <a href='https://www.youtube.com/watch?v=YfIjFeBLhyA'></a>Whitespace on the Web</iframe> </p> <p>The fact that things are sized and defined very differently and getting grips with implicit sizing will take some time, but it seems to have all the answers to the problems I ran into so far. Do note that I never got super fluent in the flexbox, either. </p> <p>I love the few video bites that <a href="http://jensimmons.com">Jen Simmons</a> publishes periodically. The only downside to all this is seeing the mess with the legacy grid systems I have on the numerous websites like this one.</p>