Learn sketch for iOS

Location

Total Floor Area

Design

Program

Learn Sketch a design tool entirely vector-based and focused on user interface design
Sketch is a design tool entirely vector-based and focused on user interface design. It’s easy to pick up and costs a fraction of the price of Photoshop. Because of its simplicity, anyone with little to no training can learn Sketch. On top of that, it’s perfect for today’s need for designing for multiple devices.

 

When I first started using Sketch 5 years ago, it felt like a glimpse to the future. I immediately made the switch. But for many, it was an uphill battle. Vector-based design tools were unpopular back then. Very few believed in a striped-down, UI-focused design tool. Photoshop had everything they could dream of. They didn’t see an age of Super Retina screens coming. They believed that prototyping was only meant for coders. They thought that 3D was merely for adding bevels to their design. Little did they know that Sketch would soundly dethrone Photoshop 5 years later.

 

Sketch has completely changed my workflow. As a design application that I spend 8 hours a day on, there is no other tool that has influenced my work as much. Its growth is out of this world; new resources and plugins are coming out almost on a daily basis.

 

We’ve come a long way since. Artboards, Symbols and Libraries have become common in this space. Designers now collaborate more than ever, thanks to Sketch-first plugins like AbstractCraftFlintoPrincipleand Framer. Big companies like Appleand Facebook often releases their UI Kits Sketch-first.

Downloads

To follow this course, you can download the source file, which will help you compare your progress.

 

Introduction to Sketch

 

Sketch is the ultimate tool for iOS, Android and Web design. It barely weights 45MB in disk space, compared to Photoshop’s 2.17GB. As soon as you open it, you are greeted with an infinite canvas. Just like native Mac apps, you have a familiar user interface with a Toolbar, Navigator and Inspector. As a result, new users will find Sketch far more approachable because it doesn’t get in the way of producing simple designs.

“Sketch gives you all the tools you need for a truly collaborative design process. From early ideas to pixel-perfect artwork, playable prototypes and developer handoff. It all starts here.”

2. Powerful Start in Sketch

As a designer, you need a solid process to make your workflow efficient. It’s even more crucial when you’re starting, because you can avoid a lot of inefficient, time-wasting bottlenecks. One of the things that set Sketch apart is the sheer amount of plugins and resources. It’s the openness of the Sketch file, which is universally supported and well-integrated into other apps. Comparing Sketch’s base features to other design tools is like comparing the iPhone’s specs to other phones. You forget the ecosystem, which is what makes Sketch so special.

 

AbstractInVision and Framer are just some of the widely popular third-party apps that support Sketch first. This is a big deal. Just like the iPhone’s ecosystem, having access to these incredible extensions first will make your workflow ten times more powerful, flexible and up-to-date. Most importantly, it’s driven by an active community that constantly seek to better their workflow. As a result, you constantly solve pain points with new plugin releases, and refine your workflow with better techniques.

 

This section assumes that you’re already familiar with Sketch. We’re going to focus on the workflow. If you wish to learn the basics, I suggest heading to the Learn Sketch page. Also, this page is an overview of the entire workflow. If you wish to learn more about any of these topics, there is a section dedicated for each of them.

 

Downloads

To follow this course, you can download the source file, which will help you compare your progress.

3. Designing an iOS App from scratch in Sketch

We’re going to design the  app from scratch in Sketch, by using some guidelines and tips that will help your design workflow easier. After you learn to design for iOS from here, it can create a cohesive experience with multiple screens and build beautiful apps.

 

Downloads

To follow this course, you can download the source file, which will help you compare your progress.

4. Designing and adapting for iPhone X in Sketch

We’re going to cover the Navigation Bars, Icons, Table Cell and Tab Bars in Design for iPhone X. We will use the  iOS app’s Bookmarks screen and design it from scratch. By creating this screen in iPhone X, we will learn what’s new in iOS 11 along the way. 

 

Downloads

To follow this course, you can download the source file, which will help you compare your progress.

 

iPhone X

The iPhone X comes with a Super Retina Display, at 1125 x 2436 px resolution. It boasts a 458PPI (pixels-per-inch) screen, which is the highest density Apple has built so far. The Notch comes with a state-of-the-art facial recognition feature. It is one of its kind in the market and is a unique aspect of the phone.
At 1x, the iPhone X is at 375 x 812pt; the width is the same as the iPhone 6, 7 and 8 but 145pt taller. This gives us a new design challenge, but Apple has an excellent guideline to let us kickstart the design without going wrong. In the meantime, the benefits of a taller screen are that we have more spaces for contents!

5. Designing an iPad app from Scratch

