When a web page is loading, images appear in random order, causing unpleasant flashing. Good web developers have learned to deal with the issue by coordinating things with Javascript.

An example would be Apple’s Mac page, where an animated spinner is displayed on top for a couple of seconds, and when the menu items are ready, they appear with a nice animation.

Since coordinating the load process requires tedious programming, it is not what many people choose to do. There are tools which simplify the task to some extent, however the very necessity of programming is a dead end for most people.

Emerge.js changes this.

Emerge.js is a framework for coordinated page loading. It simplifies the task by removing the need to write any Javascript code. The framework uses a declarative approach, where you specify a desired behavior for each element and do not think about the implementation. To make an HTML element wait for its content to load before emerging, use:

class="emerge"

Elements of class emerge fade in after all the contained images are loaded (this includes CSS images). To display an animated spinner while loading, use:

data-spin="true"

The framework lets you coordinate the order and timing and use different animation effects as you see fit, for instance:

data-effect="slide"
data-await="other-element-id"

Check out the product page for detailed description.

Hyperlinks should be highlighted on mouse hover. This provides feedback necessary for the user to feel that the element is clickable. It is equally good to highlight the borders of the images and other non-text elements. I use red as the highlight color, and it works well.

Interestingly, changing mouse pointer from an arrow to a hand is not quite enough. The pointer is my avatar on the screen, so changing it just reinforces the idea that I am aiming to click an element, not that the element is going to respond to my click.

Since CSS provided us with an easy way to add nice transitions to web pages, some designers have implemented fading in and out of the said highlight color. But using fade-in defeats the purpose of the effect: when an element’s color fades-in lazily on hover, the feeling of responsiveness disappears and a page starts to feel numb.

I use only the fade-out transition, i. e. instantly change an element’s color to red on hover, then gradually change it back to blue when mouse moves away. Here are some links to my previous posts to test the effect (will not work in your RSS readers, obviously):

• Large click areas for small elements,
• The principle of one link,
• Timed modes,
• SIM cards must die,
• Everyone is a designer.

Several years ago, if you were to write an article on article titles and you wanted its own title to work best, you would name it something like “Coming up with a great title for an article” or even “10 qualities of a great title”. That was how you attracted clicks.

But recently something has changed. The articles now have titles like “Here is what you should know before updating iOS” or “Look at this amazing picture of Mars made by Curiosity”. As if the first sentence of the text was used in place of a title. The more and more we see these titles that try to shift your attention from themselves to what goes after them. It is the content of an article, right?

Wrong. What really goes after them is a link. That is how twitter sharing works. Now that the title itself is no longer clickable, there no need to attract clicks to it. Instead, a title should look like a direct speech of someone who shares the link, adding to the credibility of the link that follows.

I find it fascinating how technology changes language.

In several hours Apple will unveil its new products, which are believed to be the new iPads, MacBooks and the new Mac Pro.

Some people have speculated that along with the new Mac Pro Apple will release a new 4K display. Or at least expressed an opinion that such a move would be welcome. Particularly, Marco Arment has said in the latest Talk Show, that he would buy one (or even two) immediately.

A new, better desktop display is what I want either, but 4K is not an answer to that at all.

I am currently using the Apple’s 30-inch Cinema Display from 2004 running at 2560×1600 resolution. Unfortunately, noone, including Apple, has since released a better display for me. Apple’s own newer displays, i.e. a 27-inch Thunderbolt display or a 27-inch iMac display, run just 2560×1440. And not only the resolution is lower, these displays are also glossy, whereas I prefer a mirror to be a separate device. If Apple announces a 4K display later today, I don’t see how it can be better than the 2004 one I already have.

There are different definitions as to what 4K resolution means. Let’s say Apple picks a 4096-pixels-wide option. So for a 16:10 display, the resolution would be 4096×2560. Now there are three options as to how to use these pixels.

The standard “retina” pixel-doubling approach will result in an effective 2048×1280 resolution. So I will end up with 36% less real estate than I have now. Also, on a 30-inch display such 2×2 “pixels” will be gigantic and all non-retina stuff will look ugly (and I don’t want to “upgrade” to a smaller display). So this does not work at all. Another option would be to use scaling (as available on the retina MacBook Pros). While scaling definitely looks OK on retina, I want to enjoy razor-sharp pixels on my new display, not some blurry crap (even if it is not that blurry). And the last option would be to use the actual 4096×2560 as is. With Mac’s very poor ability to scale UI fonts, I don’t think I will be able to see anything in such a mode. I doubt this option will even be available without some sort of a hack.

