Tutorials: How to Wireframe a Mobile App Using Pencil Project: A Step-by-Step Guide

 

Pencil (commonly known as the Pencil Project, hosted at pencil.evolus.vn) is a free, open-source GUI (Graphical User Interface) prototyping and wireframing tool.

It is designed to help UI/UX designers, software developers, and product managers quickly create layouts, mockups, and visual blueprints for websites, desktop applications, and mobile apps before any actual coding begins.

What is it used for?

• Creating Wireframes & Mockups: You can quickly drag and drop elements to map out the structure of a webpage or app screen. It helps visualize where buttons, text, images, and navigation bars will go.

• User Flow Diagrams: It includes connector tools that allow you to link shapes together, making it useful for drawing flowcharts, sitemaps, and diagramming user journeys.

• Interactive Prototyping: You can link elements on one page to another page within the document. This allows you to create a clickable prototype to simulate how a user would navigate through the app.

Key Features of Pencil:

1. Built-in Stencil Collections: It comes pre-packaged with massive collections of shapes and components for different platforms, including:

   • Standard web elements (buttons, forms, tables)

   • Mobile UI shapes (iOS and Android native components)

   • Popular frontend framework shapes (like Bootstrap)

   • Flowchart shapes and connectors

2. Clipart Browser: It integrates with OpenClipart.org, allowing you to easily search for and scale thousands of free vector images and icons directly inside the app.

3. Multiple Export Formats: Once your design is ready, you can export your project into various formats, including PNG, PDF, SVG, OpenOffice documents, or even a clickable interactive HTML website.

4. Cross-Platform: Because it is built on web technologies (Electron), it runs locally on your desktop and is available for Windows, macOS, and Linux.

Who is it for?

It is a great tool for anyone looking for a completely free, offline alternative to expensive, cloud-based design tools like Figma, Adobe XD, or Balsamiq, especially when doing quick, low-to-medium-fidelity brainstorming and structural layout planning.

Download zone : ------------------------------------------------------------------------

👉 linux_shell_commands_cheat_sheet.pdf_

