Learn how to use Sketch to quickly lay out a mobile home screen for a UX multidevice project. In this video, Diane Cronenwett shows you how to quickly layout a mobile home screen for a UX multidevice project.
- [Instructor] We've done a first pass at some context scenarios and created a high-level navigation scheme for our music app. Now it's time to start laying out the design. I use Sketch for my design work, so I've opened the file I'll be working on. To add a new artboard you can simply press the letter a or you can go to the insert menu at the top left of the screen and insert artboard. When you insert an artboard on the right hand inspector you'll see some options for artboard templates, which include Apple devices, material design, and responsive web.
You also have options for common paper sizes and to customize your own artboard size. For this app, I'll select iPhone 8 from the Apple devices menu. The two icons on the right of the selection menu for artboard templates are a toggle for either portrait or landscape mode. I'll keep mine at portrait. I'm creating a rough layout of the music app, so at this stage I'm not worried too much about the particulars of spacing. But I will apply a color scheme.
At this point, though, I'm really just focused on making sure the information is laid out in a clear organized manner. The first thing I'm going to do is add in my navigation bar on the top of the artboard. I've premade some navigation bars as symbols and I'll insert this one using the insert button on the top left. I'm going to now change the background color for my artboard by selecting the artboard, and from the inspector selecting the background color option and I'll change that color to a dark gray.
I've already created a palette for these colors I'll be using. So I'm just selecting the dark gray color directly from my palette. Next I want to add in some carousels and titles to this view to highlight the playlist available to this user. I'll start by adding a title by selecting the letter t to add text, and using size 18 point medium font with the lightest color from my palette, I'll add in a title for Recently Played. As a side note, the system font for Apple devices is San Francisco, and San Francisco compact for Watch OS.
If you don't have those installed, you'll want to visit developer.apple.com fonts to install them. To represent the playlist I'll add in a square with a corner radius of 3 with a size of 140 pixels for both height and width by selecting the letter r. There's an automatic border applied to the shape. To remove the border I'll uncheck border from the inspector.
In the layer menu, I'll select style and select set as default style. This selection applies the borderless style to all the shapes so I don't have to keep unchecking the border option. I've added my square to the artboard and I can see the distance between objects by selecting the square while pressing the option key and hovering over a different object. This is helpful for maintaining consistent spacing.
Next I'm going to add an image to this square by first selecting the square and clicking on the color in the fill area to open a popover menu. In the fifth icon labeled pattern fill, you'll see the option to choose an image, which I'll do now. Now I'll add the name of the playlist below the image in 14 point light gray font.
Follow these same steps to add more playlists to the artboard just like I've done here to finish up the home screen. Next up, I'll show you how we design the playlist screen.
- 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