As you see, there’s no way a 4K display can be any better than the good old 2004 Cinema Display. So I hope Apple will not use 4K and will go straight to “5K” with a 5120×3200 30-inch matte Retina Cinema Display. Please?

Many designers seem to not like the size of the circles in iOS 7 icons constructed with the help of “Jonny Ive’s grid”. Here is a fragment from Neven Mrgan’s blog:

The large circle is too big. Many apps in iOS 7 use it: all the Store apps, Safari, Messages, Photos… In all these icons, the big shape in the center is simply too big. Every icon designer I’ve asked would instead draw something like the icon on the right. To our eyes—and we get paid to have good ones, we’re told—this is more correct.

At first, I also liked the smaller “iOS 6 style” circle better, it looked more balanced to me. But I also kept thinking that there was something good about the new icon. Somehow the fact that there were almost no margins around the circle makes it look lighter. Why?

A couple of days ago I accidentally saw a state-of-the-art washing machine (by pure accident it turned out to be Samsung). My own washing machine is about 20 years old, but it still works fine, so I never bothered to look at the new ones. On the left, the washing machine I saw, or the right, my own one:

Notice something? After having seen the one on the left, I can no longer tolerate the old iOS 6 icons. Those gigantic margins make them look heavy and outdated (like the washing machine on the right). The old TV sets’ curvy screens also had very large areas around them, it was technically necessary. The old houses had very small windows, or it would be next to impossible to heat them. But today people build houses where the whole wall is a window. Televisions try to have as thin frames as possible. And washing machines have large transparent doors.

The new App Store icons should be spacious. There is no need to balance the inner and outer parts of the circle: the outer part has no reason to exist at all. At the same time, the bigger the App Store sign is within the icon, the easier it is to see it. Which is a win.

What we perceive as beautiful is largely defined by the technological progress.

Web services send notification emails. The links in such emails serve a sole purpose of bringing users back to the services’ websites. Therefore, there should always be exactly one link per such email. The flow: the receiver clicks the blue underlined text without even reading anything and ends up in the right place.

Example: an email to confirm registration by following a special link

Typical mistake (the links in the example don’t work, obviously):

Dear Ilya,

You have tried to sign up for the Exciting Service. To confirm your registration please follow the link. Make sure to subscribe to our blog to get the latest news and go try our great iPhone app!

Sincerely,
Exciting Service’s team

To take an action, I need to read and understand all the crap that the author has written here.

Here is the right way:

Ilya, confirm your registration:
Confirm and start using Exciting Service

Exciting Service

The right place to tell the user about the blog and the iPhone app is the website itself. You will have more room to talk about them, and the user will be much more motivated to check them out after he or she has completed the registration.

Example: an email to notify you about a shipped online order

Typical mistake:

Greeting from AwesomeBooks, dear customer Ilya!

You have ordered the book “How to Order Books Online” by James Writer (see your order history). The books has been shipped, and the tracking code is WTF4382430324.

Learn more about shipping and delivery, warranty and return policy. If you have any further questions, contact the support.

There are 0 items in your cart. Since you have bought the book “How to Order Books Online”, you might also be interested in “Underlining links: an essential design skill”, “What makes an email notification bad” and “What should one do if he cannot come up with a third stupid book name”.

Thank you very much!

Your AwesomeBooks

Notice how the only thing that interests me, the tracking code, is not a link.

Here is the right way:

Ilya, the book “How to Order Books Online” has shipped to you.
Track the delivery and see more recommendations

AwesomeBooks

The links leads to a page with tracking information, recommendations and all the service links.

It may seem hard to leave just one link in an email. What if you need both this and that? The solution is to change the approach: treat the whole email as a link. There is only one by definition. Ask yourself: “Where does this email lead?”, and it will all make sense.

Obviously, the principle is not applicable to email designed for reading and thus does not lead anywhere.

In the year 1960, my grandpa went to Great Britain as a member of one of the first tourist groups from the USSR. It was quite a trip for a soviet engineer. When he was still alive, he recounted the trip and even showed me this Welsh newspaper with his picture and a mention of him:

