App Design Example in iOS

Brian Advent
A free video tutorial from Brian Advent
Software developer, educator and mathematician
4.3 instructor rating • 6 courses • 8,484 students

Learn more from the full course

From Sketch Design to iOS App with Swift and Xcode

Master Creating Custom User Interfaces for Your Apps: Design a Cool iOS App and Build it From Start to Finish

04:04:07 of on-demand video • Updated September 2018

  • Build a cool app, starting with designing it in Sketch and then build it from start to finish with Swift and Xcode
  • Customize UIKit components like CollectionViews
  • Implement cool and custom transitions between ViewControllers
  • Translate a UI design into a real app
  • Understand and apply the basics of prototyping in Sketch
  • Design user interfaces in Sketch
English [Auto] In this video I'd like to show you how I went from our design concept to real design mockups starting with an iPhone 10 art board. I have just added a large tidal navigation bar to actually measure the size and also distances for the different components for a kind of custom navigation bar that is just has a black background. And for the moment also no Barberton items. But what I'd like to add is a white status bar for an iPhone 10. So just chose that predefined symbol as well. And now we are adding a cool title using a custom font called Monserrat. And we're going to mbak this form later in our Iowas project because this is not part of the system. And to get the positioning right I'm also measuring the position of the large title in our predefined symbol. Clicking on the large title holding down the option key to get the positions in scatch and then adapt our custom launch title accordingly to it. And as for the different categories I just added a round to direct with a corner ages of 14 pixels actually and chose an image as a fill and making it 150 by 200 points in size. And also in addition to giving it this fill I also apply kind of radio and to have an option for adding my label for what actually is behind this category. This for example is the category exploration. And just to make it better readable we have added this little gradient in the background that just helps by creating larger or greater contrasts between our text and the background. And this is what we just that here and since we're going to reuse this cell again and again I have created a symbol out of that and they're just copying that symbol again and again just positioning them correctly again pressing the option key to get the positioning help from scratch. And now we're just adding one by one. These these image cells one by one so that we have a kind of an idea of what we are dealing with here in the future. And now since we can override these symbols I'm just choosing different different background images and different titles for each of these image cells like exploration technology food architecture love and also space. So these are just the different categories that we have. And now that we are satisfied with how this looks I'm just about to actually clean up the project a little bit in my navigator on the left so that we know what the collection view is and then we're continuing with a little information button that is supposed to be placed in the top right corner is just to get some information about the application that we can access later. And we actually just needed the position or the distance from the right corner so I just measured that by 13 points just putting it right there. And now with that then what we also need is actually the little I as an indicator for information and I'm just positioning the eye right in the center of my circle here. And just as we did in one of the previous videos I'm using the eye not as a text but as a shape as well. So I'm just creating the outline for my eye in a second after positioning that really correctly because it's kind of difficult to really hit the center. And in a way that just feels right even if we have actually pressed the center horizontally and vertically buttons. But now that it's centered and we also have a combined shape for subtract that I am also going to apply kind of an iPhone 10 frame which is also a predefined symbol. And since the iPhone has the home indicator at the bottom and also adding that. And with that we actually have our design for the first screen ready. This is all there was to it. So now what we can actually do is copy the whole art board and or create a new art board and do kind of the same things again. So we're adding an art board. We're starting out with the iPhone 10 frame. In that case and we could also name our first. Our board of course is going to be home and the views of first are board the second dart board is going to be image selection or choose image. And here we again need our iPhone frame in order to get a better feeling for how this looks. IPhone 10. And then I thought about going really with the idea of deferens because we're trying to put the content really inner center off our application so any you can go any bigger than whole screen. So we are really putting the images that we can choose from over the whole screen and just making them a little bit darker so that we can apply some text to it later. So just added kind of another fill here let's place the status bar on top again. And this really looks cool already. But with this text you can see that content really is king here and we can just use the whole screen as our display for the nice images that we have. But in addition to the text that just says SWI to choose tap to select this is going to be something that we need to implement later. We also need a way to get back from the selection to our overview and therefore I've just copied our information button to change that a little bit in order to get a back button or a cancel button and just to get a nice X for the cancel button. I actually went with a plus sign and just looked through different fund weights and different sizes until I was really satisfied and then all we actually need to do here is to rotate our plus side by 45 degrees to actually get an x. And with that look I was kind of satisfied it is positioned correctly we have our cancel button. And with that we're good to go and we actually also have our second screen ready after adding of course the home indicator so that we can also see how this looks in this particular case. But now we already have two screens ready we have our home overview we have our image selection. And since I found that the send quote area or the send quote section of our application is very simular. I just copied the image selection and then we are now here in the shared car our share card section and our plan is to actually see a random quote here. And since I want our quotes to be as motivational as possible I went with a little lighter color as a fill. So in the case that our background image is a little bit dark We're lightening up the mood a little with this brighter white feel but nevertheless we're still going with our kind of black theme and adding a Cher card button right on top of our quote. And this is going to be the only button that you can really press in this section of our application and the songs are a good reason to make it stand out and want the user really to press this button and share the cool card with the motivational quotes so we've chosen a strong contrast between tacks and the background looks kind of nice with the rounded corners and just the little finish off inverting the background color or the color of our cancel button for light or background makes this whole thing really complete. And I think this is a greed starting point for our application.