Jakub Steiner Designer. Camera Pilot. http://jimmac.musichall.cz/blog 2018-07-18T14:55:00+02:00 Jakub Steiner Detail Considered Harmful http://jimmac.musichall.cz/blog/2018-07-18-detail-considered-harmful/ 2018-07-18T14:55:00+02:00 2018-07-18T16:21:54+02: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'><h1></h1> <img alt='' src='index/highres.svg'> </div> <div class='image full'><h1></h1> <img alt='' src='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'><h1></h1> <img alt='' src='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 2018-03-21T13:02:55+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'><h1></h1> <img alt='' src='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'><h1></h1> <img alt='' src='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'><h1></h1> <img alt='' src='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 2018-03-08T08:26:45+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 2018-02-26T12:17:09+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 2018-02-20T11:40:47+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> Shelved Wallpapers http://jimmac.musichall.cz/blog/2018-02-12-shelved-wallpapers/ 2018-02-12T20:13:00+01:00 2018-02-12T21:06:15+01:00 Article Author <p>GNOME 3.28 will release with another batch of new wallpapers that only a freaction of you will ever see. Apart from those I also made a few for different purposes that didn&rsquo;t end up being used, but it would be a shame to keep shelved.</p> <p>So here&rsquo;s a bit of isometric goodness I quite enjoy on my desktop, you might as well.</p> <p class="image nogap"> <a href="index/10.png" data-lightbox="wall"> <div class='image 6u'><h1></h1> <img alt='' src='index/10thumb.jpg'> </div> </a> <a href="index/10-1.png" data-lightbox="wall"> <div class='image 6u'><h1></h1> <img alt='' src='index/10-1thumb.jpg'> </div> </a> <a href="index/10-2.png" data-lightbox="wall"> <div class='image 6u'><h1></h1> <img alt='' src='index/10-2thumb.jpg'> </div> </a> <a href="index/10-3.png" data-lightbox="wall"> <div class='image 6u'><h1></h1> <img alt='' src='index/10-3thumb.jpg'> </div> </a> </p>