Blog Title: TurboMilk: visual interface and icon design

Downloads: Zoom-eyed creatures

• Download for Mac OS X
• Download for Windows
• Download in PNG

If you ever get a feeling of being followed, this is quite normal. Do not worry, it's not paranoia. You are being followed by a team of picked zoom-eyed creatures. They have popped their eyes and are full of attention.

Turbodesigner Olesia Kozlova have drawn a set of icons with the nicest goggle-eyed creatures — champions of staring contests. You are free to do whatever you want with them but be careful not to let them subdue your mind. Take this hypnotoad to start with.

Web sites: Dribbler

Our dear friends from Thematic Media once tasked us to draw layouts for Dribbler, social network for soccer fans. This network serves for publishing multimedia contents, discussing matches, rating players of favorite teams, forecasting match results and much more.

“We have several templates that we tried using for modeling the layout for soccer fans' networks but we ended up with crap. Your GUI kungfu is able to produce far better stuff and we want Dribbler to really rock :)” Denis Kryuchkov, Thematic Media

We decided to make light text-based design with minimum graphics and with large headlines. For a real soccer fan the juicier the content, the better and all bells-and-whistles can wait.

Site's home page

Dribbler's hallmark is the information board similar to the one of a real stadium. Sometimes it displays truly valuable information in a specially designed font.

And sometimes, not so valuable:

In its essence, the Dribbler's pages are made of different information blocks that fit together as in Trefl puzzle. We have used all of our affection to draw each and every one of them individually:

And even if the headings seam to be simple green text, every one of them has a cute icon:

User's filter was shaped as a toolbar:

And Clubs section accommodated both the toolbar and a dropdown filter:

We have carefully penciled many internal pages. Here is just a small part of them:

List of soccer clubs

Post a new topic (“feint” as they call it in Dribbler)

Player's profile

Match result

List of users

User's profile

Characters: Brain Slug for Habr

Even on such web resource as Habrahabr it happens that a visitor finds himself on a page that does not exist. In this case the server sends a 404 error message. In order to somewhat sweeten the troubled user, we decided to draw a funny picture.

People at Habr love UFOs and Futurama cartoon series. So we have picked the plot for the picture where a habrauser is attacked by a brain slug. (drama)

Brain Slugs are small, the size of a fist, single-eyed aliens of fluorescent-green color. They try to get on top of a man's head and once there, they assume total control over the individual. Once the slug is removed from the head, the victim momentarily returns into his normal condition.

Beside the presence of a slug on top of the head, an invaded victim can be easily recognized due to monotonous voice and the manner of addressing himself in the third person. Having gained the control over a person, the brain slug tries to manipulate him to maximize the invasion of his mates over the largest number of victims possible. Brain slugged people have even organized their own political party with the main agenda to make huge transfer of funds in favor of the Brain Slug planet and complete global infestation. List of secondary Futurama characters (Wikipedia.org)

Like always, we started with pencil sketches:

Then we selected the right direction (canonic Habrauser image) and redrew everything from scratch but nicely and with attention to detail:

Now landing on a missing page in Habr is loads of fun. You should try it someday.

We were so carried away with sketching slugs that yet another image of Habra life was produced. We decided to picture the historic meeting of a brain slug with a UFO.

Some might disagree: “The slugs got no mouth there! It is covered by tentacles”. But it is our slug and we draw it the way we want!

Cookbook: What icons are for

You would not believe it but in 1985 Apple asserted an idea in its developers' guide to replace text messages with icons wherever possible. As though icons would be more clear to a novice user than words. Of course this is bollocks. It is much easier to express any idea in words.

So, unless you are designing an interface for a graphics editor, a picture is worth a thousand words as the saying goes.

Lower 6 icons clearly display the results of using the respective tools.

Such approach is also applicable in CAD/CAM and architectural software as well as other WYSIWYG-based interfaces. But how often do we, humble GUI designers from Samara, engage in such projects? I confess, not really often. The truth is that in the modern digital world we more often deal with things without any visual incarnation at all.

Real-life example: “Forming document” icon for a legal software package. It describes a document that contains a reference to another document to be replaced with a newer edition by making such and such changes. Great, is it not? It is hard to describe it even in a full-size sentence. And it is even harder to grasp at once. Perhaps a visual aid such as the chart below can help understanding this concept:

But placing it on a small icon and making it understandable for a novice user? It's riduculous.

If we admit that in most cases it is easier to describe a concept than to display it, why would we even bother using these icons? Maybe for the sake of saving space? Indeed, toolbar icons are 16×16 pixels. Descriptions are usually larger. However, I personally do not want to believe that by drawing icons I simply help placing 100 unnecessary and useless commands on a screen space otherwise suitable for just 10 (without my involvement). Besides, let's take a look at the contemporary interfaces of MS Office 2007 and Windows Explorer.

