Design & Build a Small Business App: Project Setup

This post is part of a series called Design & Build a Small Business App.
Design & Build a Small Business App: AQGridView

With over half a million apps, the Apple App Store may be a little crowded, but the good news is that smart developers can add a secret weapon to their arsenal in the quest for App Store domination. That secret is design! In this three part tutorial series, I am going to show you how to design and build a small business app from scratch.

Final Effect

Final Effect Preview

Let's call the app for this series "Biz App", as this can be used to show a small business' services. The idea is to follow along and understand how apps are designed so you can go out there and make your apps rock.

Ready? Let's go!

Create the Project

Create new Xcode project and use the Tabbed Application template. Call it BizAppTutorial and make sure the "Use Storyboard" and "Use Automatic Reference Counting" boxes are checked. Click on Next, select a place to save the project, and you are ready to roll.

Xcode Project Template Creation

Designing the Splashscreen

Select the Storyboard file, called MainStoryBoard_iPhone and you should now have a view similar to the image below. This is the initial couple of View Controllers that Xcode has created for us.

Setting up Storyboards

The first step is to implement the following screen. To do this, select the FirstViewController in the Storyboard and delete the two sample labels on the screen. Select the FirstViewController.h file and declare the following variables:

These are the UI elements that are present in this screen and we shall be customizing them soon.

Now let's synthesize these variables in the FirstViewController.m file

The next step is to create the labels that will be added to the screen. The code below defines a function that creates a label with some customization. The properties that are set on the label are the color, shadow, shadowOffset, and the alignment.

We can now call this method and assign the return value to two of our labels. Each time we give it different parameters. After doing that, we then add the label to the ViewController.

If you run the application, you will see that our labels have been added to the View and they are at different locations and different sizes.


We can't really see the labels because of the background. Let's add a background texture to the View. The image that will be used is a blue fabric texture that I designed for one of our iPhone App Designs, but in this case, you can use it for free! Actually, all the designs used in this tutorial are available in the sample project that accompanies this Mobiletuts+ post.

The image in question is called bg-splash.pngm and we can use this image as the background by adding the following code to the viewDidLoad method. This will create a colour pattern with the image and then set the background image to the color pattern.

If you run the application, you should see a blue background behind the labels. Our app is now taking shape.

Adding a background

Adding a Gradient Label

Now we need to add a gradient label to the screen and to do that we will use an Open Source component called FXLabel. Apple does not allow us to add gradients to labels easily without some custom drawing, hence, the helper code. Download the ZIP file from Github and add the two files FXLabel.h and FXLabel.m to your project

Add this to the top of the viewDidLoad method:

This does a similar customization to our previous labels, but in this case we add a gradient that runs from a sky blue color to a white color. If you run the app in the simulator, you will get the following screen:

Sky Blue Color Gradient - Xcode

Adding the Buttons

The next step is to add the buttons to our app. We do so with the following code:

This function creates a button at the specified location with the specified text. In the method, some customizations happen. The colour of the text is changed to a grayish colour. The background image is also set to one of the sample graphics in the resources folder.

After adding this method and the definition on the header file, the next step is to call the method and assign the resulting buttons to the "Call Us" and "Directions" buttons.

The piece of code above is added to the viewDidLoad method in the FistViewController.m file. This uses the new createButton method and passes some specific parameters to it, namely the location of the button and the text.

The buttons are then added to the view.

If you run the application, you should see the following screen, which makes up our completed design.

Completing the Design - Xcode

A Couple of Tweaks

If you notice, the screen above does not look exactly like the initial screen I showed you at the beginning of this tutorial. The description label is truncated and the "Attorney Biz" text does not have a gradient.

To make the description span two lines, add the following code to the viewDidLoad method just after we create the descriptionLabel.

Making it Functional

Right now, our screen looks good, but it doesn't do anything. The buttons don't lead anywhere. Let's fix that. The following lines of code define two methods. The first method will call the specified number and the second method will open a map to the specified location (London in this case).

The next step is to hook our buttons up with this new method.

Now when you tap the buttons, the app tries to either make a call or open the Maps app.

Note: Calls cannot be made in the Simulator. Run this on an iPhone to test the functionality.


We have come to the end of the first part of the App Design series. Look out for Parts 2 and 3 where we will design more apps and make them look stunning so you can go on and do the same with your own apps.

If you have any questions, please let me know in the comments and I will be there to answer them!