How to Make App Mockups With AppCooker

Let’s face it – these days, clients expect mockups for their apps. Before you begin coding, they want to see onboarding and login flows, activity feeds, perhaps even a settings page – and visualize the flow between all these pages.

To do your job right, it really helps to have a good interactive mockup tool. In this tutorial, you’ll learn how to use one of these tools – AppCooker – to create beautiful interactive mockups right on your iPad.

AppCooker’s distinguishing feature is the use of widgets that mimic native UIKit objects. These widgets support commonly configured properties found in Xcode—for example, whether a table view is grouped. If you’re an iOS developer, you’ll feel right at home.

AppCooker feels like a simplified version of Interface Builder. So if you’re a designer who’s tried prototyping in Xcode’s storyboard but got tangled up with Auto Layout, give AppCooker a try. It might feel limited compared to other design tools, but these limitations help ensure your designs translate smoothly to the development phase. If it’s easy in AppCooker, it’s probably easy in Xcode.

Getting Started

To follow along with this tutorial, you’ll need to purchase AppCooker for the iPad, available for $29.99 as of this writing. Also download the Resources folder, which contains the images and icons you’ll need to complete the tutorial.

If you’ve bought the app, skip ahead to the “Sample Project Overview” section. But if for some reason you can’t – read the section below!

Can’t Buy the App?

If you don’t own an iPad, or you’re not quite sold on AppCooker, you can still download the free AppTaster companion app, which works on both iPad and iPhone.

With AppTaster, you can view these demo files to get a taste of what you can do with AppCooker.

After installing AppTaster, just email the .appTaster files to yourself. When you open the attachments, choose the Copy to AppTaster action extension.

You can play around with the mockup in AppTaster, as shown above. This should give you an idea of what AppCooker is capable of making, and you can simply read through the rest of the tutorial if you’d like.

Sample Project Overview

In this tutorial, you’re going to create an interactive high-fidelity mockup for a client. As your example, you’ll use RWDevCon, our conference companion app with an event lineup, a personal schedule and a list of videos from prior conferences.

Don’t worry, you’re not going to mock-up the whole app. You’ll just make the first tab and link it to some placeholder screens. By the end, you should feel pretty comfortable using AppCooker.

A Quick Tour

AppCooker has quite a lot of functionality. To keep these features organized, AppCooker has different modes, or workspaces.

• App Board: A springboard from which you can plan all facets of your prototype, including App Store metadata, pricing, and refinement of your app idea.
• Screen View: An infinitely scrolling canvas that contains all the screens in your app, including their link relationships.
• Editor: Where you edit an individual screen. You can drag and drop native widgets, images, shapes and more.
• Preview: This is an interactive demo of your mockup, where you can tap links and transition between screens.

Creating a New Project

Let’s dive in and create a new project. Open AppCooker, close the tutorial if it appears, and follow these steps:

1. In the AppCooker project screen, tap Create Project, which is the first cell with a big plus sign.
2. In the New Project modal, change the Project Name to RWDevCon.
3. Under the Targeted Device list, select iPhone 6, iPhone 5.
4. Tap Create on the top-right of the modal.
5. Select your new RWDevCon project.
6. In the App Board of RWDevCon, select the blue pane that says iPhone 5 & 6 Mockup.
7. If all goes well, you’ll see a Home screen in the Screen View.

When you create a new project, you can choose between device classes such as iPhone, iPad or Apple Watch. Some UI elements are only available on certain devices; for example, popovers are available on iPad but not on iPhone.

Note you can only choose one targeted device per project; so if you’re targeting multiple devices, you will need to create multiple projects for the same app.

Adding Native Widgets

Your app’s design uses a tab bar for navigation, and each tab contains a table view. You’ll begin by adding a few of these UI elements to the screen.

1. Single-tap on the Home screen, and a small popover menu will appear.
2. Tap the Edit button next to the pencil icon. This will take you into the Editor.
3. In the navigation bar, tap the Widgets button , which reveals a collection of widgets.
4. Tap the Status Bar item, and it will automatically appear at the top of your screen.
5. Tap the tab bar item (the one with a star), and it will appear at the bottom of your screen.
6. Tap the table view item. Drag and resize it so that the bottom is flush with the tab bar and the height takes up roughly two-thirds of the screen.

With just a few taps, your first screen is taking shape.

The widgets menu has many UIKit elements, like navigation bars, sliders and date pickers. There are also black-and-white versions of these widgets on the Wireframe tab. These are useful for iterating quickly without being bogged down by details like color.

Saving Colors to the Palette

Since you’re making a high-fidelity mockup, you want to use branded colors. The color picker supports different modes, including RGB, HSB and grayscale. In this section, you’ll save a few colors to the palette for future use, as well as set the background color.

Follow these steps:

1. Tap the canvas background to make sure no UI elements are selected.
2. Tap the Bkg. button in the bottom property bar. This opens up a color palette popover.
3. Select the third circle to enter RGB Mode.
4. Slide the values for (Red, Green, and Blue) to (0, 110, and 55), respectively. We’ll refer to this color as RWGreen.
5. Tap the first available plus icon to save this color to your palette.
6. Select the last circle to enter Gray Scale Mode.
7. Tap the square that says 50 and save it to your palette using the plus button.
8. Also tap the 80 square and save it to your palette.
9. Make sure the Bkg. square is dark gray when you’re done. The screen’s background should be dark gray, as well.

You just set the background color to a dark gray. Along the way, you saved some colors to a color palette. You’ll use the green for cell titles, and the lighter gray for subtitles.