Jakub Steiner Designer. Camera Pilot. http://jimmac.musichall.cz/blog 2020-09-01T13:37:00+02:00 Jakub Steiner Shelved Wallpapers 2 http://jimmac.musichall.cz/blog/2020-09-01-shelved-wallpapers-2/ 2020-09-01T13:37:00+02:00 2020-09-01T13:46:37+02:00 Article Author <p>Yet <a href="../2018-02-12-shelved-wallpapers">again</a> the iterations to produce the <a href="https://gitlab.gnome.org/GNOME/gnome-backgrounds">default and complimentary wallpapers</a> for 3.38 generated some variants that didn&rsquo;t make the cut, but I&rsquo;d like to share with fellow gnomies.</p> <p><p class="image nogap"> <a href="/stuff/stripes/"></p> <div class='image full'> <img alt='' src='/log/index/index/thumb.jpg'> </div> <p></a></p> Art vs Design http://jimmac.musichall.cz/blog/2020-04-06-art-vs-design/ 2020-04-06T05:41:00+02:00 2020-04-06T07:08:29+02:00 Article Author <p>Over the weekend I was forced to unload all my photos from my phone due to limited storage space. As I went through a nice capture of Builder nighly caught my attention and I couldn&rsquo;t help but <a href="https://twitter.com/jimmac/status/1246208150233112577">post it on twitter</a>.</p> <div class='image '> <img alt='Cyberdyne Builder' src='/log/index/index/cyberdine.jpeg'> <small>Cyberdyne Builder</small> </div> <p>Obviously posting on twitter meant it was misunderstood immediately and quipped with entitled adjectives. And rather than responding on the wrong platform, I finally have an excuse to post on my blog again. So let&rsquo;s take a look at the <em>horrible situation</em> we ended up with.</p> <p>Thanks to <a href="http://flatpak.org">Flatpak</a> you now have a way to install a stable and development versions of an app, concurrenly. You can easily tell them apart without resorting to Name suffices in the shell, where the actual name gets horribly truncated due to ellipsization, while still clearly being the same app on a first glimpse.</p> <div class='image '> <img alt='Stable and Nightly Boxes' src='/log/index/index/boxes-nightly.jpg'> <small>Stable and Nightly Boxes</small> </div> <p>There&rsquo;s plenty of apps already making use of this. So how does an app developer get one? We actually have the tooling for that. If you have an app icon, you can easily generate a nightly variant with zero effort in most cases.</p> <video class="full" muted="" controls=""> <source src="/blog/2020-04-06-art-vs-design/index/nightly-icons.mp4" type="video/mp4"> <source src="/blog/2020-04-06-art-vs-design/index/nightly-icons.webm" type="video/webm"> Your browser does not support the video tag. </video> <p>So what was the situation twitter was praising? Let&rsquo;s count on how many GNOME applications shipped a custom nighly icon. Umm, how about zero?</p> <p>A pretty picture an artist spends hours on, modelling, texturing, lighting, adjusting for low resolution screens is <em>not</em> a visual framework nor a reasonable thing to ask app developers to do. </p> Conferences http://jimmac.musichall.cz/blog/2019-12-02-conferences/ 2019-12-02T11:31:00+01:00 2019-12-04T19:10:57+01:00 Article Author <p>This year I haven&rsquo;t done any drone-related travelling. The sponsorship deal fell through and <a href="https://www.rotorama.cz/racing-team">Rotorama</a> didn&rsquo;t participate in <a href="https://www.dcl.aero/">DCL</a>. I admit I haven&rsquo;t been practicing as much as I would need to to do any better in the local races either. </p> <p>So at least I got the world of FOSS to get out of the couch.</p> <h3>Berlin</h3> <div class="image full"> <a href="/photos/2019_Berlin/"> <img src="http://jimmac.musichall.cz/photos/2019_Berlin/thumbs/P1155547.jpg" /> </a></div> <p>Tobias organized yet another icon-related hackfest in Berlin earlier this year. This time we had some talented young developers help us out with the tooling. This effort to focus on the tools as well as the assets is continuing and we&rsquo;ll have some more exciting news to share soon.</p> <p class='image full'> <iframe src='https://player.vimeo.com/video/353946241' height='500' class='image full' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <small><a href='https://vimeo.com/353946241'>Hackfest Berlin 2019</a> from <a href='https://vimeo.com/jimmacfx'>jimmac</a> on <a href='https://vimeo.com'>Vimeo</a>.</small> </p> <h3>Thessaloniki</h3> <p>GUADEC continues bringing awesome southern locations, which a vitamin D deprived monkey from a rainy climate can&rsquo;t appreciate enough. I have fallen back to my comfort zone and only given a short workflow/<a href="https://guadec.ubicast.tv/videos/simple-is-hard-creating-beautiful-app-icons/">demo on icon design</a> this year, mainly because Tobias has been giving <a href="https://guadec.ubicast.tv/videos/designing-gnome-mobile-apps/">great talks</a> on focusing on design.</p> <div class="image full"> <a href="/photos/2019_GUADEC_Thessaloniki/"> <img src="http://jimmac.musichall.cz/photos/2019_GUADEC_Thessaloniki/thumbs/P1177278.jpeg" /> </a></div> <p>I still have a video to finish editing, but it ended up more of a personal one so I&rsquo;m not sure I&rsquo;ll publicize it that much.</p> <h3>the Hague</h3> <div class="image full"> <a href="/photos/2019_Hague_Hackfest/"> <img src="http://jimmac.musichall.cz/photos/2019_Hague_Hackfest/thumbs/P1188339.jpeg" /> </a></div> <p>And we&rsquo;re closing the year with another design hackfest. Big shout out to <a href="https://gitlab.gnome.org/Teams/Design/app-mockups/blob/master/boxes/boxes-onboarding-fullcolor.png">Hans de Goede</a> and <a href="https://blogs.gnome.org/carlosg/">Carlos Garnacho</a> for organizing a shell hackfest in the Netherlands, and mainly allow some designers crash the party to revive our efforts in attacking some of the downsides of the current overview design. The facilities of <a href="https://revspace.nl/Main_Page">Revspace</a> allowed us to meet face to face, mind map on the whiteboard, iterate on some prototypes and move forward considerably compared to the usual cycle spanning months.</p> <div class='image '> <img alt='' src='/log/index/index/sponsored-by-foundation.png'> </div> 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>