👉 [Download "Python Notes for Professionals" for Free Here] (Insert your link here: https://goalkicker.com/PythonBook/PythonNotesForProfessionals.pdf)

Have you read this book yet? Let me know your favorite Python tip or trick in the comments below!

📥 Linux Magazin Ro (July 2026)

Stop wasting hours filtering through fragmented, outdated forum posts. Equip your digital toolkit with clean, verified, and reproducible technical blueprints.

👉 Download the Complete Open-Source & Tech Compilation on Gumroad Now!

Have questions about any of the configurations or setup guides included in the PDF? Drop a comment down below and let's discuss!

Simply click the link below to download the PDF, print your favorite puzzles, and start solving!

👉 [[Download 100_sudoku_puzzles.pdf Here]]

*If you enjoy these puzzles, I would love to hear your feedback

-------------------------------------------------------------------------------------------------------------------

Installing Pencil on an Ubuntu/Linux system is very straightforward. You have two primary ways to get it up and running, depending on whether you prefer native packages or snaps.

Method 1: Using the Official .deb Package (Recommended)

This method ensures you get the stable native build directly from the developers.

1. Download the Package:

   Go to the official Pencil Downloads Page and download the Ubuntu Linux DEB (amd64) installer.

2. Install via Terminal:

   Open your terminal, navigate to your download folder, and use apt to install it. Using apt instead of dpkg is recommended because it automatically handles and fetches any missing system dependencies:

   Bash

   cd ~/Downloads
   sudo apt install ./Pencil_3.1.1.ga_amd64.deb
   

   (Note: Adjust the filename if you downloaded a newer version like 3.x.x).

3. Alternative via dpkg:

   If you used sudo dpkg -i <package>.deb and ran into broken dependency errors, you can easily fix them by running:

   Bash

   sudo apt install -f
   

Method 2: Using the Snap Store (Fastest)

If you prefer using Snap packages for desktop software, Pencil is available directly on Snapcraft. You can install it with a single terminal command:

Bash

sudo snap install pencil

Launching the Application

Once the installation finishes, you can find Pencil right in your system's application menu (Dash) under Graphics/Development. Alternatively, you can spin it up directly from the terminal and send it to the background so it doesn't block your prompt:

Bash

pencil &

You are all set to start wireframing offline!

 

Using Pencil is highly intuitive, especially if you’ve ever used tools like PowerPoint or Visio. It relies heavily on a drag-and-drop workflow.

Here is a quick, step-by-step guide to help you build your first app or website mockup in minutes.

1. Get Familiar with the Workspace

When you open Pencil and click "New Document", your screen is split into three main areas:

• The Canvas (Center): This is your blank slate where you draw your designs.

• The Stencil Sidebar (Left): This holds your treasure trove of shapes, buttons, forms, and icons.

• The Properties Bar (Top/Right): This is where you tweak fonts, colors, alignments, and line thicknesses.

2. Start Wireframing (Drag & Drop)

Let's say you want to build a simple mobile login screen:

1. Go to the left sidebar and find the "Common Shapes" or "Native UI Widgets" (like iOS or Android) collections.

2. Drag a Rectangle onto the canvas to act as the phone screen.

3. Look for Text Inputs in the stencil menu and drag two of them onto your rectangle (one for Username, one for Password).

4. Drag a Button stencil, place it under the inputs, double-click it, and type "Log In".

💡 Quick Tip: Use the built-in Clipart Browser tab on the left to search for millions of free icons (like a little lock icon for the password field or a user icon for the username field).

3. Customize Your Elements

Once an object is on the canvas, you can format it to look exactly how you want:

• Change Text: Double-click any element to rewrite its text.

• Change Colors: Select a shape and use the color bucket tool in the top toolbar to change the background or border colors.

• Aligning Everything: Select multiple items at once (hold Shift and click them), then use the Align buttons in the toolbar to center or space them perfectly.

4. Make it Interactive (Prototyping)

Pencil shines because it lets you build clickable flows instead of just static pictures.

1. In the bottom-left corner, click "New Page" to create a second page (e.g., your app's "Dashboard" page).

2. Go back to Page 1 and right-click on your "Log In" button.

3. Select Link to... and choose Page 2 (Dashboard).

Now, when you test or export your project, clicking that button will actually navigate to the next screen!

5. Export Your Masterpiece

When your mockups are ready to show to clients, developers, or your team, click on the Pencil Application Menu (top left) > Export Document.

You can choose:

• Commercial PDF: Great for printing or emailing static designs.

• Single/Multiple PNG Images: Perfect for dropping into presentations or Slack.

• Interactive HTML: This generates a zip folder with a mini-website. Anyone can open it in a web browser and click through your prototype just like a real app!

What kind of project are you planning to wireframe first—a mobile app or a website layout?

 

 

Designing a mobile app requires a slightly different approach than a website because you are working with limited screen real estate and touch-based interactions.

Here is how to optimize Pencil specifically for a mobile app wireframing workflow:

Setting Up Your Mobile Project in Pencil

1. Choose Your Target Platform Stencils

Pencil comes pre-loaded with native mobile components. Before you start dragging shapes randomly, open the left sidebar and look for these specific collections:

• Android (Material Design): Perfect if you are targeting Android devices or building a cross-platform app that utilizes standard Material Design layouts. It includes native status bars, floating action buttons (FAB), text fields, and navigation drawers.

• iOS UI Widgets: If you are focusing on an iPhone layout, this collection gives you classic iOS tab bars, switches, navigation headers, and segmented controls.

2. Set Up Your Screen Hierarchy (Pages)

Mobile apps rely heavily on a sequential user flow. It is best to map out your core screens in Pencil's page manager (bottom-left corner) before diving into deep design. Create a separate page for each major state:

• Page 1: Splash Screen / Onboarding

• Page 2: Login / Authentication

• Page 3: Main Dashboard / Home Screen

• Page 4: Settings / User Profile

3. Build a Reusable Phone Frame

Instead of guessing the screen boundaries on every single page, establish a consistent viewport container:

1. Drag a Phone Frame stencil (or a standard vertical rectangle sized to modern mobile proportions, like 390x844 or 412x915 pixels) onto your first page.

2. Place the standard Status Bar (with the battery, clock, and Wi-Fi icons) at the very top.

3. Select both, right-click, and choose Group (Ctrl + G).

4. Copy and paste this exact frame onto all your other pages so your app layout boundaries remain completely identical.

💡 Mobile UX Tip: Keep the 44x44 pixel rule in mind. Mobile users navigate with their thumbs, not a precise mouse cursor. Ensure that any buttons, interactive icons, or form inputs you drop onto the canvas are large enough to be easily tapped without causing accidental misclicks.

4. Wire up the Navigation Flow

Once your screens have their basic layouts, right-click on your interactive elements (like a bottom navigation icon, a list tile, or a submit button) and use the Link to... option to connect them to their corresponding pages.

When you export the final project as an Interactive HTML file, you can actually open it directly on a smartphone web browser to test the physical thumb-flow, evaluate spacing, and see how the UI feels in hand.

What kind of mobile app are you mapping out—is it a utility tool, a dashboard for data tracking, or a multi-platform app layout?