Apple is more focusing on its iPad experience with the new iOS 11. With the spaces available, you can do more with these big screen tablets. But the bigger screen doesn’t mean that you can simply enlarge your designer bigger. Don’t treat iPad as a bigger iPhone. We should use the opportunity to create better typography, navigation, and hierarchy for the contents.
In this tutorial, we are going to design the Bookmarks screens for  iPad app. We will learn Adaptive Design in landscape view, Table View, and the difference of the old and new iPad Tab Bar.
If you’ve followed the Design for iOS Part 2 tutorial, you should have done designed the Bookmarks screen. If you’re not, I recommend you to go through the tutorial because you’ll learn some of the tips and techniques to use here.

 

Downloads

To follow this course, you can download the source file, which will help you compare your progress.

 

Use the Correct Library Template

 

The iOS 11 – iPhone X template is only for iPhone X, it can’t be reused for the iPad or iPhone 8, and below, the measurement is a bit different.

 

If you have downloaded the iOS 11 Sketch template from the Apple design resources, they have provided template for the other iPhone and iPad too. We can use that for this tutorial.

 

Unzip the iOS-11-Sketch.zip and you will see a Sketch file name “UIElements+DesignTemplates+Guides.sketch”. Rename it to “iOS 11” so that we can easily find the elements inside it. Now go to the Libraries tab in Sketch Preferences, and drag the iOS 11 template to it to use as Library.

 

DISABLE LIBRARY

You can temporary disable the iOS 11 – iPhone X and Sketch default iOS UI Design Library. All the Library Symbols that you’ve inserted in the Canvas will still attaching to its original document. Go to Sketch Preferences › Libraries, and uncheck the iOS 11 – iPhone X and iOS UI Design Library, this method will hide the Library from the Sketch and the Sketch Runner.

Adaptive Design

Let’s start using the Bookmarks screen to design an iPad version of it. Press A, toggle the Artboard orientation to Landscape, and choose iPad 1024 x 768. By doing this will create an iPad Artboard beside the iPhone X Artboard.
Insert a Status Bar in the iPad Artboard by searching the keyword “status bar” in the Sketch Runner › Insert. Choose the one with the name “iOS 11 > Bars/Status Bar/Light Status Bar”. Insert it to the top-left of the iPad Artboard. You will notice the width of the Status Bar is 375px, this is ok because all the elements from the Sketch iOS UI Design are made with Resizing method to make it flexible to resize. Just increase the Status Bar width to same as the iPad Artboard, which is 1024px. The Status Bar won’t stretched to some unacceptable visual; instead, its elements stay in the same size but at different positions. We called this Adaptive Design, and it is very useful for designing in multiple screen sizes.

 

NAVIGATION BAR

Copy the Navigation Bar group from the iPhone X Artboard, and paste it to the top-left of the iPad Artboard. As we mentioned, some of the iPhone X element sizes are different, and this Navigation Bar is the one. What we need to do is to replace the iPhone X Navigation Bar Symbol to the other Navigation Bar Symbol from iOS UI Design.
Select and right-click the Navigation Bar Library Symbol, hover to the Replace With › iOS 11 › Bars › Navigation Bar, and choose the “Light Large Navigation Bar with Search”. Right-click again on the new Navigation Bar, and select the Set to Original Size at the last option of the menu. Then move up the Font Resize icons and Night Mode icon to give them 70px margin to the bottom of the Navigation Bar. You will notice that Bookmarks override still applied and no need to hide other elements, because it is come from the same Apple resources.

 

UNLINK SYMBOL FROM LIBRARY

We don’t need the translucent background on the Navigation Bar, but there’s no way to hide it from the Overrides panel. We can unlink this Symbol and convert it to our document Local Symbol. It is not recommended always to unlink Symbol from its original Library, but if we want to control the Symbol design, this is the only way.
Double-click on the Navigation Bar Symbol, and you will see a dialog slide down. Click the Unlink from Library, and the Navigation Bar Symbol will immediately convert to Local Symbol. In the meantime, Sketch will bring you to the current document Symbols Page. Now, you can edit the Symbol design as you like. From here, hover to the Background layer and click the Eye icon to hide this layer. Click the Return to Instance button on the top-left of the Canvas, and you will see the Background is now hidden.

 

RESIZING CONSTRAINTS

Resize the whole Navigation Bar group to 750px width. You will notice that three icons on the right are distorted. We can resolve this by using the Resizing Constraints features. Applying constraints to layers allows you to decide how they should behave when you resize the Symbol, Artboard, or group. Constraints can be applied to any layer that lies inside an Artboard or group. By doing this, we can achieve the Adaptive Design.
Let’s undo the Navigation Bar group to its previous size. Then select the three icons, and you will see Resizing Constraints in the Inspector panel. By default, none of any constraints are applied to your layers. On the left, you can define the edges each side of your layer should pin to. And on the right, you can decide whether the size of the layer should stretch, or remain at a fixed height and/or width on resize.
More Projects