Designing a Podcast App in Sketch

In this series we cover using Sketch to design a podcast app. We’ll create a custom design, import icons, create symbols to reuse design elements and look at Sketch’s prototyping features.

Length: about 2 hours.

Start Series

Installments

1. Using Sketch's iOS Design Library

Subscribers only

In this episode I start designing a new Podcast App. I decided to design it in Sketch first so I could define the look & feel, flow, and data required first. In this episode we start by leveraging Sketch's iOS Design Library, then customize them by creating our own symbols. We end up with a custom themed iOS design that uses a tab bar with custom icons.

2. Using Masks to Round Corners

Subscribers only

We continue our design of a Podcast app in Sketch. This time we focus on designing a Search screen, complete with table view cells and keyboards. We'll see how to use masks to round the corners of an image and easily duplicate and offset content.

3. Designing the Podcast Detail Screen

Subscribers only

In this episode we design a Podcast detail screen, that displays the show’s artwork, name, publisher, category, and a list of episode. We also consider what this screen looks like if you’ve already subscribed.

4. Using a Color System with Symbols

Subscribers only

In this episode we design the player screen, and talk about how to create a color system for overriding colors for buttons and other UI elements.

5. Designing the Player Bar

Subscribers only

In this episode we design the "player bar" which will be a persistent view above the tab bar that we can use to control playback or get back to the play from anywhere else in the app.

6. A Look at Prototyping

Subscribers only

In this episode we take a look at the prototyping features of Sketch that allows you to link artboards together with transitions, then preview the app on an mobile-sized window. This can be a valuable tool in your arsenal when working with clients to convey ideas, nail down the navigation and flow of an application, which is something difficult to communicate with static pictures alone.

7. Exporting assets for Xcode

Subscribers only

In this episode we export the assets used in our Sketch design in a format we can use in an Xcode project. Using the Make Exportable button, we can easily export known sizes or size multiples (like 2x and 3x) and have them output as PNG files.