On licensing fonts for your startup

John Gruber is shutting down his app. He wrote a long piece about it, but here is the interesting part:

We’ve been asked “Why now?” Why not just let Vesper and Vesper Sync keep going as they are? The biggest factor is that we have recurring costs: the sync server and the licensing fees for Ideal Sans, Vesper’s typeface. We’re losing money every month.

I’m a designer and I care about type, but what I care about more is if my startup can actually get off the ground. I’m not saying that not licensing Ideal Sans would’ve turned the story around, but what I’m saying is licensing type is much further down the road.

I may not have been the only one observing this, because I’m realizing the day after (since this post was sitting in the drafts), that said paragraph was rewritten after publication, so now it reads:

We’ve been asked “Why now?” Why not just let Vesper and Vesper Sync keep going as they are? The biggest factor is that we have recurring costs: primarily, the sync server. We’re losing money every month.

An interesting choice of words, because the following information could have been just added to the paragraph above:

Product vs. marketing illustrations

Meg Robichaud (illustrator at Shopify) wrote a nice piece on the different types of illustrations both for product and marketing (~brand). Icons, spot, scene and editorial illustrations get introduced and looked at both from product and brand perspective. Here is the gist of it:

Icons in product: power and available features
Icons in brand: navigation, to inject some branding
Spot in product: to be read, “hey look at this thing” and just straight up show you the thing
Spot in brand: marketing illustrations say “holy butts did you know about this tho??”, feature call outs
Scene in product: explain complicated ideas, mainly in onboarding
Scene in brand: explain, but also why is it relevant, “how it works”
Editorial: complement the content, capture the mood

I also liked her checklist on icon design consistency:

– Corner radius
– Line treatment (stroke weight; cap treatment; ect)
– Overall weight (ie. if each pixel was a drop of paint, would they all make more or less the same tone when you mix them together?)
– Use of colour
– Are they all tilted (or not tilted) at the same angle?
– Do they handle connecting pieces similarly (either by leaving spaces or by finding ways to connect multiple objects)?
– Do they have either relatively similar silhouettes (eg. all contained in circles) or relatively unique silhouettes?

If you’re this far in reading, read the whole thing.

Visual design comparison between Chrome 51 and 52

New window chrome visuals land in Google Chrome 52 by the fantastic Sebastien Gabriel. Here is Chrome 51 versus 52 animated (click to see the 1:1 version, sorry no retina):

There is a new incognito design, which is now dark, like a sith lord. I dig this, very tight and fresh. You could argue about the tab shapes (I’m expecting an outcry from users), but it doesn’t hurt to go bold at times.

Since I’ll be working on Android apps too, I’m going to read his excellent article with lots of detail on how he redesigned Chrome for Material Design (part 1, part 2).

This is actually how the future will start with flying cars everywhere

Elon Musk:

You will also be able to add your car to the Tesla shared fleet just by tapping a button on the Tesla phone app and have it generate income for you while you’re at work or on vacation, significantly offsetting and at times potentially exceeding the monthly loan or lease cost. This dramatically lowers the true cost of ownership to the point where almost anyone could own a Tesla. Since most cars are only in use by their owner for 5% to 10% of the day, the fundamental economic utility of a true self-driving car is likely to be several times that of a car which is not.

Just imagine where this will go.

Nintendo is releasing a miniature NES with 30 built-in games

The Verge:

[Nintendo] announced what it’s calling the Nintendo Entertainment System: NES Classic Edition. It looks just like a NES, only a lot tinier, and it comes with 30 games built in. You can connect it to your TV via a HDMI cable, and it also includes a controller designed to work just like the iconic rectangular NES gamepad.

It’s coming in November for 60 dollars. I wish Nintendo would add some kind of achievement system into the games so I can max every single one of them. (Ironically this week my father in law found my wifes old NES and SNES in the basement with a couple of games.) I also need to get a JVC TM-H1750C. And, of course, a basement where I install everything. 🙂

7 Problems Growing Design Teams Face

Aarron Walter on growing design teams:

Designers are finding themselves embedded in cross-functional teams with engineers and product owners. It’s a great opportunity to learn from others with different perspectives, but it often leaves designers craving the feedback and camaraderie of other designers that’s needed to improve their craft.

Having worked in a larger design team this really hit home. I don’t think we were able to figure out how to work in cross-functional teams yet be together as a design unit with our own set of culture and rules. I really enjoyed being among designers, but siloing designers does not work either.

