Hello everyone, my name is Ranu Arga and here I will tell you how to make a mockup with Pencil. Here’s the step:

1. Install Pencil on your PC. You can install it on MacOs, Windows or Linux.
2. Open your application and you will be redirected to the main page.
3. Choose Stencil template that you want to use, you can also download it from Collection Repository. In this tutorial, I will use the Material Mobile Mockup Stencil from Collection Repository.
4. Create a new document.
5. You can edit your page properties like Page Title, Size, and Background by right-clicking the page name.
6. Drag every component that you need to use to your canvas. Start with the smartphone case. You can resize the canvas to fit the content with padding.
7. Now add the screen to the canvas. You can also edit component properties by right-clicking the component.
8. Add a notification bar, navigation bar, and your application name to your canvas.
9. Now add a new Page by clicking Add Page and give it a title.
10. You can link the component to a page so when the mockup is exported as a single web page you can click the component and you will be redirected to another page.
11. Copy all components from Splash Screen page to the Main Activity page and resize the canvas to fit the content with padding.
12. Delete unnecessary components and then add an Appbar and other components that you need and then edit the properties.
13. There are many components that you can add in the canvas like Text Field to input some data and button.
14. Don’t forget to save your file.
15. When you are done you can export the project. There are many choices but export it as a single web page so you can interact with the mockup.
16. Open the HTML file with a browser. Now you can see and interact with your mockup. Try clicking the text in the splash screen and you will be redirected to Main Activity page.