Blog

Later Ctrl + ↑

Correcting the capture time of your photos

I prefer my photos’ metadata to include the correct capture time, regardless of which timezone it was taken in. But I would never spend time to figure out how to adjust the built-in clock on my camera. And even if that was easy, I would always forget to do it anyway.

So when I travel, I just take photos of clocks and then use those to adjust the capture time of the whole set. Usually there are plenty of clocks on transport systems, and, as you know, photos I take mainly have to do with transport. This one is from the London Tube:

Correcting the capture time of your photos

In Lightroom, I select the whole set of photos from some trip, then choose a photo of a clock (this does not void the selection), and then I set the photo’s capture time to whatever the clock displays. This makes Lightroom adjust the capture time of all selected photos accordingly.

This method is great because it does not require any discipline: you can adjust time whenever you want. A couple of days ago I needed a photo from 2005, and it had the wrong capture time. I just found a photo of a clock in that set and corrected the whole set in a matter of seconds.

Sometimes І would notice an accidental clock or watch in some photo and just glance at the capture time. Yep, it is all right with this one from Trafalgar Square:

Obviously, the ideal camera should know the time without any action on my part, as the iPhone does. Or, better, the camera should be just an iPhone dock. But this is unfortunately not the case with my Canon.

One-legged women and toilets

The eternal mystery of signage design is that women on the toilet signs often have just one leg. They are all over the world:

Ångström Style System for Cocoa

While developing Ångström, the unit converter for the iPhone (check it out!), Alex Babaev and I have come up with the Ångström Style System.

ÅSS (hey, why not) is a JSON-driven styling engine for Cocoa with Dropbox synchronization and shake-to-refresh. It is a great way to separate the code of the app from its look and feel. It helped me try out different aspects of the color scheme, the fonts, the spacings and, most importantly the animations, without making Alex rebuild the app every time I wanted to change something.

Playing with the text caret

One of the many things we were obsessing over in Ångström was the text caret animation:

This is an animated gif, make sure to download the app and look at the real thing.

I wanted the caret to stick out much below and above the text. I wanted it to move like an elastic and bouncy string (whatever that is). I wanted to make it stretch and squeeze, not just blink. There was no way I could explain this in technical terms to Alex. How far the line should stretch? How fast the animations should be? Who knows. I needed a way to play with all the parameters until it felt right.

So I wrote Alex a letter explaining my idea in vague terms. I asked for a way to control the length and the opacity of both the long and the short states of the caret and the transition times between them. After having played with this parameters for some time I figured out I could not make the caret behave exactly as I wanted. Six variables were not enough. We have gradually added the variables for animation easing, the delays and the caret width.

This is the final “stylesheet” for the caret, after hours of tweaking:

"cursor": {
  "showTime": 0.2,
  "hideTime": 0.2,

  "color": "@colors.textNumberColor",

  "period12": 0.4,
  "timingType12": "linear",

  "period21": 0.2,
  "timingType21": "easeOut",

  "height1": 48.0,
  "width1": 2.0,
  "delay1": 0.3,
  "alpha1": 1.0,

  "height2": 78.0,
  "width2": 1.0,
  "delay2": 0.1,
  "alpha2": 0.33
},

This fragment is actually about 3% of the whole Ångström’s stylesheet.

Dropbox sync and shake-to-refresh

The two things that make ÅSS particularly awesome are Dropbox sync and shake-to-refresh.

Moving the style variables from the code to an external file is a useful idea all by itself: I could have been playing with the parameters and rebuilding the app having no clue about Objective-C. As far as I understand, this is how Brent Simmons’s DB5 works.

But we wanted to make ÅSS a real pleasure to use (no pun intended), eliminating the need not only to rebuild, but even to restart the app. Here is how the process of refining something looked for me thanks to ÅSS:

  1. Open the app on my iPhone and go to the screen I want to adjust.
  2. Open the app’s ÅSS stylesheet from the Dropbox folder with Sublime Text on my Mac.
  3. Change the parameters in the file and save it.
  4. Shake my iPhone to see the change immediately.

So this is literally live tuning of a running app.

