Mobile User Interface Design with Sketch

A Live Lesson Recap with Adam Rasheed

This is a recap of our recent Live Lesson with Adam Rasheed, teacher of our Design a User Interface with Sketch course on SitePoint. Our 1-hour live lesson focused on building a mobile user interface design with Sketch. For more talks by industry leaders, check out our Learn from the Experts course on SitePoint.

Mobile Design with Sketch

Sketch is a design tool for MacOS that provides designers with easy to use tools that can be used to increase their productivity and allow them to more easily create designs for their projects. Sketch is also an ideal option for mobile User Interface design, or mobile-first web designs, providing designers with several ready-made artboard sizes so that they can quickly begin designing for mobile first solutions.

In this lesson, Adam walked everyone through the creation of a real mobile-first design in Sketch. Mobile first design simply makes sense, now that mobile Internet usage is on par with, or in some contexts, surpassing desktop usage (an estimates that it’s about 60%). Mobile Internet usage has often been a contentious issue in recent years, with the meteoric rise in usage rates for mobile devices. Many designs still begin with desktop views and attempt to cut away to mold them into mobile friendly versions. The mobile-first approach ensures that core content displays well on mobile, first, and then expands the design for larger devices.

In addition to exploring the many different tools and features in Sketch, you’ll also become more consistent and efficient in your designs by re-using elements that you’ve previously created. Additionally, making changes to those elements can now propagate those changes to the other instances throughout your design, making future changes and edits a breeze. Watch the complete Mobile-First UI design demonstration to take your learning further.

Let’s recap user questions about Sketch 40 and design for Adam.

Q: Are there any benefits in Sketch that you would like to highlight to the developers?

Adam: Well, I think Sketch is actually really good out of the bat to be developer friendly. The biggest thing is the size, the distance, and the measuring tools. With things like Photoshop, it’s really hard to measure. And you’d have to really send a Word doc of all the measurements between your elements.

But send a developer a Sketch file, they can just go in and press Option and know the exact measurements and the sizing. And like we just covered, the CSS attributes, if they wanna be really lazy they can just copy the CSS attributes for every element.

Other than that, I like that they have a very good layout tool. And universally, almost, if you develop or if you design around a 12-pixel grid ,or 12-column layout, which breaks down to 8 columns on tablet, and then 4 columns on mobile, like so.

Developers can use popular frameworks like Bootstrap or the Zurb Foundation or Bourbon Neat which all have 12 column layouts as a default. So, it’s really easy to develop them right there. But then again, that’s all design.

So you want to make sure that you’re designing with good practices in mind. And the actual program that you’re using, like Sketch, should be able to allow developers to come right in and not have to worry about learning it. Just know that they can use Option and check out the distances.

Q: Do you use symbols across artboard sizes / different device sizes?

Adam: Well, I used to create different ones for each screen size, but now that Sketch 4 (actually this is in 3.9 I believe). They have resizing tools, so within a symbol now, you can say, pin this to a corner and you can, for instance if you don’t want to have different content, so for instance, the tablet actually has all of the menu links laid out. But if you had the same sort of format as your mobile… it would make sense if you positioned it right. For instance, you have to pin this to corner so it doesn’t stretch. It really makes it easier for you to change it and adapt it to different screen sizes. The only thing that you would wanna create a new symbol for is like I mentioned, when you change your content within a content format within the symbol.

Q: Why are you leaving so much space between element groups? Does it just look spaced out, or is there a technical reason for this?

Adam: Well it’s both. Good design is problem-solving, and there’s a lot of reason behind different decisions people make. Using white space is universally a very good thing. Especially in UI design where you don’t, well, where pixels are free. The more something is spaced out, the more attention you can give it. When you’re looking at it, if this is all bunched up, first it would look like one big thing, and it wouldn’t look as nice. And it would look messy.

Now that they’re spaced out, you can actually go through it, and you’ll see that, the closer something is, the more it belongs to that group. And the closer it is in the vicinity, the closer you see it in your mind and you associate it with that. So you’ll see that the metadata below and the category above is close to the title. But the actual groups themselves are far apart, because you should be able to discern the difference between the different posts. And as I mentioned, you can give each different post a little bit more attention, so you know where to tap. And that’s the reason I like using like space between different elements.

Q: Is CSS exported from Sketch generally usable as is, or do you have to do some additional work?

Adam: Let’s just do a quick example, let’s do a gradient real quick.… and then I’ll copy it, and add it to whatever elements need to have that type of gradient background. So yeah, it is helpful, but I don’t just blindly copy paste it. I’m very particular about what part of the code I use.

Wrapping it Up

Well, that wraps up our recap of the Live Lesson! SitePoint’s, Live Lessons are always worth participating in, but this one in particular was just an amazing experience. When dealing with a design program like Sketch, the ability to watch your instructor as they work, and then ask questions of them is just fantastic. If you were not able to attend, you should definitely check out the recording now! Sketch as a platform is always growing, adding new features for its users to be excited about and use in their everyday work with Sketch. This ongoing development really adds to its value as a tool for designers.

If you’re interested in using Sketch, check out the course Design a User Interface with Sketch taught by Adam on SitePoint. It’s a fantastic set of lessons for all designers who want to get farther into user interface design with Sketch!