We can see that almost every icon is followed by inscription. So we are not talking about space-saving practice here.

So why, for instance, the interface of MS Outlook is literally spangled with icons?

We are not talking about any visual images here, no space-saving is spotted here either (almost every icon is followed by text). In order to uncover this enigma let's imaging that our sight is slightly out of focus.

Oh, hell! We can no longer read any of the labels. At the same time, the icons are notably distinguishable in most cases. What is that black cross? A black cross will always be a black cross for deleting mail. The red flag and colored boxes on “categories” icons are still visible, so that an experienced Outlook user will not get lost.

Does that mean that the only useful function of icons is to help users with dull sight? In fact, no. But this example demonstrates that an icon unlike text can have properties for locating it on the screen. These properties are shape and color. Text messages are not different from each other by shape or color. To distinguish one message from another you need to read it. In the event with icons, you need just a quick glance.

Besides, pictures are better memorized. During one experiment people were shown 2500 slides. Then the same group was shown coupled slides and asked which slide they already saw, and almost in every case they gave the correct answer. And even when they were shown 32 slides in a row, almost all the members of the group could spot the single slide that was not previously demonstrated. What does it tell us? People are good at remembering pictures. An icon can successfully serve as a visual anchor for any function in a user's head.

Having identified the purposes of icons, we now can easily answer the question about what is important about the icon business and what's not. Perhaps you have already guessed that the most important thing about icons is distinctiveness. It was on purpose that my colleague Denis Kortunov made insufficient distinctiveness the number one item in his “10 mistakes in icon design” article. Indistinguishable icons simply do not work, they merely occupy screen space: one cannot easily find them on the screen and they cannot serve as a visual anchor. At the same time such property as “purpose clarity” is not nearly as important, although it may sound somewhat resonating.

Moreover, the pursuit of “clarity” through sacrificing distinctiveness can only do harm. One of the most ridiculous goals that an icon designer can put before himself is to make icons without text understandable by a novice user. We always try dissuading our clients who consider this goal important and reachable. I hope I was convincing enough for you, as well as for the audience of my short report at 404 web developers' festival. You read above an illustrated story of it. Thank you for your attention!

Photographer: Ignatiev Igor

Journal: Our Clients is all we got

Our clients are the most wonderful people. We are grateful to them for becoming what we are in our market arena. As a token of appreciation we made this page devoted to them. (Frankly, we that page before but we have completely reworked it and while doing that we felt kind of nostalgic.)

Cookbook: Supermarket interface or Cart 2.0

When I visit a supermarket I sometimes engage in somewhat indecent activity amidst endless shelves with groceries. I like to peek into other people's carts. I observe what other people buy. But it is not some useless habit. Sometimes I happen to like some buyers and I pick the same products from shelves. This way I have discovered for myself a range of tasty products and many extraordinary but useful things.

And what if we add some web 2.0 into a conventional supermarket? What if we turn it into a hi-tech activity. Clearly one of the main attributes of a supermarket is a cart. So let's start the cart evolution.

A cart consists of a handle, a basket and a set of wheels — we are going to leave all that but add some new features to make it contemporary and even more useful:

• A touch-screen. In the future all the things will have touch-screens;
• We build in a wi-fi adapter or its analog to wire all the carts into a LAN;
• We label all the products with tags that can be read remotely. We place a scanner inside the cart to identify whether a product item is inside the cart once we place it there.

What do we get from all that?

• The cart automatically detects all the products and gives us a shopping summary in real time;
• You can read details on each product: ingredients, calories, etc. You do not have to peer at the minute font on the package;
• Feedback. You can award points to each product and see how other shoppers rated it. You can leave short comments;
• From the item above we gain ratings and now the cart can make suggestions on what to consider;
• You do not have to wait until the cashier scans all the purchases. You just need to swipe your card or pay in cash the amount displayed on the cart's screen;
• The cart's screen can also show ads, and the ads can be very closely targeted considering the contents of the cart;
• If a supermarket is large and tangled, the cart will be able to locate itself (for instance by triangulating the wi-fi routers). So selecting “meat” out of the list of departments automatically directs you to the right aisle.

The future is bright!

Journal: Apple gave up – the new Mac OS will have the same gamma correction as Windows

It rumored that Apple is intended to change its default gamma correction value in Mac OS Snow Leopard. From the ancient times this value was set to 1.8 and it will be replaced with 2.2 (exactly the same value as in Microsoft Windows). What does that mean to us? Images will look the same in both operating systems (right now the difference can be spotted in dark areas). And the operating system [Mac OS] itself will look different — GUI elements well get darker and more contrast. We are curious if they redraw Mac OS to meet the new gamma value? And what would happen to the icons that have been already created?