There is a different approach to styling: put sliders with the parameters to the Settings app during development. While this may look nice, we think it is very counter-productive. You don’t want to be constantly switching between the app you are designing and the Settings app. You don’t want to be scrolling through tens or hundreds of variables on the iPhone screen. You don’t want to struggle entering a color’s #rrggbb value on the iPhone keyboard. Sublime Text on a computer synced with the iPhone via Dropbox works so much better.

Alex has written a post on the internals of the system, check it out. It explains the architecture and features some code examples.

Left and right

One of the most used wayfinding method is a phone call. A person calls their friend and gets some voice instructions on how to get somewhere. For this to work, the person should know the left from the right.

Some people have a hard time figuring this out. Here is a sign to help them:

Ångström, the unit and currency converter

My friend and a great iOS developer Alex Babaev approached me with an idea to make a unit converter for the iPhone. What? Aren’t there hundreds of them on the App Store already? But after a short discussion it became clear to me that none of the ones that existed were good.

All the converters had stupid menus with categories and icons, as if the designers were thinking about a nice Dribble shots instead of the utility of their apps. By the time you make it through the user interface and set it up for the conversion, you forget what you wanted to convert in the first place.

So we did it our way. Our product is called Ångström:

We have started from scratch. You have a number in your head, you want it converted stat. You do not want an endless list of categories distracting you.

We ask you for a number and strive to give you the answer with as little taps as possible. Ideally, with zero taps. That is why we check out your clipboard first. We use the units from the previous convertion before you change them. We show you your unit history before you have started typing the unit. We try to guess the target unit i. e. we know that it is natural to convert feet to meters, but miles to kilometers. We learn what you convert to make better guesses over time. We keep currency rates updated, but show you approximate values when offline. We support alternative spelling of many units.

The version 1.1 has just been released. We invite you to have a look at what we have done. Ångström has been “In Review” for five days. Presumably, Apple employees were playing with the equals sign and just could not stop.

Yep, we have had lots of fun with the animations and transitions. If nothing else, this alone is a good reason to test drive Ångström. Every tap is welcome. And if you don’t feel like tapping, you can just run the app and enjoy our text caret animation for hours. For some reason, I, personally, particularly love it.

Download in the App Store for free

The free version includes most units for daily use. An advanced unit pack is available as an In-App Purchase.

Francesco Franchi on form and substance

Francesco Franchi, in Designing News:

It is therefore necessary to rediscover graphics and typography as keys to journalistic expression. Not just as embellishment or aesthetics, reflecting the old Aristotelian view of form and substance as separate and opposed, but as a way of making form itself into substance. The distinction between form and content is therefore fictitious, and exists only when it refers to a division of tasks and competences (hence the need for effective forms of communication within editorial offices).

What makes Macbook Air look ancient

Here is a picture of a MacBook Air from the Apple’s website:

If there is anything that makes this machine look ancient, it is the screen bezel. I don’t know how much thinner it can be with the current state of technology, but it really needs to get thinner. Hopefully, Apple does that with their rumored update.

What is Brick?

So this thing, Brick. What is it? It says:

Webfonts that actually look good.

So it is a list of good fonts for the web? A collection of them? A book on them?

There is no explanation .There is no About link. There are just two buttons: “Get stated” and “Browse fonts”. So presumably I get started with the fonts by doing something else than browsing them.

Below, I see a heading: “Why Brick?” Wait, first of all what is Brick? The question “Why Brick” makes no sense to me. It says: “Beautiful”. What is beautiful? The fonts? The website?

We don’t modify or subset the font in any way, so they are rendered the way they were meant to be seen.

That is amazing now that I know what you don’t do. But what do you do? Why do you even say that you don’t modify or subset the font? I mean, me too, I don’t modify or subset fonts either. Heck, I should put it on my frontpage! (Is it what everybody else does?)

It then says: “Fast”.

Brick is served to your users through Fastly’s industry-leading CDN network throughout.

OK, so Brick is served to my users. Why?

It then says: “Open source”. Ok, this probably explains why I can’t figure it out. Anyway, having no other option, clueless and confused I click “Get started”.

And I end up on Github. And the project description starts with — wait for it —

Brick was built to be easy-to-use.

I bet. But I have no fucking clue what Brick is.

Web design 101: Use nouns to describe things.

Earlier Ctrl + ↓