There is a new type of team emerging around design systems: Design System Ops.

I think I have my own understanding what this could be in a smaller organization. The 20% rule to help you grow is also something worth considering, but it’s not exclusive to designers. Good article.

Fabular: A Medieval Space Folktale with Action-RPG and Roguelike influences

Fabular is going to be a fine indie space game with axes! The mechanics reminded me of Star Control, but the art is much more interesting and there are other gameplay elements to make it even better. Here is the trailer:

This game is special, because it’s being developed by one of my friends and the team is crazy small: they’re only three people. I’m in a constant awe how they were even able to pull off what they have. I remember last April, when Milan B. showed me the game at a birthday party, it was merely a concept. I wished him good luck and that was about it. Then a year passed and about month ago they launched the Kickstarter campaign. I was impressed!

There are only 3 days left to fund Fabular and they’re a mere £4359 short of their initial 25k ask. I have only once supported a project in Kickstarter but this will be my second one.

update: Successfully raised £26,093 with 1,102 backers

App Store and new Google Play badges for Sketch

I finally updated my old badges with the new Google Play logo and color theme. If you’re a Sketch user, you may find this useful as this is a version that you can start working with. Uses the same sizes for both versions. Origin story: last year I was struggling to find a decent version for reuse. Google only offers a shitty EPS file. (Good luck getting that one into Sketch with the proper RGB color gradients.)

You can download the Sketch file from below. Enjoy!

Download: app_badges.sketch.zip

Catching the Hylian Loach in Twilight Princess HD

Over the weekend I completed The Legend of Zelda: Twilight Princess HD to 100%. I acquired everything this game offers and had a terrific time playing it for two months. The last thing I had to do is complete the fishing minigame (with the 64 rollgoal levels) and the very last collectible was catching the legendary Hylian Loach. I spent the whole weekend trying to do this – I eventually succeeded.

I got so enthusiastic that I also had to make a tutorial video. While struggling with the Loach, I couldn’t find a decent one on the internet, especially not for the Wii U HD remaster. Here it is:

I really come to like this game, the HD version is amazing. It offers an entirely new dungeon experience, called the Cave of Shadows, which is not a traditional dungeon, but one where you need to fight interesting enemy combinations in wolf form. When I first heard about it, I scoffed, but in hindsight, it was perfect, challenging and rewarding.

Then it was time for the fishing minigame: you need to catch 4 fish to fill your fish journal, then lure fish the same types in the Fishing Hole. I spent 20% of my time catching everything but the Loach and 80% trying to get him. We’re talking hours. Most of the time, when I got his interest, it went away and I was like this:

Or rather like this:

Looking back, I can’t even believe I did it, but then again, this challenge made me appreciate the whole minigame and, as with many minigames in the series, you really understand the game mechanics when you catch the hardest.

This photo almost feels like real now:

FWIW, Here is a list for bobber fishing and where to find them:

Greengill, Hyrule Bass – go to the Hole, it’s easy from the banks
Hylian Pike – at Lake Hylia, just outside the spring there are a few
Hylian Loach – at Lake Hylia Howling Stone, there is a dig spot with many inside the cave
Ordon Catfish – at Ordon village, cast from the mill

Cool. I will now 100% the Wind Waker which I left to rot back in 2014.

Thoughts on Hyper-reality

Keiichi Matsuda made this video that shows what a mixed-reality world could look and work like:

The graphic design is vivid, crazy and pops all the time. To the fresh eye it’s very chaotic and is very difficult to comprehend what’s going on, but that lasts only for a couple of seconds and suddenly you immerse in the rich interactions and visuals. It’s not very hard to draw a parallel line between the user in the video and one who has a miriad of apps installed on their Mac. If we showed a video of that Mac screen to someone living in 1981 the effect would exactly be the same.

At 3:50 in the narrative the AR device is being restarted, so you get to see how many layers were composited on top of the original footage:

If you notice there is a fake ceiling in the AR version of this scene. What is the extension of actual structures are good for? If you’re walking on the street and you see people with augmented objects around them, your senses get confused after a while and you might end up doing things that can end up in potential danger. In the video the AR shows incoming traffic on the street with expressive visuals, but I see this something working the other way around in practice:

What if some visual obscures real traffic on a busy street like this? Seeing stuff appearing around people on the street you won’t even be able to walk among people. By forcefully pushing the line from real to augmented you’ll inevitably end up creating real chaos. Then again, this is nothing different than having many apps running at the same time.

