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.

Changing the Status Bar Color

Now that the background color is dark gray, it’s hard to see the status bar. You’re going to fix this.

1. Tap the status bar.
2. In the property bar, tap the Style button.
3. Select Light Content from the popover menu. The status bar will now be white.

You may have noticed that AppCooker gives you options for dark content and light content rather than “black” and “white”. This is because the native widget properties tend to map directly to an API in iOS. In this case, the two UIStatusBarStyle options are .Default (dark content) and .LightContent.

Configuring the Table

Table views are an essential part of mobile development. Naturally, there are a lot of configuration options for cell styles, cell accessories, sections and headers. AppCooker makes many of these properties available in the table view widget.

Delete Unused Sections and Rows

By default, the table view widget is populated with pre-configured cells to give you a sense of what’s possible. Your first order of business: delete some of this boilerplate.

1. Select the table view on your screen.
2. Tap the Sections button in the property bar. This opens the Sections modal.
3. Swipe the row named Section 1 to the left and tap Delete.
4. Select Section 0, which takes you to the Section Details page.
5. Swipe to delete the second cell, named Title.

You’ll end up with one section containing a single cell.

Configure the Cell

Each cell needs to fit quite a bit of information, including the title of the talk, course number, difficulty level and room number. The Subtitle cell style is a good choice, since you can squeeze in two lines of information, one on top of the other.

1. On the Section Details page, tap the first cell named Title. This takes you to the Cell Details page.
2. Under the Style section, tap the example cell, which currently has a Basic style.
3. On the Cell Style page, select the second cell, the one where the title is on top of the subtitle. This will take you back to the previous page.
4. Under the Accessory section, tap the example cell, which is currently set to Detail Button.
5. On the Cell Accessory page, select the first item, None. Again, this will take you back to the previous page.

You’ve changed the cell style from Basic to Subtitle, as well as gotten rid of a cell accessory button. Onward!

Change the Cell Text Color

The built-in subtitle cell is functional, but it doesn’t look exciting. Why don’t you change the title color to that dashing RWGreen you saved earlier?

1. On the Cell Details page, find the Title row and tap the Info button. This will take you to the Title Attributes page.
2. Tap the black row at the bottom to go to the Title Color page.
3. Select the green square from the color palette you saved earlier.
4. Tap the Back button twice until you return to the Cell Details page.
5. Repeat the same steps to change the Subtitle Color to the light gray color from the palette.

The cell title will now be green, and the subtitle a light gray.

Add Body Copy to the Cell

You’re going to enter some mock information to help you visualize the end product.

1. On the Cell Details page, find the Title and Subtitle cells in the Content section.
2. Change the Title to Beginning Swift.
3. Change the Subtitle to 101 • Beginner • Edison A/B/C. On an iOS keyboard, hold down the hyphen – key and the bullet • character will appear in a popover.
4. Tap the Back button to return to the Section Details page.
5. Replace the Header text with FRIDAY 9:00 AM.

Data entry can be tedious. Fortunately, AppCooker makes it easy to duplicate cells.

Fill Up the Table With Duplicate Cells

Right now your table view has just a single cell. The mockup might look better with a fully populated table.

This is only a mockup, so why not copy and paste?

1. On the Section Details page, tap Duplicate Last Cell.
2. Keep duplicating the last cell until the table is fully populated.

Hey, maybe it’s a popular workshop!

Importing Images

AppCooker integrates with iCloud Drive, so it’s easy to import images. If you haven’t done so already, download this zip file containing images and icons. If you want, you can generate the icons yourself in this Sketch tutorial.

Transfer Images to iCloud Drive

1. From a desktop web browser, log into www.icloud.com/#iclouddrive with your Apple ID.
2. Within iCloud Drive, create a new folder called AppCookerImages.
3. Unzip the AppCookerResourceFolder.zip file.
4. Drag all the image files from Finder to the iCloud Drive folder.

AppCooker’s integration with iCloud makes it a cinch to transfer images and backup files.

Set the Tab Bar Icons

Currently, two tab bar icons are set to default star and ellipsis images. For this mockup, you’re going to use a calendar image with an “11” to represent Friday, March 11th. Likewise, you’ll use a “12” icon for Saturday.

1. Back in the AppCooker Editor, select the tab bar at the bottom of the screen.
2. Tap the Tabs button in the property bar. This will reveal a Tabs modal.
3. Select the first cell, which is named Favorites.
4. Rename the Title to Friday.
5. Select the Icon cell. This will reveal an action sheet.
6. Select iCloud Drive from the bottom of the list. This will open an iCloud Drive modal.
7. Select the AppCookerImages folder you created earlier.
8. Select march11fill.png. This sets the icon and dismisses the modal.

