How to Make App Mockups With AppCooker

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.

Note: You can use the App Icon editor to rapidly iterate over icon ideas. Use the shapes icon to draw freehand or add geometric shapes.

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!