The significance of small businesses is defined as follows in Katherine Kobe http://archive.sba.gov/advo/research/rs299tot.pdf:
"Small businesses continue to play a vital role in the economy of the United States. During the 1998-2004 time period, small businesses produced half of private nonfarm GDP."
An article at http://www.msnbc.msn.com/id/16872553/ talks of the following statistics:
"While some two-thirds of small firms make it past the two-year mark, just 44 percent can hack it for four years, according to the latest data from the Bureau of Labor Statistics."
Even in the land of big business, it bodes well for our craft; there is such a volume and churn of small businesses. That means an almost endless supply of mom-and-pop shops that are trying to compete. That's where we come in.
Take Nicky's Pizza for example. Like so many other businesses, the owner realized that he should have a website before he opened his doors for business. His friend built the website and it's actually pretty good; it's just not mobile optimized yet.
The pizza is great and while we sit there enjoying a slice, we bust out a pen and grab a napkin. We're going to sketch out a mobile website right here, right now, and win some business. Let's get started.
For any small, local business, there are certain staples that should probably be first and foremost on their mobile site:
Location
Contact information
Services/goods provided
Since this is a restaurant, services will be the menu. They also were smart enough to create a Facebook page. So, we'll link to that and bring in some testimonials.
Since we're drawing and not using a tool, you can choose to be as detailed as you like. Either works to communicate the core ideas.
When working with our own team, the first is probably just enough since we all know what jQuery Mobile can do. We know what details the framework will fill in and we can draw just enough to tell each other what we're thinking. However, when drawing for customers (or people who you know are more visual and detail-oriented), we would do well to take the few extra seconds to add the finer details like shadows, gradient shading, and, especially, the logo. Business owners are very proud of their babies, and your effort to include it will instantly grant your drawing that little bit of extra gravity.
The following figures are two examples of drawing the same page:
The first is certainly good enough to pick up, hold in the hand, and pretend it's a smartphone screen. In the second figure, we can see how much difference actually drawing out the logo can make and how adding harder edges and shadows give a sense of depth. A little polish goes a long way.
There are several ways to go about adding drop shadows to your drawings. The most artistic way is to use a pencil but the problem with drawing in pencil is that it leads to smudging, and paying too much attention to fine detail. These drawings are supposed to be rough. If you screw up slightly, no big deal. After all, you've probably spent less than a minute on each drawing and that's the idea. The goal is to get to a shared, visual understanding, quickly.
Here are four different ways to draw the same button. From left to right: pencil, pen, Sharpie, and markers. My personal preference is to use a fine point Sharpie.
Here are some other jQuery Mobile elements and ways to draw them:
