Building a Mobile Interface With Sketch: Creating an Artboard and Establishing Layout
Interactive

Building a Mobile Interface With Sketch: Creating an Artboard and Establishing Layout

Biz Library
Updated Sep 04, 2018
​Since you will be designing a mobile application, you know that the size of your real estate will not change and that the overall layout will remain consistent. Let's go ahead and start by using Sketch's artboard templates by selecting the iPhone7. You can use material design if you are designing for Android, but for demonstration purposes I will show you how to do it through an Apple device. The artboard size will be 375px width and 667px height. Remember that, although there is a fixed width, the height of a mobile screen can be much larger than 667px. Scrolling is a huge navigational piece to be aware of, treat the 667px height as a "mask" in a sense. Once I have done this, let's define the layout I will have to work within. Now that we have done this, we will want to replicate this for all additional screens to ensure everything is lined up.​