Even though the image is green, you’ll notice the tab bar icon is blue. Certain icons in iOS are rendered as template or stencil images. In a later step, you’ll set a tint color to fix this.

For the icon on the second tab, repeat the same steps as before. Except this time:

1. Change the Title from “More” to Saturday.
2. Use the file march12outline.png.

As a final touch, set the tab bar’s tint color to RWGreen:

1. Make sure the tab bar is still selected.
2. In the property bar, tap the Tint button.
3. Select RWGreen from the color palette.

The Friday icon will now be green with a filled calendar icon, and the Saturday icon will be the gray outline version.

The calendar outline icon has a lot of empty space, so when you select it, the color change isn’t obvious. This is why you’re using a separate fill version for the selected state.

Add the RWDevCon Logo to the Table View Header

The last piece of UI on this screen is the RWDevCon branding logo in the table view header. It’s time to grab another icon from iCloud Drive.

1. Tap the image icon in the navigation bar.
2. Select iCloud Drive from the drop-down list.
3. Within the AppCookerImages folder, select rwdevconlogo.png. This adds an image to your screen.
4. Drag and resize the image to center it inside the table view header.

You can use the orange guides to help you maintain aspect ratio and snap to element boundaries.

Tab Bar Transitions

One compelling use case for AppCooker is its ability to create interactive transitions between screens. You can customize these transitions with animations to mimic push, pop and tab bar transitions.

Duplicate the First Screen

Before you can create a transition, you need a second screen. Since the Friday and Saturday tabs are so similar, you’re just going to duplicate the first screen.

1. If you’re on the Editor workspace, tap Done in the top-left corner to return to the Screen View workspace.
2. Tap the Home screen. This will reveal a popover menu.
3. Tap Duplicate to create an identical screen named Home 2.
4. Tap the word Home and rename it Friday.
5. Rename Home 2 to Saturday.

Update the Tab Bar Icon Images

Right now, both tabs look identical. You’re going to update the Saturday tab so you can tell it apart from Friday.

1. Double-tap the Saturday screen to return to the Editor.
2. Using the steps outlined earlier, change the Friday tab icon to march11outline.png.
3. Also change the Saturday tab icon to march12fill.png.
4. While editing the Saturday tab icon, check off the Selected cell.
5. Change the table view section header text to Saturday 9:00 AM instead of “Friday”.

When you mark the Saturday tab bar icon as Selected, it automatically de-selects Friday.

Create the Tab Bar Transition

The tab bar widget has some built-in linking capabilities. You can leverage this to link the new Saturday tab to the Friday tab.

1. Within the Saturday Editor, select the tab bar element.
2. Select the Tabs button from the property bar. This opens up a Tabs modal.
3. Select the Friday cell.
4. In the Link options section, toggle the Link switch.
5. Tap the Select a Target screen cell. This takes you to the Item Link page.
6. Under the Screen targeted section, tap Select a Target.
7. On the Screen Targeted page, select the Friday cell. This returns you to the previous page.
8. Under the Type of transition section, select the Fade +0.3 sec cell. This takes you to the Type of Transition page.
9. Change the transition type to None.

You just created a tab transition that goes from the second tab to the first, with no animation. You’ll see a blue square over the Friday icon, which indicates it’s tappable.

Now you can circle back and create a transition from the Friday screen to the Saturday screen.

1. Tap Done in the top-left corner to return to the Screen View.
2. Double-tap the Friday screen.
3. Repeat the steps above for creating a tab bar link. But this time, link the Saturday tab bar icon to the Saturday screen.

Test the Transition in Preview Mode

You need to test the tab bar transitions to make sure they work. To do so, you have to use AppCooker’s Preview mode.

1. In the Screen View workspace, tap the Play button, which is a triangle icon in the navigation bar. This takes you into Preview.
2. Optionally, tap the Link icon to toggle off the blue tappable area.
3. Tap the Play triangle to start the preview.
4. Verify that the selected tab changes as you tap the Friday and Saturday icons.
5. Double-tap with two fingers to exit the preview.

When using Preview, you won’t be able to interact with the mockup until you tap the Play button. And once you’re in Play mode, remember to double-tab with two fingers to exit.

One benefit of AppCooker is that you can design and test on the same device. Since you’re using an iPad, you have access to gestures like tap, swipe, multi-touch and device rotation.

Smart Back Transitions

Screen transition animations usually come in pairs. When you push a detail page, you pop to go back. Likewise, when you present a modal, you dismiss to go back. AppCooker has a convenient feature called Smart Back that uses the reverse animation to return to the previous screen.

