Good design speaks for itself, right? Unfortunately, that is rarely the case. Most of us don’t have the privilege of designing for ourselves; we design for clients, clients who have their own taste and ideas, clients who ultimately need to be persuaded on why we’ve made certain decisions. Good design doesn’t speak for itself; it needs an advocate.
This article examines both why design requires justification and how you can go about providing it in a way that is clear and understandable. While we’ll focus on visual design, the principles described here are applicable to any creative process or endeavor. Indeed, we learned most of these lessons while presenting Web interfaces and prototypes to clients, which took place after the visual designs had been agreed on.
[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]
Beyond The Talk
There is a saying oft quoted by professionals:
“Those who can, do; those who can’t, teach.”
— George Bernard Shaw, Man and Superman
I disagree with the premise of this statement, but I do sympathize with its tone. It is borne of the frustration that comes from the separation between the practice of a discipline and its theory.
Web design is to some degree immune from this criticism, being an extremely practical discipline by nature, and also a very new one. But we don’t have to look far to find university professors teaching students how to design layouts using tables!
At the other end of the spectrum, we have the salespeople. These people may not be great at precise explanation, but they can certainly put forward a compelling argument. Ever sat in on a sales pitch and barely recognized the product being promoted? By the time the salesperson was through talking, you were convinced that the CMS could take you to the moon. I once heard this described as “truth massage.”
The WaSP InterACT (featured) and Opera Web standards curriculum were created to address the problem of institutions getting out of step with the Web industry.
While the full-time teacher (and even full-time salesperson) certainly have a place in the industry, explaining our designs is too important a task to leave to professional “talkers.”
We need to reconnect the practice of design with the theory of design. To do this, we need to learn the words and arguments for making a strong case for our designs.
The Importance Of Communicating A Message
“Marketing without design is lifeless, and design without marketing is mute.”
— Von R. Glitschka
Despite what many designers think, “marketing” is not a dirty word. We can learn much from the advertising and marketing industries about the importance of communication. Some advertising is as subtle as a sledgehammer, practically screaming at the user “Buy now!”; nevertheless, a great deal of thought went into how each message would be perceived and what would convince buyers most effectively.
When it comes to Web design, communication tends to be a much subtler affair: a delicate balance between satisfying users needs and delivering on business objectives. Here, design can play a key role by simplifying processes and persuading users.
Consider the registration form. Usually, business objectives demand as much information from the user as possible, so that the company can streamline and direct its marketing efforts. However, users are reluctant to supply information about themselves and are put off by long forms.
In this instance, trends dictate that the user experience wins out; registration forms now commonly consist simply of an email address and password. But business objectives are not entirely dismissed either: the reduction in effort to sign up translates into more registered users for the website, and people are generally becoming more willing to submit their email address. Plus, a short form fits neatly onto most pages, grabbing the attention of users when they are most receptive — for example, after having just read an interesting article.
The micro-blogging platform Tumblr epitomizes the simple sign-up form.
Design Doesn’t Just Happen
Design is itself a process of deduction. It involves a number of decisions, both conscious and unconscious. During this process, the designer dismisses some ideas as unworkable and pursues others in order to arrive at a solution.
But this process is completely opaque to the client. The client likely views the design not as the outcome of an in-depth process, but as a response to the brief, merely a visual representation of the constraints and considerations set before the designer. As the designer, part of your job is to educate the client and reveal the design process to them.
If you fail to do this, you risk reliving the scenario parodied The Oatmeal’s post on “How a Web Design Went Straight to Hell.” In short, what happens is that client (rightfully) wants some input into the process, so they make suggestions or improvements. But they don’t fully understand the reasons behind your design choices, and so their “minor tweaks” take the website further and further away from its purpose. The design suffers, the designer gets exasperated, the client feels unappreciated and the relationship breaks down. Sound familiar?
The Oatmeal comic describes how poor communication leads to Web design hell.
As designers and Web professionals, we needn’t be afraid of criticism. Good design stands up to criticism, because it is more than a matter of taste. View criticism as an opportunity to explain the reasons behind your decisions, to invite the client into the design world so that they feel like a part of the process.
If you treat criticism this way, then both you and the client will benefit. The client begins to articulate “problems” with the design in language that you can respond to. Instead of just saying, “Make it green,” they might now say, “The red feels too dominant, and we want to push the environmental benefits of our product, so I feel a more natural color is needed. Perhaps green?” Similarly, you will be less precious about your designs, understanding that they will be open to change unless the arguments behind your design decisions are convincing.
Learning The Vocabulary
If we are to explain our designs to clients, then we need to know the language. Translating a visual medium into words is not straightforward. Designers suffer from being so well versed in the language of design that they struggle to articulate it to others. To them, it just “looks right.”
The second difficulty faced by designers is assumed knowledge. They forget that much of their understanding of design comes from past experience, and they can become impatient with clients who are resistant to their suggestions.
In these situations, going back to the basics — i.e. the elements and principles of design — can be helpful. These basics are the “fundamental ideas about the practice of good visual design that are assumed to be the basis of all intentional visual design strategies” (from Wikipedia). A few are listed below:
The elements and principles of design.
You might wish to familiarize yourself with these elements and principles, although you very likely use them liberally in your designs already. For example, white space is really an expression of balance, because it affords each element enough space to have the right amount of focus. Similarly, we draw on proximity when designing forms to make clear the relationship between labels and inputs.
Understanding the principles and elements of design can also help in the design process. When assessing your options, you are able to fall back on more than “It just looks right.”
Making A Convincing Argument
Ultimately, if we are going to persuade clients of the value of our designs, then we need to make convincing arguments. Clients are people, and people have biases; so, the best way to convince them is to frame your argument in the right context.
Clients usually have various pressures put on them, and have to deal with various expectations of the website. Understanding these expectations from the outset will help you at each stage of the process, including the design stage. Some expectations will be formalized as objectives, which should be documented and serve as the basis of the design brief; other expectations might be politically motivated and therefore more difficult to identify.
While I don’t advocate playing the political game, spending some time understanding your client’s motivations will pay dividends as the project proceeds.
Broadly speaking, motivations fall into five categories:
- Usability and accessibility,
- Return on investment (ROI),
- Return on engagement (ROE),
- Deadline-driven,
- Financial.
Depending on the dominant factors in a project, the client will be sympathetic to certain solutions and hostile to others. Let’s look at one factor in detail.
Usability and Accessibility
These tend to be a strong motivator with government, not-for-profit and service-oriented clients, usually stemming from a combination of legislative pressures and a desire to be inclusive to all audience segments. Of course, usability and accessibility should be core considerations in all projects, but they are rarely client-driven.
In such a case, Flash and other highly interactive technologies could be dismissed out of hand for not being accessible. This will also have a bearing on decisions related to color, font and clarity, which in turn will have a huge impact on the overall look and feel of the design.
Understanding this from the outset will help you present the design in the right framework and thus make the design appeal more to the client.
Presenting Your Case
Always present a design to the client in person (or by remote conferencing when that is not possible). Never just send it as an attachment to an email, otherwise you will:
- Look incredibly unprofessional,
- Have no control over the environment (or mindset) in which your design is viewed.
Once you have set aside a time to present your design, how should you proceed? The first thing to do is set clear expectations for the meeting.
Whether you like it or not, the way you present a design sends a message. For example, if you show up at a kick-off meeting with professionally printed boards of design ideas, you will be sending two conflicting messages, because no matter how much you talk about “sketching out” ideas and “exploring” concepts, your boards will be communicating something completely different. The danger here is that the client gets hung up on what they see, which can derail the project in later stages.
As a designer, you have many tools in your arsenal: wireframes, mood boards, sketches, scamps, flat designs, HTML templates and even the backs of napkins. Pick the method that conveys the right amount of professionalism, while offering enough flexibility.
And remember, whatever expectations you have for the meeting, make sure to communicate (and agree on) them before a single design is made.
Dan M. Brown’s book Communicating Design focuses on those deliverables (wireframes, concept models, site maps) that serve as the primary communication tools between designers and clients.
The second thing I find really helpful, closely related to setting expectations, is giving the client a task. Believe it or not, clients actually want to help. But like a wayward child in the kitchen, this help can sometimes be more damaging than constructive.
The best way to do this is to bring the client on board with your own goals. Talk them through the design brief and how you have answered it, or reiterate your overall concept to them. Invite the client to look at the design from this standpoint and to use it to shape their comments. They should consider themselves the website’s quality control officer, pointing out where you might have veered from your own principles. If you do this, then you are far more likely to hear the sort of helpful criticism we spoke of earlier.
To Recap
- Remember, your design doesn’t speak for itself. If it is to stand up to scrutiny, then it needs an advocate.
- In explaining your design, resist the temptation to use meaningless catchphrases. Instead, use plain, easily understood language.
- If possible, include your client in the design process. Walk them through the process you took to arrive at your decisions.
- Don’t be afraid of criticism, because good design is more than a matter of taste.
- Don’t be precious with your design. Be prepared to change elements that you cannot make a good argument for.
- Translating a visual medium into words can be difficult. But the principles and elements of design will help you articulate this visual language.
- To make your argument convincing, frame it in the right context. Understand the pain points, and justify your design in these terms.
- Always present your design in person, and ensure that any expectations are communicated (and agreed on) before a single decision is made.
- Finally, be proud of your work. When you’ve finished speaking, give it plenty of space to say a few words of its own!
Further Reading
(al)
© Felicity Evans for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:
There’s a lot to get excited about in mobile application development today. With increasingly sophisticated hardware, tablet PCs and a variety of software platforms (Symbian OS, iOS, WebOS, Windows Phone 7…), the landscape for mobile developers is full of opportunities — and a little complex as well.
So much choice can be overwhelming when you just want to get started building mobile applications. Which platform should you choose? What programming language should you learn? What kit do you need for your planned project? In this tutorial, you’ll learn how to start writing applications for Android, the open-source mobile operating system popularized by Google.
[Offtopic: by the way, did you already get your copy of the Smashing Book?]
Why Develop for Android?
Android is an open-source platform based on the Linux kernel, and is installed on thousands of devices from a wide range of manufacturers. Android exposes your application to all sorts of hardware that you’ll find in modern mobile devices — digital compasses, video cameras, GPS, orientation sensors, and more.
Android’s free development tools make it possible for you to start writing software at little or no cost. When you’re ready to show off your application to the world, you can publish it to Google’s Android Market. Publishing to Android Market incurs a one-off registration fee (US $25 at the time of writing) and, unlike Apple’s App Store which famously reviews each submission, makes your application available for customers to download and buy after a quick review process — unless the application is blatantly illegal.
Here are a few other advantages Android offers you as a developer:
- The Android SDK is available for Windows, Mac and Linux, so you don’t need to pay for new hardware to start writing applications.
- An SDK built on Java. If you’re familiar with the Java programming language, you’re already halfway there.
- By distributing your application on Android Market, it’s available to hundreds of thousands of users instantly. You’re not just limited to one store, because there are alternatives, too. For instance, you can release your application on your own blog. Amazon have recently been rumoured to be preparing their own Android app store also.
- As well as the technical SDK documentation, new resources are being published for Android developers as the platform gains popularity among both users and developers.
Enough with the talk — let’s get started developing for Android!
Installing Eclipse and the Android SDK
The recommended environment for developing Android applications is Eclipse with the Android Development Toolkit (ADT) plugin installed. I’ll summarize the process here. If you need more detail, Google’s own developer pages do a good job of explaining the installation and configuration process.
- Download the Android SDK for your platform (Windows, Mac OS X, or Linux).
- Extract the downloaded file to somewhere memorable on your hard drive (on Linux, I use
/opt/local/). - If you don’t already have Eclipse installed, download and install the Eclipse IDE for Java Developers package. For programming, Google recommends using Eclipse 3.5 (Galileo).
- Run Eclipse and choose Help->Install New Software.
- Click Add in the Available Software window.
- Enter
Android Development Tools in the Name field, and https://dl-ssl.google.com/android/eclipse/ in the Location field. - Click OK and check Developer Tools in the list of available software. This will install the Android Development Tools and DDMS, Android’s debugging tool.
Large image
- Click Next and Finish to install the plugin. You’ll need to restart Eclipse once everything is installed.
- When Eclipse restarts, choose Window->Preferences and you should see Android listed in the categories.
- You now need to tell Eclipse where you’ve installed the Android SDK. Click Android and then Browse to select the location where you extracted the SDK files. For example,
/opt/local/android-sdk.
Large view - Click OK to have Eclipse save the location of your SDK.
Targeting Android Platforms
Before you can start writing applications for Android, you need to download the SDK platforms for the Android devices for which you want to develop apps. Each platform has a different version of the Android SDK that may be installed on users’ devices. For versions of Android 1.5 and above, there are two platforms available: Android Open Source Project and Google.
The Android Open Source Project platforms are open source, but do not include Google’s proprietary extensions such as Google Maps. If you choose not to use the Google APIs, Google’s mapping functionality won’t be available to your application. Unless you have a specific reason not to, I’d recommended you to target one of the Google platforms, as this will allow you to take advantage of Google’s proprietary extensions.
- Choose Window->Android SDK and AVD Manager.
- Click Available Packages in the left column and check the repository to show a list of the available Android platforms.
- You can choose which platforms to download from the list, or leave everything checked to download all the available platforms. When you’re done, click Install Selected and follow the installation instructions.
Large image
Once everything has been successfully downloaded, you’re ready to start developing for Android.
Creating a New Android Project
Eclipse’s New Project Wizard can create a new Android application for you, generating files and code that are ready to run right out of the box. It’s a quick way to see something working, and a good starting point from which to develop your own applications:
After clicking Finish, Eclipse will create a new Android project that’s ready to run. Notice you told Eclipse to generate an Activity called BrewClockActivity? This is the code that Android actually uses to run your application. The generated code will display a simple ‘Hello World’ style message when the application runs.
Packages
The package name is an identifier for your application. When the time comes and you are willing to publish on Android Market, it’s exactly this identifier that will be used to track your application for updates, so it’s important to make sure it’s unique. Although we’re using the com.example.brewclock namespace here, for a real application it’s best to choose something like com.yourcompanyname.yourapplication.
SDK Versions
The Min SDK Version is the earliest version of Android on which your application will run. With each new release of Android, the SDK adds and changes methods. By choosing an SDK version, Android (and the Android Market) knows that your application will only run on devices with a version of Android later or equal than the specified version.
Running Your Application
Now let’s try running the application in Eclipse. As this is the first run, Eclipse will ask what type of project you are working on:
- Choose Run->Run or press Ctrl+F11.
- Choose Android Application and click OK.
Eclipse will now try to run the application on an Android device. At the moment, though, you don’t have any Android devices running, so the run will fail and you’ll be asked to create a new Android Virtual Device (AVD).
Android Virtual Devices
An Android Virtual Device (AVD) is an emulator that simulates a real-world Android device, such as a mobile phone or Tablet PC. You can use AVDs to test how your application performs on a wide variety of Android devices, without having to buy every gadget on the market.
You can create as many AVDs as you like, each set up with different versions of the Android Platform. For each AVD you create, you can configure various hardware properties such as whether it has a physical keyboard, GPS support, the camera resolution, and so on.
Before you can run your application, you need to create your first AVD running the target SDK platform (Google APIs 1.6).
Let’s do that now:
Running the Code
Try running your application again (Ctrl+F11). Eclipse will now build your project and launch the new AVD. Remember, the AVD emulates a complete Android system, so you’ll even need to sit through the slow boot process just like a real device. For this reason, once the AVD is up and running, it’s best not to close it down until you’ve finished developing for the day.
When the emulator has booted, Eclipse automatically installs and runs your application:
Large image
Building Your First Android Application
Testing generated code is all well and good, but you want to start building a real application. For this, we’ll step through a simple design process and build an application that you can deploy to your Android device.
Most developers (myself included) like a constant supply of good tea or coffee. In the next section of this article you’ll build a simple tea counter application to track how many cups of tea (brews) the user has drunk, and let them set a timer for brewing each cup.
You can download the complete code for this tutorial on GitHub.
Designing the User Interface
One of the first steps to building any Android application is to design and build the user interface. Here’s a quick sketch of how the application’s interface will look:
Large image
The user will be able to set a brew time in minutes using the + and - buttons. When they click Start, a countdown will start for the specified number of minutes. Unless the user cancels the brew by tapping the button again, the brew count will be increased when the countdown timer reaches 0.
Building the Interface
Android user interfaces, or layouts, which are described in XML documents, can be found in the res/layouts folder. The template code that Eclipse generated already has a simple layout declared in res/layouts/main.xml which you may have seen previously while the application was running on the emulator.
Eclipse has a graphical layout designer that lets you build the interface by ‘dragging’ and ‘dropping’ controls around the screen. However, I often find it easier to write the interface in XML and use the graphical layout to preview the results.
Let’s do this now by changing main.xml to match the design sketch above:
- Open
res/layouts/main.xml in Eclipse by double-clicking it in the Package Explorer. - Click the
main.xml tab along the bottom of the screen to switch to XML view.
Now change the content of main.xml to:
# /res/layouts/main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dip">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dip"
android:text="Brews: " />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="None"
android:gravity="right"
android:textSize="20dip"
android:id="@+id/brew_count_label" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:padding="10dip">
<Button
android:id="@+id/brew_time_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-"
android:textSize="40dip" />
<TextView
android:id="@+id/brew_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0:00"
android:textSize="40dip"
android:padding="10dip" />
<Button
android:id="@+id/brew_time_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+"
android:textSize="40dip" />
</LinearLayout>
<Button
android:id="@+id/brew_start"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="Start" />
</LinearLayout>As you can see, Android’s XML layout files are verbose, but allow you to control virtually every aspect of elements on the screen.
One of the most important interface elements in Android are Layout containers, such as the LinearLayout used in this example. These elements are invisible to the user but act as layout containers for other elements such as Buttons and TextViews.
There are several types of layout views, each of which is used to build different types of layout. As well as the LinearLayout and AbsoluteLayout, the TableLayout allows the use of complex grid-based interfaces. You can find out more about Layouts in the Common Layout Objects section of the API documents.
Linking Your Layout With Code
After saving your layout, try running your application in the emulator again by pressing Ctrl+F11, or clicking the Run icon in Eclipse. Now instead of the ‘Hello World’ message you saw earlier, you’ll see Android now displays your application’s new interface.
If you click any of the buttons, they’ll highlight as expected, but don’t do anything yet. Let’s remedy that by writing some code behind the interface layout:
# /src/com/example/brewclock/BrewClockActivity.java
...
import android.widget.Button;
import android.widget.TextView;
public class BrewClockActivity extends Activity {
/** Properties **/
protected Button brewAddTime;
protected Button brewDecreaseTime;
protected Button startBrew;
protected TextView brewCountLabel;
protected TextView brewTimeLabel;
...
}Next, we’ll change the call to onCreate. This is the method that gets called whenever Android starts your application. In the code that Eclipse generated, onCreate sets the activity’s view to be R.layout.main. It’s that line of code that tells Android to decode our layout XML document and display it to the user.
The Resource Object
In Android, R is a special object that is automatically generated to allow access to your project’s resources (layouts, strings, menus, icons…) from within the code. Each resource is given an id. In the layout file above, these are the @+id XML attributes. We’ll use those attributes to connect the Buttons and TextViews in our layout to the code:
# /src/com/example/brewclock/BrewClockActivity.java
...
public class BrewClockActivity extends Activity {
...
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// Connect interface elements to properties
brewAddTime = (Button) findViewById(R.id.brew_time_up);
brewDecreaseTime = (Button) findViewById(R.id.brew_time_down);
startBrew = (Button) findViewById(R.id.brew_start);
brewCountLabel = (TextView) findViewById(R.id.brew_count_label);
brewTimeLabel = (TextView) findViewById(R.id.brew_time);
}
}Listening For Events
In order to detect when the user taps one of our buttons, we need to implement a listener. You may be familiar with listeners or callbacks from other event-driven platforms, such as Javascript/jQuery events or Rails’ callbacks.
Android provides a similar mechanism by providing Listener interfaces, such as OnClickListener, that define methods to be triggered when an event occurs. Implementing the OnClickListener interface will notify your application when the user taps the screen, and on which button they tapped. You also need to tell each button about the ClickListener so that it knows which listener to notify:
# /src/com/example/brewclock/BrewClockActivity.java
...
// Be sure not to import
// `android.content.dialoginterface.OnClickListener`.
import android.view.View.OnClickListener;
public class BrewClockActivity extends Activity
implements OnClickListener {
...
public void onCreate(Bundle savedInstanceState) {
...
// Setup ClickListeners
brewAddTime.setOnClickListener(this);
brewDecreaseTime.setOnClickListener(this);
startBrew.setOnClickListener(this);
}
...
public void onClick(View v) {
// TODO: Add code to handle button taps
}
}Next we’ll add code that handles each of our button presses. We’ll also add four new properties to the Activity that will let the user set and track the brewing time, how many brews have been made, and whether the timer is currently running.
# /src/com/example/brewclock/BrewClockActivity.java
...
public class BrewClockActivity extends Activity
implements OnClickListener {
...
protected int brewTime = 3;
protected CountDownTimer brewCountDownTimer;
protected int brewCount = 0;
protected boolean isBrewing = false;
...
public void onClick(View v) {
if(v == brewAddTime)
setBrewTime(brewTime + 1);
else if(v == brewDecreaseTime)
setBrewTime(brewTime -1);
else if(v == startBrew) {
if(isBrewing)
stopBrew();
else
startBrew();
}
}
}Notice we’re using the CountDownTimer class provided by Android. This lets you easily create and start a simple countdown, and be notified at regular intervals whilst the countdown is running. You’ll use this in the startBrew method below.
The following methods are all model logic that handles setting the brew time, starting and stopping the brew and maintaining a count of brews made. We’ll also initialize the brewTime and brewCount properties in onCreate.
It would be good practice to move this code to a separate model class, but for simplicity we’ll add the code to our BrewClockActivity:
# /src/com/example/brewclock/BrewClockActivity.java
...
public class BrewClockActivity extends Activity
implements OnClickListener {
...
public void onCreate(Bundle savedInstanceState) {
...
// Set the initial brew values
setBrewCount(0);
setBrewTime(3);
}
/**
* Set an absolute value for the number of minutes to brew.
* Has no effect if a brew is currently running.
* @param minutes The number of minutes to brew.
*/
public void setBrewTime(int minutes) {
if(isBrewing)
return;
brewTime = minutes;
if(brewTime < 1)
brewTime = 1;
brewTimeLabel.setText(String.valueOf(brewTime) + "m");
}
/**
* Set the number of brews that have been made, and update
* the interface.
* @param count The new number of brews
*/
public void setBrewCount(int count) {
brewCount = count;
brewCountLabel.setText(String.valueOf(brewCount));
}
/**
* Start the brew timer
*/
public void startBrew() {
// Create a new CountDownTimer to track the brew time
brewCountDownTimer = new CountDownTimer(brewTime * 60 * 1000, 1000) {
@Override
public void onTick(long millisUntilFinished) {
brewTimeLabel.setText(String.valueOf(millisUntilFinished / 1000) + "s");
}
@Override
public void onFinish() {
isBrewing = false;
setBrewCount(brewCount + 1);
brewTimeLabel.setText("Brew Up!");
startBrew.setText("Start");
}
};
brewCountDownTimer.start();
startBrew.setText("Stop");
isBrewing = true;
}
/**
* Stop the brew timer
*/
public void stopBrew() {
if(brewCountDownTimer != null)
brewCountDownTimer.cancel();
isBrewing = false;
startBrew.setText("Start");
}
...
}The only parts of this code specific to Android are setting the display labels using the setText method. In startBrew, we create and start a CountDownTimer to start counting down every second until a brew is finished. Notice that we define CountDownTimer's listeners (onTick and onFinish) inline. onTick will be called every 1000 milliseconds (1 second) the timer counts down, whilst onFinish is called when the timer reaches zero.
Avoiding Hard-Coded Text in your Code
To keep this tutorial code simple, I’ve intentionally written label strings directly in the code (e.g. "Brew Up!", "Start", "Stop"). Generally, this isn’t good practice, as it makes finding and changing those strings harder in large projects.
Android provides a neat way to keep your text strings separate from code with the R object. R lets you define all your application’s strings in an xml file (res/values/strings.xml) which you can then access in code by reference. For example:
# /res/values/strings.xml
<string name="brew_up_label">Brew Up!</string>
...
# /res/com/example/brewclock/BrewClockActivity.java
...
brewLabel.setText(R.string.brew_up_label);
...
Now if you wanted to change Brew Up! to something else, you would only need to change it once in the strings.xml file. Your application starts to span dozens of code files which keeps all your strings in one place and makes a lot of sense!
Trying BrewClock
With the code complete, it’s time to try out the application. Hit Run or Ctrl+F11 to start BrewClock in the emulator. All being well, you’ll see the interface set up and ready to time your tea brewing! Try setting different brew times, and pressing Start to watch the countdown.
Large image
Summary
In this short introduction to Android, you’ve installed the Android SDK and Eclipse Android Development Tools (ADT) plugin. You’ve set up an emulator, or virtual device that can test your applications. You’ve also built a working Android application which has highlighted a number of key concepts that you’ll use when developing your own Android applications.
Hopefully, this has whet your appetite for building mobile applications, and experimenting in this exciting field. Android offers a great way to start writing applications for a range of current and upcoming mobile devices. If you’ve built or are working on your own mobile app, be sure to let us know about it in the comments!
(ik), (vf)
© Chris Blunt for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: android, mobile
In one of his recent presentations, Frans Johansson explained why groundbreaking innovators generate and execute far more ideas than their counterparts. After watching his presentation The Secret Truth About Executing Great Ideas, my thoughts began to surface about how meaningful the presentation was regardless of a persons industry, culture, field or discipline. Anyone can come up with an amazing idea but how you execute the idea will determine your success.
[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]
Ideation: Idea Conception
Coming up with an innovative idea will require some methods of generating ideas from brainstorming to mind mapping that can help conjure up useful ideas. During this process one must make sure to keep focused on a goal. If you have no goal, how will you know when you have reached the finish line and are ready for refinement? Start out with a few thoughts or themes and see what you can come up with.
Don’t get stuck on trying to come up with different variations of the same idea as you will want to develop ideas further later. While there is no exact path in ideation or other creativity techniques from start to finish, creating an idea you are happy with and feel has innovative potential is the key. Believing in your ideas innovative ability will give the confidence you will need later on during pitch time.
Is this new disposable cup holder an improvement or an innovation?
Many people have tried to innovate, but because something similar had already existed, it’s merely an improvement. When designing within familiar bounds, you can still create something amazing but your audience will not likely be astonished at the sight of it. It is easy to see the particular innovative idea as something that was so simple to come up with but if that’s the case, then why didn’t you do it? The trick is to come up with them before. That’s the challenge. Once you find that special seed of an innovative idea, try to avoid key mistakes that will stop your idea from ever seeing the light of day.
As interesting as some ideas may be, that is not always enough for consumers. Getting the message out that your new idea is imperative will gain more consumer attention, especially in more difficult economic times. Always having a short and clear value proposition with an inescapable feeling of necessity can help gain capital, exposure and consumers. Do not wait until everything is “perfect” as they may never be and this will only further delay your ideas release. Act, do not sit idle!
Nurture New Ideas
Think of your typical cup holder from a fast food restaurant or coffee house made of cardboard. They are rigid with no handle and have been cause of drink spills and panic attacks for years. Recently a new cup holder has come about that is more mobile and has a handle (see image above). These changes have made it easier to transport drinks and prevent spills. This idea in itself is only an improvement on what was there previously.
To truly be innovative, you should take opposing thoughts and combine them, which increases the innovative potential of your idea (see image below). Think of the invention of the Burqini that combines the idea of a burqa that Muslim women wear and the flexibility of a swimsuit at the beach. Innovative ideas can sometimes be explosive but many potential barriers will arise and just having an innovative idea is not always enough.
Groundbreaking and innovative ideas come from combining ideas from different industries, cultures, fields, and disciplines.
In order to take an innovative idea from the embryo of a concept to market, you need to have the determination to push through failure. The odds are against you no matter the idea and statistics say you are going to fail a few times on your road to success. Knowing this, you have to hedge your bets more effectively so you can adjust your path and continue forward.
Don’t be intimidated by the perceived brilliance of innovative designs, because you are typically seeing the last iteration that has changed compared to its original concept. This happens with adjustment through failure. As Johansson mentioned, Picasso had made around 20,000 (as high as 50,000) works of art in his lifetime and Einstein published 240 papers with a short number of successful creations. Innovative success happens in volume (see image below).
Stevens, G.A. and Burley, J., “3,000 Raw Ideas = 1 Commercial Success!”
How To Pick A Successful Idea
Don’t put everything behind your first idea! You wouldn’t go to the racetrack and put your life savings on 1/3000 odds, would you? Even though we are taught that all innovations come from a visionary who predicted a need for the future, this is usually not the case. Naturally, most inventions come from necessity and others from creative spark. When executing a creative idea with the resources you have available, you will have to make adjustments along the way that may not have been accounted for originally. Johansson suggests that you take the smallest executable step (smallest bet) so you don’t risk everything on your original idea.
Once you define the smallest step, you know your scope of risk. This is very important because you can then take baby steps to overcome challenges and utilize resources more efficiently on your road to success (see image below). While strategy is paramount, one shouldn’t get lost in planning and take too long to execute. Stay motivated to move forward, because forward motion even through failure is the key to success.
“Nearly every major breakthrough innovation has been preceded by a string of failed or misguided executions.” — Frans Johansson.
When implementing strategy, whether it is used to free up resources or define a path to move forward, do not plan on coming up with the ultimate plan that will carry your idea to the finish line. Coming up with a base and enabling yourself to act will help to get things done and eventually discover the final solution that goes to market. You will need to bring yourself to an idea intersection where you can pick and choose the best ideas. This intersection can be used to generate extraordinary, electrifying and trendsetting ideas.
Exploring Innovation Deeper
The Devotion of Pablo Picasso
Pablo Ruiz Picasso was a Spanish artist that had a unique talent in painting by combining different techniques, theories and ideas making him one of the most well-known figures in 20th century art. Picasso had always shown a passion for art from a very young age and was determined to express his passion to the world. Overcoming high and low barriers, he achieved much success and fortune in his life. As Pablo Ruiz Picasso said, “action is the foundational key to all success.” Continuing to move forward by taking action and not sitting idle will create momentum for success.
Early in his life, Pablo Picasso slept during the day, worked at night and persevered through poverty, cold and desperation. He was known to have burned much of his early work just to keep warm at night. Picasso motivated himself through passion to push forward and eventually made luxurious connections. Constantly updating his style from the Blue Period, to the Rose Period, to the African-influenced Period, to Cubism, to Realism and Surrealism, he was a pioneer with a hand in every art movement of the 20th century.
Picasso was extraordinarily abundant throughout his long lifetime. A skillful self-promoter, he used politics, whimsicality, and harassment as a selling tool. The total number of artworks he produced has been estimated at 50,000, comprising 1,885 paintings; 1,228 sculptures; 2,880 ceramics, roughly 12,000 drawings, many thousands of prints, and numerous tapestries and rugs. From all of these works, only a few dozen have been regarded as a great success, leaving thousands in museums for viewing after his death and even more collecting dust. Picassco dedicated his life to art and has very influential with his portrayal of Cubism.
Frank Epperson’s Juice on a Stick
Frank Epperson was an average American who at a young age discovered a “frozen drink on a stick” that would later become an innovative idea. In his life he dabbled in real estate before discovering how to take his idea to market.
At the age of 11 Frank Epperson invented the “Epsicle” that is now known as the “Popsicle”. He was mixing powdered soda with water to make soda pop and accidentally left the mixing bucket outside on an unusually cold night. During the night the mixture froze solid, with the wooden stirring stick standing straight up. There was one huge problem: you can’t start an Epsicle production line on your back porch because the weather didn’t allow for such a thing. Epperson overcame this hurdle by gaining access to a commercial freezer, stamped his name on the sticks and wanted to sell his idea.
Unfortunately for Epperson, ice-cream makers were not interested and he did not share his idea again until a fireman’s ball years later. He pushed through rejection and failure without burying all of his resources until he had achieved a solid idea. While he discovered this wonderful treat early on in life, it took him 16 years to introduce the idea and 7 years more to sell his Popsicle patent. The popsicle can be credited for the entrance of tasty frozen deserts into the mainstream and happy children’s faces around the world. Today hundreds of millions of Popsicles are eaten in the United States each year, and there are more than thirty flavors available.
Alexander Graham Bell’s Modern Communication
Alexander Graham Bell was a scientist from Scotland (originally) that had always had a natural curiosity for the world. This resulted in experimentation with inventing at a young age, most notably a simple dehusking machine at age 12.
Due to the gradual deafness of his mother starting at a young age, he was led to study acoustics which eventually led to the invention of the telephone. Bell’s telephone grew out of improvements he made to the telegraph. He had invented the “harmonic telegraph” which could send more than one message at a time over a single telegraph wire. His path to success was not as clear as one might think and is surrounded by past failures and controversy.
Bell’s first serious work with sound transmission used tuning forks to explore resonance. Unfortunately, this groundbreaking undertaking had already been completed worlds away in Germany. A short change in path led Bell to transmit sound through electrical means. He experimented first by trying to transmit musical notes and articulate speech.
Alexander Graham Bell had not set any clear destination and became overwhelmed with his experiments. After many sleepless nights he created a harmonic telegraph which became the first stepping stone to the creation of the telephone. After entertaining other possibilities such as the phonautograph and sending multiple telegraph messages on a single line, Bell refined the idea of acoustic telegraphy.
By recognizing progress and changing his path, Bell (with the help of Thomas Watson) was able to invent the sound-powered telephone. By starting with the idea of transmitting a voice through electricity, Alexander Graham Bell was able to, through a series of refinements, invent technology that is used around the world even today. Bell continued to test out new ideas involving kites, airplanes, tetrahedral structures, sheep-breeding, artificial respiration, desalinization and water distillation, and hydrofoils.
Jack Dorsey’s Micro Communication
Jack Dorsey is an American software architect that had an interest in making “instant messenger” updates available for friends to see. This was a refined concept that eventually grew into what we now know as Twitter. Three guiding principles of this innovative idea are simplicity, constraint and craftsmanship.
Jack had an early fascination with cities and how they work, so he would always carry maps around with him. His attraction with mass-transit and how cities function led him to taking advantage of public transit databases in Manhattan. He built off of his original idea that gave meaning to his overall concept. His idea make clear though working on dispatch software, programming real-time messaging systems for couriers, taxis, and emergency vehicles.
Jack Dorsey’s experience helped him see his idea in a completely new perspective. Taking his seedling of an idea that would update friends of his status, Dorsey completed several field tests before recognizing that the technology available didn’t support his innovative idea. There are times when putting off a project is irrefutable. Jack Dorsey originally came up with his idea in the year 2000 but wasn’t able to execute effectively until 8 years later. Jack was effective in not letting his idea sit for too long but instead taking action when technology would let it thrive.
Conclusion
Making ideas happen isn’t easy and requires patience, determination and hard work. The most important part of it is not just coming up with a promising concept, but rather rethinking it over and over again, implementing it and then putting it to practice.
Most inventions come from necessity, so pay attention to small problems in your environment and find simple solutions to these problems. Do not sit idle on the idea — act instead. Take opposing thoughts and resolve them in your innovative designs. And keep innovating all the time, one step at a time. The time will pass, and if you have some luck, you will see your idea growing, flourishing and maybe even turning into a real success. …So what are you waiting for?
Further Resources
Here are further articles and related resources:
- Five Tips For Making Ideas Happen
Creative types have a problem. We have so many great ideas, but most of them never see the light of day. Some creative people and teams are able to defy the odds and make their ideas happen, time and again. - 99 Excuses For NOT Making Ideas Happen
If you’re NOT doing something, what does it matter why? See what their readers feel are the most common excuses for NOT making ideas happen. - Executing Ideas Often is Difficult for Leaders
Strategy is too often just a bad joke (with allusions to Dilbert’s pointy-haired boss) among the working-level people who actually produce the products, provide the service and generate the profit. - How Do You Keep, Develop and Execute Ideas?
There are so-called serial entrepreneurs who are fond of jumping from one great execution of an idea to another. And more often than not, they gain much experience–and money–in the process. - Ideas Are Not Innovation
Continuous innovation is critical to most businesses, and your is no exception. Innovation must be woven into the very fabric of your culture. - The 3 Most Common Mistakes When Growing an Idea into a Business
Sometimes this energy and excitement can be blinding. Some people are so tremendously passionate, yet lack the ability to take ownership and really get things done.
© Robert Hartland for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: 99% conference, dorsey, graham bell, idea, ideation, innovation, Inspiration, picasso, successful
Today we are glad to release a Payment Icon Set, a set with 18 payment icons in PNG format, in the resolutions 32×32px — 128×128px. This set was designed by Phil Matthews and released especially for Smashing Magazine and its readers.
The icons are inteded to be used on e-commerce websites where you can show what types of payment the shop accepts. Each icon comes in curved and straight edge variations. As usual, the set is free to use in private and commercial projects — no credit is required.
Download the icon set for free!
You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed or rented. Please link to this article if you want to spread the word.
Behind the design
As always, here are some insights from the designer:
This icon pack includes 18 different payment icons in PNG format. These icons are released free of charge and can be used without credit. The icons cannot be resold in any way. The copyright of each logo is owned by the respective payment company and I do not take responsibility for any part of the design of these. They are inteded for you to show what types of payment your website accepts. Please spread the word if you like this icon set or find it useful. Thank you.
— Phil Mathews
Thank you very much, Phil! We really appreciate your efforts.
© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: credit card, Freebies, Icons, payment
Wednesday, May 19, 2010
Comments Off