Learn how to use Sketch to quickly lay out a mobile playlist screen for a UX multidevice project. In this video, Diane Cronenwett shows you how to quickly layout a mobile playlist screen for a UX multidevice project.
- [Narrator] In this movie, we'll create the playlist screen for a music app. We'll start by creating a new art board, and inserting a navigation bar with the left arrow on top. I'm using the navigation bar with the left arrow, to indicate that someone has tapped into the playlist, and is seeing the view of songs, associated with that playlist. Like I did previously, I'm going to make, this art board background gray.
Select the "r" key and draw a rectangle that is, 375 pixels in width, and 200 pixels in height, and place that below the navigation bar. I'm now going to add an image to this rectangle. I now want to create a list of the songs below. I'm going to draw a rectangle with the width of 375 pixels, and the height of 60 pixels.
We'll give this a dark-gray background and border, and place it below the image. In this rectangle, let's add a 36 pixel by 36 pixel square, with a corner radius of three.
The small square will represent an image, of the artist's albums, so we will update this shape with an image. Let's add the artist's name beside the image, in 16 point, medium-weight font. And below the name we will add the name of the song, in 14 point size, regular font.
Since I'll be reusing this component a few more times, I've made this into a symbol, so it's easy to update, when we place six more copies of this below. I'll enter the symbol so you can see how the symbol, renders in the inspector. I can update each image, and override the artist's name, and their song also. You'll want to continue to add more cells below. And here's an example, of what that finished playlist screen looks like.
Next, we will take a look at laying out the music player.
- Principles for multidevice design
- Responsive design in action
- Designing for multiple devices using native paradigms
- Designing mobile or tablet interfaces
- Designing for a watch, a TV, or for voice
- Creating an information architecture diagram
- Using Sketch to design your mobile experience
- Prototyping with InVision
- Exploring Bootstrap and Foundation