Create an iOS button using Sketch

Welcome to "Design with iOS guidelines"
Unit 6: Create an iOS button using Sketch

Would you like your iOS app to be published in the AppStore hassle free? Wondering where have you gone wrong in spite of spending so much time? As of November 2015, Apple has reported that about 1,816 apps were submitted every day in an average, and out of which a small percentage of apps get through the review process.

Take the time now to review this course on how to design a button using Sketch and you will be to avoid such situation right before coding it.
 

Introduction

Why design in Sketch before coding?

  • Design and development are very crucial during iOS App development process. 
  • If the app is not well designed at the first place, the time spent on coding is in vain as it's likely to get rejected by the app store. 
  • Thus, Apple has provided the interface guidelines for its developers to let them understand the basic guidelines which could save ample time for themselves as well as the reviewers at Apple. 
  • Designing in Sketch, helps you to envision the screens before coding process

Objective of the course

Given a wireframe and a Sketch Software, the student will perform four necessary steps to create a wireframe based button on the Sketch software. The designed button should follow all the specifications mentioned on the wireframe and should be previewable in either .PNG or .JPG format.

What we learned so far?

We have covered the following so far:

1. Introduction to iOS Guidelines

2. Recognizing Good and Bad iOS practices

3. Importance of designing in Sketch

4. Basics of Sketch software

Entering Skills

Before going into this module, you should be able to do the following:

  • Memorize the iOS guidelines for designing a button
  • Draw and understand basic wireframes based on iOS guidelines
  • Basics of Sketch software


Now press "Home" button below to go to view the "Procedure" of designing a button.

Procedure

Steps involved in creating an iOS button

1. Review the given wireframe.

2. Setup the Artboard in Sketch.

3. Create the button in Sketch based on the wireframe.

4. Export the button to either ".JPG" or ".PNG" format.

Lets go through the steps again

A quick practice

  • Review the given wireframe.
  • Setup the Artboard in Sketch.
  • Create the button in Sketch based on the wireframe.
  • Export the button to either ".JPG" or ".PNG" format.
Arrange the following steps in a correct sequential order by dragging each step.

Step 1: Review the given wireframe.

What is a Wireframe?

A wireframe is a skeletal model which usually represents the functional elements of a website or an app screen with specifications such as dimensions, color, position and etc.

In order to design a button using Sketch, you need to make sure that a given wireframe:

  • Is drawn digitally or manually on a paper.
  • Contains fewer details and mostly represented with lines and boxes.
  • Has all the required specifications which are iPhone device, dimensions, and position. 
  • Color and font style of the button can be of your choice, if not mentioned in the specifications.

 

Step 1: Quick Test 1 of 2

For the below wireframe, place the specification description into the correct location.
  • Height
  • Width
  • Device Info

Step 1: Quick Test 2 of 2

Recall the rules of a wireframe and identify which of the following does not violate the rules:

Step 2: Setup the artboard in Sketch.

In order to setup the artboard, you need to perform the following steps:
(For better understanding, please go through the video demonstration)


Step 2.1:

Open the sketch software by double-clicking the icon on your desktop.


Step 2.2:

Click on "Insert" at the top left, to see a list of drop down menu options. Now select artboard from the list or press "A"


Step 2.3:

A panel on the right appears with a list of devices. Choose an appropriate device based on the wireframe.


Step 2: Quick Test 1 of 2

  • Open Sketch software.
  • Click on "Insert" located on the top left menu bar.
  • Choose "Artboard" from the dropdown options.
  • Choose a device from the list of devices on the right panel.
Arrange the following steps in a correct sequential order by dragging each step to set up an artboard:

Step 2: Quick Test 2 of 2

Below are the screenshots of sketch placed in random order to set up an artboard.  Please drop the right order of steps using the text blocks. (Imagine you have already opened the software)
  • Step 1: Click "Insert"
  • Step 2: Select "Artboard"
  • Step 3: Choose "iPhone 7"
  • Step 4: Artboard is setup

Step 3: Create the button in Sketch

In order to create a button, you need to perform the following steps:
(For better understanding, please go through the video demonstration)


Step 3.1:

Click on "Insert" present at the top left in the menu bar, to see a list of drop down menu options. Now select "Shape" from the list. Now select either "Rectangle" or "Rounded" based on the given wireframe.


Step 3.2:

The cursor changes to a "Plus" icon with a "Rounded box" on top of it, to indicate that the Rounded rectangle mode is on. Now drag on the artboard until the right measurement or simply enter the dimensions near "size" present on the right panel.

Step 3.3:

You can adjust the position of the button by dragging it or enter the values at "Position" present on the right panel. 


Step 3.4:

To add text to your button, select "Text" from the dropdown menu of "Insert". The cursor changes to text mode. Now place the cursor on the button to start typing your text. Adjust the text size, position and style from the options at the right panel.


The right panel consists of different types of button options such as "Position", "Size", "Radius", Color options to fill or for outline, etc.,

Step 3: Quick Test 1 of 4

  • Click on "Insert"
  • Choose "Shape" from the drop down menu.
  • Choose "Rounded Rectangle" from the secondary drop down menu.
  • Drag the mouse on the artboard to create a button.
  • Adjust the size and position of the button from the right panel.

Step 3: Quick Test 2 of 4

Below are the screenshots of the right panel in Sketch. Which of the screen is correct when clicked on "Insert > Shape > Rounded" option?

Step 3: Quick Test 3 of 4

Below are the screenshots of the right panel in Sketch. Which of the screen is correct when clicked on "Insert > Shape > Rounded" option? Please drag the text to the relevant region.
  • To change position of the button.
  • To add shadow to the button.
  • To change the radius of the button.
  • To change the dimensions of the button.
  • To fill the button with a color
  • To add an outline to the button

Step 3: Quick Test 4 of 4

Imagine that you were given a wireframe to create a button using the sketch software. Assume that you have already setup the artboard. Please place the text based on the sequence of  screens.
  • Step 1: Click "Insert"
  • Step 2: Choose "Shape" from the drop-down menu.
  • Step 3: Choose "Rounded" from the secondary drop down.
  • Step 4: Drag the cursor on the artboard to create a rounded button.
  • Step 5: Adjust the button properties.
  • Step 6: Click on "Text" from the drop down menu of "Insert"
  • Step 7: Add text to the button.
  • Step 8: Adjust the font style and add color to both text and button.

Step 4: Export the button

In order to export your designed button, first select the artboard on the left panel. Upon selection, the right panel changes to exportable options. Under "Export" choose the format in the drop-down and click on "Export <artboard name>".  Choose a destination and click "Save".

Here is a video demonstration for better understanding. 

Step 4: Quick Test 1 of 3

  • Click on the artboard title present in the left panel.
  • Choose "Format" on the right panel.
  • Click "Export <Artboard name>"
  • Choose a location on your local storage
  • Press "Save"
Arrange the following steps in a correct sequential order by dragging each step to export the button.

Step 4: Quick Test 2 of 3

Imagine you have designed a button and would like to export the screen in ".JPG" format. Where would you click to change the format in the below screen:

Step 4: Quick Test 3 of 3

Where would you click to export your button design?

End of Course