Software Development

About Michael

Michael is a student at Aalborg University, Denmark, studying Engineering Psychology — it’s about how to shape (technology mostly) products to fit humans. Although they don’t do a lot of visual design, he’s taken a personal interest in that on his own, hoping to land a job as a designer / user experience researcher at a medium sized company after he graduates this summer.

Info

About Amusic

Michael made the app with some of his fellow students, designing most of it on his own. Sadly, the app was actually never submitted to the App Store due to lack of time to finish it.

What he particularly likes about it…

“The two screens are actually the same — the player view. But unlike in the Apple Music app where the queue is an afterthought that is hidden beneath the cover art, in this design, you can choose whether to be utilitarian and use the queue view or have it look pretty. Easily change between the two. The player is beautiful either way. When you change, the song animates to its new position and stays there until you decide to change it again. Choose your style and forget about it if you like.

Better yet, the waveform slider is both pretty and SUPER useful as it lets you easily fast forward to your favourite part of the song.”

…and dislikes

For You

“I’m not very happy with the artwork on the “for you” screen. Also it should pack more content pr. screen estate.”

Thank you, Michael, for sharing 🙂

About the “Show and Tell” Blog Series

Show and Tell presents developers’ and designers’ most and least favorite elements of UI/UX in an app they helped create or design. If you’d like to share, submissions are open! Submit your app here! Thank you 🙂

Read more

In this new series on this blog, I’d like to give developers and designers a place to show off  one UI / UX element they’re particularly proud of, and one they particularly dislike, in an app they worked on.

Submit now 🙂

If you’re a developer or designer and would love to share a UI/UX element in your app you particularly like, and one you particularly dislike, please mail me!

What I need from you

  • Your name, or, if you like, state that your submission should be anonymous. Your email and other contact info will not be published
  • Your website, twitter/facebook/instagram/github handle, or any other way you’d like to be credited (if it’s not an anonymous submission)
  • A short description of who you are and what you do
  • Your involvement with the app
  • The name of the app with a link (if you’re willing to share, but it’s not a must)
  • A screenshot, short video or gif of a UI/UX element in your app you particularly like, with 1-2 sentences of why you like it
  • A screenshot, short video or gif of a UI/UX element in your app you particularly dislike, with 1-2 sentences of why you don’t like it
  • Please only send apps you worked on yourself
  • Multiple submissions are fine

A post will look something like this:
Submissions will be published on no particular schedule in no particular order on this blog.
You’ll be notified beforehand with a preview.
Submissions will (or will not) be published at my own discretion.

I’m looking forward to your submissions!

For updates, please follow this blog, or @showandtell_ui on twitter.

Read more

When creating a custom Quick Action for macOS Mojave’s Finder, you have the option to supply a custom icon:

Creating a custom Quick Action in Automator for macOS Mojave

Selecting an icon in Automator

But this is what happens when you supply an ordinary image in Dark Mode:

A Quick Action's icon without adjustments

or Light Mode:

Unmodified Quick Action icon

(in Light Mode, it’s obviously better, but still not as subdued as it should be, which is more grey than pitch-black, or whatever color your original icon file might have).

Tip #1 – Getting the icon’s color right

The trick is to have the file end in ‘Template’, like ‘MyWorkflowIconTemplate.tiff’. But that’s not all there is to it. When you add a custom icon through Automator, it automatically gets renamed into ‘workflowCustomImage.png’. So no matter what you name your file, it won’t matter.

To fix this, add a custom icon to your Quick Action in Automator, save, switch to Finder and navigate to /Users/yourname/Library/Services/, where your newly saved Quick Action will end up.
There, right-click your Quick Action, select ‘Show Package Contents’, and navigate into Resources, where your icon file will be. Rename it to ‘workflowCustomImageTemplate.png’.
Now, navigate into Contents and open Info.plist. Look for <key>NSIconName</key> and change ‘workflowCustomImage’ to ‘workflowCustomImageTemplate’. Save.

Now the icon will look like this:

Modified Quick Action icon in Dark Mode

Modified Quick Action icon in Light Mode

That’s much better. But there’s another issue we need to take care of:

Touch Bar with oversized Quick Action icon

The icon’s a bit too large, even though in Finder and the “More…” menu, it looks well-sized.

Tip #2 – Getting the Touch Bar icon to play nice

I thought I’d be smart about it, since the “append ‘Template’ “ trick worked, I’d have three differently sized images and append @2x and @3x. But it didn’t work.
The trick is to have a TIFF file with 2 (or 3, to be on the safe side) representations – one at 1x, one at 2x and one at 3x.
And voila, it worked:

Quick Action icon in Touch Bar with properly sized icon

To create the TIFF, I wrote a small app that takes my icon file, creates three NSBitmapImageRep objects from it and adds them to an NSImage instance. Then it writes the NSImage object’s TIFFRepresentation to disk.
Open that file in Preview.app and you’ll notice all three icons inside that one TIFF (you might have to select View – Thumbnails in the menu to show them)
Select the first and select Tools -> Adjust Size… in the menu bar.
Resize the image to 16×16 (which I found to be working nicely) and set its resolution to 72, if it isn’t already.
Select the next thumbnail and resize it to 32×32 at 144 DPI, and the third thumbnail to 48×48 at 216 DPI. Save.
Now repeat Tip #1 with this new file and you’re all set.

I hope this will save you some time, as it cost me plenty 😉

_____
Matthias Gansrigler | Founder & Developer – Eternal Storms Software
e: blog@eternalstorms.at
twitter | facebook | instagram

Read more