The Paradoxical Commandments of Leadership, by Kent Keith

The Paradoxical Commandments were written by Kent Keith in 1968, when he was 19:

1. People are illogical, unreasonable, and self-centered. Love them anyway.
2. If you do good, people will accuse you of selfish ulterior motives. Do good anyway.
3. If you are successful, you win false friends and true enemies. Succeed anyway.
4. The good you do today will be forgotten tomorrow. Do good anyway.
5. Honesty and frankness make you vulnerable. Be honest and frank anyway.
6. The biggest men with the biggest ideas can be shot down by the smallest men with the smallest minds. Think big anyway.
7. People favor underdogs, but follow only top dogs. Fight for a few underdogs anyway.
8. What you spend years building may be destroyed overnight. Build anyway.
9. People really need help but may attack you if you do help them. Help people anyway.
10. Give the world the best you have and you’ll get kicked in the teeth. Give the world the best you have anyway.

UX of the Honda CR-V 2nd gen

We have an old family Honda SUV (which is now clean as new by the way). At some point the remote control of the car stopped opening the rear door, but I didn’t care, we can still open it up with the keys. The process for opening the door was so weird, I thought it warranted for a UX blog post. 😀 Here is the lock:

The question: how do you open and close the rear door with the key? I wanted to post this question on Twitter, but then I realized it’s not how real life works. In real life you don’t UX-analyze things. You go to the rear door with a screaming girl in one hand, a melting chocolate bar in the other, and there is even a TV remote sticking out of your back pocket. How did the remote end up in your back pocket? Who knows! The only thing you want is to put SOMETHING into SOMEWHERE then expect the result to happen. You don’t have the time or leisure to look at things.

I didn’t even see the dots! This is exactly how I, as a user of this interface, went about it: I inserted the key into the lock and turned it left, then I was expecting the door to either open OR close depending on the previous state it was in.

And I did that exactly. The door opened, and when I was out in the city (in an even more complicated child situation) wanting to close the door, I put the keys in, I turned the same direction and the rear door was still open. I tried turning the other way around, then the back window opened. I retried the whole thing a couple of times, then I labeled the issue as something that a car electrician needs to fix. I even took the car to the expert who almost started to tear the whole lock down when it dawned on me.

[cue in cloud explanatory music from Captain Disillusion]

If you’re sitting in a comfy chair sipping precious liquids of your choice while looking at this photo, you can immediately see three dots as markers. Maybe they indicate something. At first I thought there is two information hidden in here and this is the grouping:

You can do one thing by turning the key to the left and you can do another by turning the key to the right. I figured if I turned my keys to the left, I opened the rear door. If I turned my keys to the right, I opened the window, right? In reality this is the grouping:

The solution: red – open, blue – open window, yellow – close. You need to feel how far you can turn that key until it closes. Turn it a bit more and you pop the window open. You need to learn all of this.

Did the designers of Honda make a horrendous mistake? I honestly don’t know. How would you have solved this design challenge? You have a lock and a key, but you need to operate three things with it.

First of all, it was my sole assumption that by turning the key to the left it reversed the previous state it was in. I don’t know why. Maybe it’s not even a good thing because then you need to manually check, by pulling the lever, if the door is really closed. I don’t mind that, but maybe you do.

I have a quick fix for the whole mechanism though: let’s leave everything as is for now, but switch the the yellow and blue dots. You rarely open the back window, but you do want to close the door frequently. This way if you need to open the window, you need to turn it halfway. All you need to learn is: left – open, right – close, in between – window.

But here is the thing: I don’t want to learn. I want to use. I see a keyhole, I want to put my key inside and I’m expecting the mechanism to either lock or unlock and maybe give me a feedback about it. A short chime perhaps?

Sketch 3.7.2 wrongly calculates combined shapes’ shadows

Here is an icon:

Let’s turn the fill off. What should we see? The outline cast shadow inside, bottom cast unchanged. Yet, the cast shadow renders at a different value:

Turning off or deleting the fill doesn’t matter. Actually, when the fill is applied, the Y Offset for the shadow gets halved, on the first screenshot it’s 1 pixel (instead of set 2).

According to my testing, this only happens if we have combined shapes. If I have a simple path with a fill, a stroke and a shadow, it’ll play out as expected. You can download the test .sketch at the end of this post.

My previous bug report from February still remains unfixed in 3.7.2. 🙁 Now I have two reported bugs. The plot thickens. update 170102: this has been fixed

update 20160519: