Creating a Style That Is Unique

I will have to admit that I am the least conscious when it comes to fashion and other trends, but there is one thing that I think we all know about, and that is style. Like culture, the word has many definitions, but I am referring to the basic appearance of an application, not to mention what it says about the application itself.

Let me take a moment to speak to those who are coming up with gaming applications, which is a very popular type of application now. In fact, you will see from many of the Android application rating sites mentioned in Chapter 2 that several-best selling apps are gaming ones. It is important to get the game play right in your game, but the gaming applications that really take off are the ones that present their games with style.

Think about the surrealistic puzzle game Myst in the early 1990s, or the apocalyptic art-deco influence of Bioshock from the last decade. Why did those games create such a phenomenon? The designers created a world that was uniquely its own, and the unique style of this world completely sucked gamers in. Even a simple game like Angry Birds has a sense of style behind it, with its bright colors and minimalist simplicity. There’s something about these games that creates a world separate from us. Not only do they create a world that we can practically live in, but they make us willing to trade in our real-life problems to experience problems that exist there. Most games bring us an idea that shows that we can overcome any problem with a lot of determination. This is the culture, and it is done with style.

The same principle of style in gaming applies to movies. Film franchises like The Matrix, Star Wars, Lord of the Rings, and Harry Potter all have very particular styles. Even films that don’t take place in fantastic worlds still have a genuine style, such as the nostalgic ’60s look of Catch Me If You Can, or the quirky suburban looks of indie films like Juno and Napoleon Dynamite. From the sets to the music to the costumes, it doesn’t take an expert to see when something doesn’t belong in a film. You know it when you see it. Can you imagine if you saw pastel colors in the world of The Matrix? An iPod being used by Gollum from Lord of the Rings? What about Harry Potter with a gun? None of these examples would have been considered for the styles of these movies.

In the same way, everything in your application has to fit together in a seamless fashion to create a unique look. This includes the icon, logo, and the user interface (UI).

The Icon

There used to be a dandruff shampoo that had the slogan “You never get a second chance to make a first impression.” Cliché as that is, it is very true.

One of the toughest things about marketing an Android application is just making sure that people even know about it. You’ll see how to solve that problem in later chapters, but let’s say that someone is looking at the Android Market and has found your application. What is it that they see? Along with the name of your application, design company, rating, and cost, there is the first impression in visual form: the icon. Even though “you can’t judge a book by its cover,” the fact is that most people do. Not only that, they look to the icon and hope to get some idea as to what the application does.

This is definitely something to think about as you are deciding what you want your icon to look like. That icon is more than just the square that the user taps to access your application; it is the symbol of your application. You know how I have been saying that you are selling a culture? I am going to briefly talk about another definition of culture that defines a group of people. Notice that most cultures, such as tribes, countries, and companies, have a symbol, such as a flag. Groups have a way of creating a flag and pledging allegiance to it. In Chapter 2, I explained how a name is important, as it creates a brand. People are quick to latch onto brands, so let your icon be that brand.

Your chosen icon should epitomize the functionality of your application. Take the icon from the company Waze (see Figure 3-1), for example. Note the happy face, which is, for lack of a better word, iconic. You’ll then notice that the smiley face isn’t on a yellow circle, but a dialogue balloon, like the type in most comic panels. You’ll then notice that the dialogue balloon has wheels. You may even notice the curvy lines beside the balloon, which is an international indicator that it is getting a signal. The sun is also out, which signifies a nice day outside. Also notice that its smile isn’t a mouth, but something that you might see on a U-Turn sign.

images

Figure 3-1. The official icon for Waze, a social navigation application. This picture says more than a thousand words.

What will a first-time user glean from this simple drawing? This happy dialogue balloon is taking a leisurely trip—but it is not alone, it is connected. This conjures up the culture that Waze is selling: it is “a free social traffic and navigation app that uses real-time road reports from drivers nearby to save commuting time and improve your everyday driving.” Even though this description (based on its actual description on the Android Market) isn’t completely conveyed by the picture, it is enough to give a potential user a hint of what it actually is.

Waze is an example of a creative approach to what your application does. However, most applications are so simple that they can be summed up in less than the thousand words that a picture can say. For example, if you are creating a gaming application called Zombie Baseball, just have a picture of a zombie holding a baseball bat. You can decide for yourself whether it is better to see the full zombie body at bat, or just a skeletal hand clutching a bat. There is an actual application from Halfbrick known as Age of Zombies that uses the icon in Figure 3-2.

images

Figure 3-2. The icon for Age of Zombies. This gives you a sample of what you are getting with this game.

As you can see in Figure 3-2, this dinosaur is partly skeletal, which means he is a zombie dinosaur. This means that you are facing a game with zombie dinosaur enemies, which are quite unusual video game foes. In all honesty, this image would have been my first choice for an icon for a game that involves such odd undead foes.

Chances are, you’ll probably come up with several ideas for an icon, and have to select just one. Figure 3-3 is another example of an obvious icon. It comes from a gaming application known as Alchemy, which is my current addiction. The game involves mixing elements (which appear to the user as icons) together to form new things. Considering the obvious association with traditional alchemy is the use of potions, why wouldn’t you use a beaker like this for an icon?

images

Figure 3-3. The icon for Alchemy, a gaming application. I can’t imagine what you would use for an icon other than this.

When deciding on a look for your icon, it helps to look at what your competition is doing. Please note that you don’t want to imitate what your competitors are doing; instead, always try to figure out what they have not thought of yet. You definitely don’t want to reproduce copyrighted images, as that will lead to a lawsuit. You want to create something as new as possible, and you will want to study your competition to make certain that your icon doesn’t bear too much resemblance to theirs.

Another important aspect of designing an icon for an Android application is that you follow the proper procedure. Just go to http://developer.android.com/guide/practices/ui_guidelines/icon_design.html, and you can download the Icon Templates Pack, which is good for versions of Android 2 and above. The Android Developer guidelines recommend that you use a large artboard to make your icon (preferably an 864×864) artboard. Just to let you know, your icon is going to grow or shrink depending on the screen density that you have. Table 3-1 demonstrates what size your icon will be in certain situations.

images

For additional help, you might want to head to the Android Asset Studio for icon generators (http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html), which allows users to quickly and easily generate icons from existing images, clip art, or text.

Now, here is the tricky part. Can you match the style of your icon to look like the rest of your application graphics? For example, if you choose red and black for the colors of your icon, then you should probably feature those colors predominantly in your app. Having a unified style also helps with such “trivial details” as your logo.

Logo

Now that you have an icon that your idea can gather around, you should put some thought into your logo. This may seem insignificant, but think about some of the films that you have watched and remember how the title was written—for example, how old horror films use a creepy, wavy effect on the letters in their titles. If you want more examples, just look through a pile of DVD or Blu-ray movies, and you will see that the way the title is written is as important as the image shown on the case.

A more creative example is Ghostbusters, which actually used its iconic image in the logo—but I will leave it up to you to decide whether or not it is a good marketing strategy to use your logo on your icon. The size changes that I discussed earlier might reduce your logo to something unreadable.

Sometimes, you can find a logo by just typing out your app name in a word-processing program, highlighting it, and then playing with fonts. Chances are, you are going to find a style that fits with the culture that your application conveys. If you need some help with that, you can go to several sites that are full of fonts for you to use:

A little warning on the use of fonts in your logo. I have seen people “borrow” logos before when trying to create a certain look. For example, if I were trying to do a game that resembled Tron, it would be a simple matter of using the same font as that of the movie poster. It is quite simple to find this font (or any other font) online. This font-borrowing technique usually comes off as second rate at best. It generally looks like you’re trying to piggyback on someone else’s success. Chances are, if someone is trying to play a game that is like Tron, they will download the official application associated with it. Borrowing a font is banking on a user’s predisposition to a similar font, and you don’t want to come off looking like a copycat.

User Interface

And now I will discuss something that will cost you many hours of programming: the UI. I mentioned in Chapter 2 that you should make your application easy to use, but you should also consider the style of your UI.

Now, you could get to the Android Market with a plain-looking icon, logo, and UI, and you would have . . . a plain-looking application. You should also consider how an Android user might look at your application’s screenshots on the Android Market. If he or she finds a similar application that has a better look to it, then you can probably guess which one will get downloaded.

You have probably written down an idea of what sort of menu you are going to have. Chances are, your application is going to have some sort of menu screen the moment the application is opened. You should put in some thought about the style that this menu will have. As an example, Figure 3-4 shows the menu screen for Pulse, a news application that “takes your favorite web sites and transforms them into a colorful and interactive mosaic.”

images

Figure 3-4. The UI for Pulse. Note how easy it is to use and how it makes use of graphics.

Notice the menu up on top, which lists Home, Design, Tech, Art, and Social. From there, it is easy to scroll to see which articles are worth reading.

Like Pulse, you want to create a decent UI that is simple to use and conveys a lot of information in a small space. If you need some help creating one, then you might consider some type of prototyping process so you can see what the UI will eventually look like. There are several ways to do this.

If you are interested in some GUI (graphical user interface) wireframe or mockup programs, there are many available online, including the following:

  • Android GUI Prototyping (www.artfulbits.com/products/free/#Introduction_1): This requires Microsoft B Visio B 2003 or higher, and you should be able to access its unique stencils.
  • DroidDraw (www.droiddraw.org/): This is a designer/editor/builder for cell phone and tablet application programming on the Android platform. It even has an Android application that allows you to download GUIs from DroidDraw and preview them on an Android device.
  • Pencil (http://pencil.evolus.vn/en-US/Home.aspx): Designed by the Pencil Project, this is designed to be a “free and open source tool for making diagrams and GUI prototyping that everyone can use.” It appears to only work on the Firefox browser.

You can also get software for a mockup, including some associated with Photoshop. Here are a couple examples:

Even though we live in an age where everything is going digital, pencil and paper is still the best way to flush out our ideas. Fortunately, there are a lot of places you can go to get some stencils for Android devices, and one of them is

However, you might want to consider creating an interface that is completely original. This is where you can go really crazy and do something like a funky style of pop-up book, or something that is more than just the usual bundle of buttons, pull-up menus, and finger swipes.

Keep in mind that you want your UI to be consistent with your application’s style. You don’t want to have a startup menu that is one style, and then have the rest of the application be another one. Your goal is to have an application that is consistent throughout.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.220.65.61