But there is something he did not show me, and I did not ask. Among his papers was found an actual map of the London Underground (and a ticket):

It is amazing that he brought and saved it. There is even a name of Harry Beck in the left bottom corner:

If he went to London a year later, I would not be so lucky, as in 1961 the brilliant Beck’s diagram was replaced by the miserable Hatchinson’s one. In 1964 the design for improved but the diagram never looked quite that good.

When I first saw the leaked pictures of iPhone 4, I thought, no way, this cannot be true, it is ugly as hell. Why do all these sites even publish the pictures? Clearly, they are fake.

Turned out, I was wrong: the pictures were real. Interestingly, when Apple announced it, Steve Jobs even had to vindicate the design explaining how the lines on the edges were actually part of an antenna, and so it was a brilliant design. I was disappointed.

Turned out, I was wrong to be disappointed: when I saw the phone in an Apple store, it made a good impression. It looked much, much better in person than in any photos, including Apple’s own official ones.

A couple of years later Apple has shown iPhone 5. To me it looked even uglier than the iPhone 4 on the pictures. But having learned my lesson I decided to not make any conclusions before I saw the device in person. I thought that it will look much better in real life.

Turned out, I was wrong, again: the iPhone 5 is ugly, even in person. I’m still using my old, slow iPhone 4 and I don’t want to switch.

Here is the iPhone 5:

The top is a pain to look at. The camera is positioned randomly in a stripe of plastic:

It wants more air around it, it doesn’t want to be squeezed there like this.

Also look how it’s misaligned relatively to the corner:

And the way this stupid piece of plastic is touching the antenna band gaps on the sides?

So sloppy.

Compare with the design of the iPhone 4:

Everything is balanced, everything is where it should be.

I was hoping that they would change the design for the next iPhone so I could finally have something to replace my old iPhone 4 with. But going by the latest rumors, the design will stay the same, so I am sad. By the way, the rumored “cheap” version (aka iPhone 5C) looks better:

Anyway after you’ve seen and held in hand the iPod touch (no-camera version) everything looks and feels wrong. I wonder, how many years should pass for us to see an iPhone that is well designed?

John Gruber telling a story about two young women and a newspaper on a counter in Starbucks:

I’m gonna just say there are twentyish. And they had a New York Times on the counter in front of them. And one young woman was explaining to the other — and I know it sounds comical, and I don’t think she was stupid, but I think she grew up on the Internet. I wouldn’t be surprised if she was in fact a college student, I don’t think she was living in a cave or something.

But the one really had no idea what a newspaper was, and she said to the other one: “Wait, you mean they print this every day?”

And the other one says: “Yes, exactly”.

And the other one goes: “Why would they do that?”

And she was clearly impressed.

I am also twentyish (okay, I’m 28) and I am also impressed. I find it amazing that people still print stuff. I have no reasonable explanation as to why would anyone buy a newspaper, unless they are a designer liking the layout. I was profoundly surprised by Apple’s announcement of Airprint a couple of years ago: it felt like I was taken back to the 1990s — by Apple, that is. Printing, Apple, are you serious? Come on.

Apparently, printing is still a thing.

Anyway, I was thinking lately: what will look really weird when one watches a today’s movie five or ten years from now? A criminal taking a SIM card out of a phone and throwing it away probably will. What is that thing, right? Or taking an SD card out of a camera to secure the pictures. Why, aren’t the pictures online already?

Fast forward some more years, and we’ll hear questions like, why does he need to hold this thing next to his ear to talk to someone? Why is she holding this thing in front of her saying “cheese” to her children? Why is he holding that round thing in his hands when riding a car? Why does she look so old if she is just 80 years old?

The future is awesome.

One of Steve Jobs’s quotes goes:

If they need a stylus, they blew it

Does it mean that no device and no app should ever be used with a stylus? I do not think so and I suppose neither did Steve. The key word is need.

A stylus for a touchscreen is the same as a pencil for the “real life”. There is a place for it, but it is not required. Your fridge does not require a pencil to open it. Your bed does not require a pencil to take a nap on it. And so your smartphone does not require a stylus to make a call.

But when you draw something, you usually want a tool: a pencil or a brush — or a stylus, if you use an iPad. Styli are not included with the iPads, but make perfect sense as separate products.