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
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.
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.
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.
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.
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.
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.
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.