Re-designing Headspace App

Codestars by Rob Percival
A free video tutorial from Codestars by Rob Percival
Teaching the Next Generation of Coders
4.5 instructor rating • 69 courses • 1,927,270 students

Learn more from the full course

The Complete Sketch 5 Course - Design Apps & Websites 2020

Master Sketch software and learn a modern approach to designing mobile apps, websites, and everything UI/UX

15:17:44 of on-demand video • Updated April 2020

  • Master the number one platform in UI/UX design, Sketch.
  • Take an idea and bring it to life. Everyone has a great idea, this course will allow you to start building your dream.
  • Wireframe websites, mobile apps, and more.
  • Design Mobile Apps, Websites, Web Apps & More
  • Create a clickable prototype that looks and functions like the real deal.
  • Build a style guide to make sure everything you do stays on brand.
  • Approach product design from a complete Design System
  • Join a startup, land your dream job, or freelance on the side for extra cash
English [Auto] Get excited because we are going to be designing our very first mobile app screen, I'm pretty excited about this speed project and it's designed not to go into detail, but to show you exactly what we can do with the things that we've already learned in sketch. Now, included in this lecture's resources is a download for the Headspaces Speed Project. I want you to pause the video. Go ahead, download that project, file, open it up and sketch and it'll look a little something like this. Go ahead and do that now. Great. So you should be looking at a screen that looks like this. We have two art boards here on the left. We have a screenshot from the app itself. So this is just one layer. It's a screenshot. So it's an image or a bitmap. And I've gone ahead and I've inserted an empty art board for the iPhone X. Remember how we do that? We can simply hit a four Arthaud, select Apple devices from our dropdown and select iPhone X.. I've gone ahead and inserted a new art board. I'm going to delete that one because we won't need it. Now, in this entire project, we're basically going to be copying things. So we're not coming up with our own design. And at times it may seem a little bit tedious, but you will see the power of sketch and how quickly you can create something that appears to be so complicated and time consuming. So with that being said, what we're going to do is we're going to be focusing on our screenshot over here because we're essentially going to be trying to draw shapes and put text on top of the existing shapes and text. So to start, we're going to focus on this top section, this blue section, and we're going to be inserting everything possible from that area, including the status bar here at the top. I'm going to go ahead and hit command plus to zoom in. And one other thing I want to do is I want to start using rulers. And if you recall from Sketch University, we went over rulers briefly to make sure that we have everything lined up properly. So what we can do is we can use rulers to make sure that our content is exactly where it needs to be now, because we know that both of these art boards are lined up perfectly at the top. And if you recall, we can use smart guides by hovering over our ruler and we can place them anywhere on the canvas. I know that I can mark the exact bottom of this upper space, this blue space by hovering using my ruler. And I can place this guide simply by clicking. So now if I move over to my other art board, I can see exactly where that needs to end. Now, it is important to note that I currently have the Head Space Screenshot Art Board selected. So when I select my Headspace app design, that ruler or that guide is going to disappear. So what we need to do is we need to go ahead and I'm going to select the headspace screenshot. I'm going to remove that ruler and I'm going to make sure that I have my Headspace app design selected before I insert those rulers. So I'm just going to go ahead and I'm going to mark up this entire upper section so we know exactly where to place things, starting with this bottom section. And we'll notice there's a little almost status or progress indicator here. So I'm going to mark the top of that. I'm going to mark the button placement here. So the bottom and the top. I'm going to mark the bottom and top of this large text here will call this header text. I'm going to do the same for this text right here and then right here at the top. This is what's referred to in iOS as a status bar. And we're going to mark that as well because we're going to insert that. So now that we've placed these guides all over, we should see them across our new our board. We're going to start creating. The first thing I'd like to do is I want to add this blue background. So basically all we're going to do is we're going to insert a rectangle. Now, it doesn't have to be the exact size of the board. We can start outside of the board. But let's just scroll down and make sure we snap to this bottom God so it's automatically going to snap to the bottom guide. And then I need to choose the correct color so we know how to do that. All we have to do is select our fill and we're going to use the eyedropper tool here to select any color on our canvas. We're going to hover over the light blue color. So make sure you don't have over one of these shapes. But I'm going to hover over this light blue selected and there we go. We've added our first layer to the design. Now let's make sure that we stay organized. So we're going to be renaming layers and we're going to be grouping them. I'm going to rename this blue background. And hit enter great. The next thing I want to do is I want to add this status bar here. Now, we could go ahead and create this from scratch. But luckily for us, Sketch does a great job of making iOS elements available as symbols. So what I want you to do is I want you to go to insert hover over iOS UI design and you'll see they've made a lot of handy UI elements for us. But if you go to the bottom to iPhone X and you hover over status bar, we can select a black or white status bar. Now you may notice that the the actual app is using black, but I actually think it look better using a white status bar. So that may be the one difference in this. Let's go ahead and select our status bar. You could choose black or white and you'll notice that I'm just hovering over my new design and I'm going to place it right in between these two guides. Now, zooming in, we did a pretty good job vertically. But you'll notice by looking at the outside box here with the eight handles that it's not quite centered. We learned in Sketch University a lot of different ways to center in and space items and make sure things are aligned. So what I want you to do is I want you to pause the video, make sure that this is centered on the canvas using whatever tools you need to, and then come back and we'll go ahead and look at how I would do it. So go ahead, pass the video now. Well, because this is inside the art board and it's selected, all I have to do is go up to my inspector here and my alignment options and I'm just going to select a line horizontally. Now, it's perfectly centered and we have our status bar. Great. That was easy. The next thing I want to do is I want to draw these shapes. So we have these background shapes here and they appear to be these kind of rounded rectangles. So what we're going to do is we're going to draw them over here, then we're going to move them over here and then we're going to mask them. So we're going to do that in the next lecture, get excited.