Characters: Smynx

BOX UK had a craving for a Web 2.0 site without common clichés like pictures with happy people, so that the site is illustrative and positive at the same time. “This we can do!” — responded Turbo-designers — “Why don't we come up with a character that will live on the site?”

Project Smynx was built around the concept of a place where people could share stories about spending some quality time not only on the individual basis but also by mingling together in theme groups.

As it usually happens with this kind of projects, we started with sketches and drew something funny:

Then we penciled a logo:

If you see some funny thing hovering down in a parachute with an inscription at the bottom do not be confused, this is the logo of Smynx.

Most attentive among you will guess right that the yellow creature is a stylized light bulb. The thread proves you right! From the dawning days a bulb served as a metaphor for a great idea! We explored on this concept and made a significant improvement: we made our bulb emotional.

On the site our character shows various ways of having tons of fun including going to extreme.

Well, Smynx is a good lad after all!

Journal: How much?

We keep hearing from many people: “Why don't you display anywhere on your site how much your icons cost?” And we depress our eyes and mildly ask to send us an email for quoting in response. But everything changes. Turbomilk wants to be a simple and clear service. We have finally published a page with prices for our services. And we also made an FAQ page to address any issues you may have.

Journal: iPhone wallpapers

We are unbelievably happy that Apple has finally launched iPhone sales in Russia. “Better late than never”, so to speak. To mark this occasion we created wallpaper for the iPhone in Turbomilk style.

Journal: Microsoft MVP

As it happens Microsoft has awarded Turbomilker Denis Kortunov the Microsoft Most Valuable Professional title in Expression. Now we will gain access to the knowledge from the secret Redmond’s labs and the supporters of “Turbomilk was sold to Microsoft” theory got another trump up their sleeves. Everyone is happy!

Journal: Homepage.ru

The staff of our little but proud icon-making company would love to congratulate with all its heart the site about “how to live in Moscow” on its launch. Frankly speaking we never expected that everything would turn out as cool as it did. Long live Homepage.ru with many visitors roaming your pages! Besides, Turbomilkers were also involved in production of this site.

Cookbook: Interface to the past

Many people fail to differentiate between a GPS receiver and a navigator but it seems to me that the scope of application for the global positioning is much wider. If you fit a GPS module into simple and utilitarian things, you may create new and surprisingly useful possibilities. And if you through in the Internet and add some social networks ad gustum — the impossible becomes real.

Bad are the data that forget their roots.

For example Flickr stores a lot of information inside every picture: time, date, camera settings, etc. Also, each picture can hold coordinates of the shooting site — a geotag. If the pictures are available for the public use, you can easily see what happened on a certain day in a certain place. It is true that many people are too lazy to mark the location.

This is how Samara appears on pictures. So far there are just a few pictures of our city available.

What if we build in GPS receivers into every camera? Millions of pictures from all over the World would leave a snapshot of each day. How much stats could be generated from it — contemporary search engines would weep in the corner.

Pictures are fine; this is at least somewhat fathomable. But what if we equip every camcorder with a GPS?! So that every 5 seconds the location’s coordinates get recorded. Then a cameraman would post its video on the web (on one of the videohosts) and voila.

What do we get? It is merely an interface to the past! We can see what happened in a particular street in a particular moment in time from different angles, at different resolutions and with people’s commentary.

We are not done yet. The image recognition techniques are being developed at insane rates. What if we hallow them to this video streams?! We will get a virtual space but not a banal 3D version of it. No. It will be 4D, since we will be able to travel in time. And what if you wear a GPS watch from birth? One could rewind his all life at leisure. Sounds cool?!

The future is bright!

Case Studies: Stitcher iPhone Application

Apple does whatever it takes so that the coders could not screw things up with their bare hands. In the process of designing applications for the iPhone this ideology reached its peak. First, they wrote a humongous manual for designing interfaces. Secondly, all additional typified effects were no longer a designer’s concern – everything was automated. Our work seemed to have simplified but the overall tension just grew. “We’ll draw and then what? What if we do something wrong?” — we worried.

It all started with the tab bar icons. The tab bar is a dark stripe with bright icons in the bottom of the screen. Icons here are used to select the current section. Sometimes when a section is selected, icons become caramel-blue. Fortunately this was not one of our worries. All we had to do is to make white PNGs with transparency. The task was complicated by the fact that two sections out of five demanded standard Apple’s icons. So we had to do the remaining three:

1. Settings;
2. Topics;
3. Sources

The work with the last two went smoothly but the gear did not come out as easy. It was partially our fault. We should have drawn an Apple-friendly gear in the first place but instead we went with something resembling a sailing steering wheel.

We finally did it! The icons joined the bunch as the rightful cousins.

