Now that we've created a simple mock up, let's build on what we've learned and use some new controls to create a more complex screen. Let's create the homepage for balsamic music. What you see after you've logged in, it will show you all the music that you have plus a panel on the right showing what's playing now. We'll also have a little featured artist area at the top. We'll start by cloning our previous mock up, and then clearing out the contents. Let's begin the mock up by defining the different parts of the screen.

For this video, we'll rely only on quick add to get used to using it. You can always show the UI library by pressing Ctrl or Command L. And remember that many controls can be searched by other names. So you don't have to remember the control name Exactly. Down here we'll have the list of albums and some tabs for accessing the other parts of the app. Then we'll add it rectangle over here for the now playing area. The area at the top will be for the featured artist.

Let's start designing their titles or subtitles are good for labeling sections. We'll add a subtitle called featured. Then an image. Now another subtitle but we'll make this one smaller so it doesn't compete with the other one. Some placeholder text. To better indicate that this will be a longer block of text, we can type the word Lorem and get lorem ipsum placeholder text.

Now we'll move on to the tabbed area below. Let's have four different sections here, my music, explore radio and my account. The music tab will be a list of all the albums in the user's library. We want to show that it might be a long list, so we'll show a scroll bar using the property inspector. Let's add another subtitle here to label this section. Now we'll create some thumbnail placeholders for the album's let's use the image control again for the album art.

Now some texts for the album name, an artist will use the text formatting codes to make the first line bolt and we'll center the text using the property inspector. And finally, align them both. We want to duplicate this a bunch of times, so we'll group it first to make that easier. Once we have one row how we want it, let's group that entire row and just duplicate the whole row. Now everything will stay together. As we showed earlier, you can have groups within groups.

Notice that the last row goes outside of the window border, we could just resize the window to make it fit, but it will look even more realistic. If we can show this last row is cut off. Because it's a scrolling list. Here's a little trick you can use images and grouped controls can be cropped to only show a part of them. Let's use that to cut off the bottom of this group. They're now onto the now playing panel on the right.

We'll start by quickly adding some audio player controls and icons. Once you get familiar with the controls and icons, you'll find that you can find something for pretty much anything you need. Now let's take one of our album thumbnails and put it over here, we can double click into the groups and copy it, then press the Home icon to get back out. This is an easier way than ungrouping copying, and regrouping. Now we can paste the thumbnail that we copied. Now all that's left is a tracklist.

For that we'll use the data grid control. I have some texts that I prepared earlier that I'll paste in. Now we'll resize and I'll play with the properties a bit Looks pretty good and we're done.