How to bring your ideas to life using Sketch — A beginner’s guide

You have this brilliant idea for an app? You don’t know where to start? Then this article is what you should be reading.

Okay there are so many ways you could go about this. You can start hiring people to design and build an app. But if you want to build your app by yourself, here is where you should start. This article is for absolute beginners with no knowledge on Sketch.

As I discussed in my earlier article, design comes first. In this article, I will talk about two things —

- Why Design?
- Sketch-ing a wireframe in 15 minutes

So, why Design?

I, being super excited and overwhelmed by the thought of developing an iOS app, I installed all the required software for iOS development after some googling. I jumped right into building an iOS app and as I started, my mind was blank...

So, what do I do, the next best thing, I started brainstorming on a notepad on whether I should start with a login screen, what order do I want to display the contents and what content I want to display. As I roughly put them down, it is still unclear because I am not sure how the app would look like or how it would feel to have these components together. Also, I wanted to get opinion on the idea from my friends. How do I show them my scribbles in a notepad and get feedback, moreover, how would I myself use this for creating an app?

I need to know where I would put things and see if it feels right. Then I thought maybe I could do this directly on Xcode(tool used to build iOS apps), it is not easy at all. Because working with code and changing it all again involves lot of extra time and effort. And you would, at that point, feel like you had a design guideline. Hence, I took a step back to start with design.

Sketch:

Sketch is an wonderful tool and is super easy to work with. And it lets you design the basic layout just within 15 minutes.

Screenshot from Sketch Dashboard

Lets just cook-up a very simple and basic design for an MovieFinder app with Sketch. Lets say the requirements are,

  1. Login Screen.
  2. Home screen with list of movies and a tab bar at bottom.

Fundamentals to know:

  1. Install Sketch in your mac.
  2. Create a new file and let’s start with designing our app.
  3. Click on Insert at the top left, click on Artboard. On the toolbar at the right, select Apple Devices and select the device you want to work with.

4. Now once you have created the device size Artboard, you can start putting elements one by one into this.

The iOS UI Design under Insert menu provides us with all basic essential needed from status bar, tabs to the new iPhone X frames and features. There are other things like Notifications, Touch ID, 3D Touch, Keyboard, Apple Pay and much much more you can bring into your screen with Sketch. Apart from this you can also add Shapes, Text, Images and Vectors.

5. First let us Setup the iPhone X screen and the home screen’s background. Couple of basics here —

  • First, walk yourself through the insert tab. As mentioned earlier they have a lot of components. Test them all in an Artboard to understand how they look like.
Setting up iPhone X frame in Sketch
  • Now, at the top right of the right sidebar, those little blue line are similar to word alignment in MS Office, here it align the components with respect to specified margin.

6. Let us construct bunch of rectangles to represent the user name and password screen with a background image for Screen 1 with simple Text and Rectangle from Insert tab.

Fundamental features
  • Basic features for any component is that you can change its position, size, opacity, fill colors in specified area, add borders, add shadows and giving it a blur.
  • Apart from this, if its a Text component, you can change the font’s size, style, type, alignment, etc.

In the video, I am adding a Rectangle, Text and giving it opacity. Notice in Rectangle you have radius, setting it would create a rounded rectangle. Just give it a shot and see how you like it.

Quick tip: If you are using Mac, by pressing Option and dragging the component, creates a duplicate of it. This is really handy.

7. Now to create Screen 2, create a Artboard as before, add tab bar from iOS UI Design and lets create something called symbol for display card which will basically show the movie info.

  • While adding a tab bar or for any iOS UI Design or other symbols, you will have something called “Overrides”, this lets you change the predefined/default value specified upon its creation.
  • Change the value to suit the needs. Also the Drop-down specifies a set of constrained value that could be applied.
  • To customize it completely, we can either unlink/detach from symbol by double clicking the component or we could create our own symbol.
  • Creating a symbol: This a major part of Sketch wireframe, as this allows to manipulate components repeatedly faster. Lets create a symbol “card” with our movie’s preview image, a button to favorite and the movie’s name.
  • Once your symbol is created, use can use it anywhere in the file and use overrides to redefine values. Understanding this part is very vital, as you start to download shared resources, it is all built on symbols and you would need to dig deeper to customize to your needs.
Creating Symbols in Sketch
Note: You can double click a Rectangle to show its vector points and round a specified edge of a rectangle using the corner (this is similar to radius)

The most fundamental and the most essential parts of sketch are covered here. This is very basic design you can create. Any thing upon this, is improvising and to make a better design.

Few things you should read about are Group/Ungroup and Grid. And for more understanding, refer to this.

You can design icons as well with Sketch. You can make use of the below link to read more about this.

Apart from this, to learn in detail about Sketch, the easiest way would be make use of free resources from Sketch app resources.

Hope you like this tutorial. This is just the basic concept. Once you get a grip of this, you can start developing better designs and use plugins based on your needs.


I welcome all suggestions, comments and feedback. And will edit and keep this series updated.

Thanks for reading. Keep going. Happy learning and coding :) Let the change the world by building new innovative apps. :)