Besides, we had to create the application icon based on the logo. The iPhone icons are such squares with rounded corners featuring a glossy flare and a pretty modest shade. All of this, including the corners is done automatically. All we had to do was to produce a fancy 57 by 57 pixels picture.

The client persisted with creating something more 3D than the existing logo. His wish was our command. The portable radio from the original logo gained some volume and sound waves radiating in all directions.

When we thought it was all over, we found out that a huge (512×512 pixels) picture was required for the Appstore. So we had to redraw the picture to increase the level of detail.

Although being a bit late for the show, our debut in designing for the iPhone turned out to be successful. Check out the Appstore for your free version of Stitcher.

Journal: Tornado in the bottle

You might have already noticed that we here at Turbomilk promote creative thinking with regards to everything including simple things. Take, for instance, our long-suffering bottle! It appears that with some knack you can create a real tornado or gobbling twister inside the bottle. Such harmless tricks brighten up our working days. And what kind of office entertainment do you promote?

Icons: Habrahabr

Our designers respect and often visit the web resource mysteriously named Habrahabr. Beside the name, it features its own terminology, weird navigation and very smart content. It happened so that Habr’s developers decided to refresh the project’s appearance with its new version release.

Realizing all the heavy burden of responsibility, Turbomilk’s designers went to work. First we needed to pick the style for the icons.

— What’s the most important about Habrahabr?
— Karma?
— The hell with Karma! The most important thing at Habr is the content! Logical conclusions of designers

We decided not to make the icons too bright in order to avoid distracting the Habrafeed readers from topics. This panel set the overall style:

Small icons have no shadows, although they may have different states. Larger topic icons cast slightly visible shadows.

Habr’s developers liked the icons and we continued the work. Blog and company icons came out next.

The Habrindicator icon deserves a separate story. This icon is one of the most important for it indicates the might of a habraperson. In the previous version of Habr it featured a bullet. New Habr deserves new weaponry! We drew an aerial bomb which is by far more powerful than a bullet.

This icon evoked huge interest among habrapeople. Some thought it was a mortar bomb, others – confused it with a dirigible. There is no official name for it yet, some call it a “Habrabomb”, or “Habragible”, and some – simply “Bomb”.

Then we drew icons for the toolbar on the page for creating a new topic:

If you enlarge the “Insert a picture” icon, you will see a Polaroid snapshot of a UFO that spawned a number of legends at Habr.

The old Habr used a metaphoric electric plug for subscribing to a blog. We have expanded on this idea and made the icon more clear and united it with the “blog’s profile” function.

We enjoyed working on this project a lot and hope we could please even the pickiest of habrapeople.

Case Studies: Dribbler

We wished to continue the line of TM's logos and wanted a logo for Dribbler to resemble the logos of Autokadarba and Habrahabr. Both logos display the intertwined connections and portray the same idea of interweaving. For Dribbler it could be football boots, some kind of heap of boots :) Denis Kryuchkov, Thematic Media

First we wanted to digress from the idea of boots, since we could always set aside some time to draw them. And what else can be placed on a football site's logo? A classic football was never an option, at least by itself. Maybe we could expand on the idea of global appeal in our times of globalization so to speak? Clearly, the "ball = the Globe" metaphor has become corny and we went the alternative way and drew a football field globe:

It came out funny but we spotted a couple of problems. First, it was too bulky for a logo. Almost like wiki's logo — hard to cram into a favicon. Secondly, what about the name — Dribbler? We sketched out a generic football site's logo with no relationship to Dribbler. Maybe Dribbler needed not a mere logo but a character?

This idea has resulted into this creature:

Dribbler is one but there are a lot of us in it. Interweaving and the whole kit and caboodle. Tangled hands and legs with some Buddhist face that we do not want you to worry about just yet.

Later we applied the hypothesis that a footballer does not really need a head and hands and drew this Frankenstein:

Denis Kryuchkov from Thematic Media got frightened by our fantasizing and asked us not to send any more sketches but instead draw a footballer with multiple legs and a ball for a head. So we did:

The client was really pleased with the character-like logo. And TM grabbed it by it's hands and all the legs to place it on the site.

For EURO 08 we clad our Dribbler into the official uniform of the Russian team:

We had so much fun working on this project and the end result made us really proud.

Identity: Dribbler

Dribbler is a football fans community with RPG elements. The project was created for communication and self-expression of people ultimately involved into the game of millions. We created a bright and funny logo for this project. Now nobody will ever confuse Dribbler with another football site.

You do not get the idea? We have a story to tell about making the logo

Journal: Conquer Facebook

We have clearly decided that we need to conquer absolutely all social networks. The first one in our list is Facebook. You cannot escape it! Please do not forget to add yourself as our fan.

Journal: Friday game

Today is a Friday. This means it's time to shoot some bugs.