Create a Detail Page

Before you can play with this feature, you first need to create a detail page.

1. Navigate back to the Screen View workspace.
2. Double-tap on an empty area of the workspace to create a new screen.
3. Rename the new screen Detail Page.
4. Double-tap on the screen to enter Editor mode.
5. From the Widgets menu, add a status bar, a navigation bar and a table view.
6. Tap Done to return to the Screen View.

You just created a detail page with a few UI elements. But look closely at the navigation bar widget and you’ll notice a blue tappable area over the Back button. It turns out this button is pre-configured with a Smart Back link. Just by adding a navigation bar, you’re halfway to finishing your Smart Back transition.

Create a Simple Link

The next step is to create a link from the Friday screen to the Detail Page.

1. Open the Editor for the Friday screen.
2. Tap the Link button in the navigation bar.
3. Select Add a Simple Link area.
4. A red box will appear onscreen. Drag and resize it so it covers up the first Beginning Swift cell.
5. In the property bar, tap Choose a target screen. This will open a popover.
6. Tap the Select a Target cell.
7. Select the Detail Page cell.
8. Change the Type of transition to Cover R.

The Simple Link creates a transition from the Friday tab to the Detail Page, using the Cover Right animation. The Smart Back button is already in place on the Detail Page, and it will play the animation in reverse on the return trip.

Test the Smart Back Link with Preview Mode

Use Preview to check out your new Smart Back link. Refer to the prior instructions for entering Preview mode, but this time, make sure the Link button is on so it’s easier to tell which areas are tappable.

Adding an App Icon

Before you show the client your progress, it’s a good idea to include an app icon.

1. Navigate back to your project’s App Board.
2. Select the App Icon editor.
3. Tap the large blank icon. This takes you into Editor mode.
4. In the navigation bar, select the image icon , and select iCloud Drive from the list of options.
5. Within the AppCookerImages folder, select rwdevconIcon.png.
6. Pan and resize the image until it fills the entire icon area.
7. Tap Done when you’re finished.

The process of importing an app icon is similar to importing a regular image. The main difference is that you’re using the icon editor instead of the screen editor.

Importing and Exporting Files

When exporting your project, you have three file formats to choose from:

1. .appCooker is a full backup of your project. Anyone with this file can continue editing where you left off.
2. .appTaster is a playable mockup that clients and coworkers can view using the free companion AppTaster app.
3. .PDF lets you export screens and other project information for viewing on a computer.

Export your project in the AppTaster format so you can show off your progress to the client.

1. Navigate to the App Board of your project.
2. Tap the Action icon in the navigation bar. This brings up a modal where you can Choose a format.
3. Select the AppTaster icon.
4. (Optional) Enter your email address in the Send comments to field.
5. Tap Continue.
6. On the Send a Copy page, select the Email option. This opens an email composer which is pre-populated with instructions.
7. Instruct your client to download the AppTaster app before opening the email attachment.

When the client opens the .appTaster email attachment, she will have the option to Copy to AppTaster. Within AppTaster, the client can comment on individual screens, and these comments are sent to the email address you provided.

Challenge

You’ve started on the Detail Page, and your challenge is to build out the rest of the screen. This is what it looks like before and after:

You can continue with your existing project or download the challenge starter project below.

Your goal in this challenge is to not only apply what you’ve learned, but also to explore other properties available on native widgets. AppCooker doesn’t do everything Xcode does, so you’ll have to work around AppCooker’s limitations. Here are a few tips:

• You can expand the height of the screen using the Screen Size button in the property bar.
• You can customize the navigation bar’s Style and Tint colors.
• The table view has a Grouped style and a Row Height property.
• There are cell styles other than Subtitle, such as Left Detail.
• For custom cells, you’ll need to drag and drop multi-line text and images.
• Each table view only supports a single Row Height. To create cells of varying heights, one workaround in AppCooker is to use multiple table widgets.
• The Resources folder has a few conference speaker avatars you can use as placeholder images.

Ready? Download the challenge starter project if you need it.

To import an .appCooker file, first transfer it to iCloud Drive. Then within AppCooker, tap the plus button in the navigation bar on the project screen to access iCloud Drive.

If you want to check your work, you can download the finished challenge.

Where to Go From Here?

AppCooker is an easy-to-use prototyping tool for creating interactive mockups. There’s a lot more you can do with AppCooker beyond what you’ve seen here. To learn more, check out these video tutorials from the official website.

I hope you enjoyed this tutorial, and if you have any questions or comments, please join the discussion below!

The post How to Make App Mockups With AppCooker appeared first on Ray Wenderlich.