Web Design with Paperlike: Wireframing & Prototyping

Learning Objectives

By the end of this chapter, you'll be able to:

• Set up Paperlike on your iPad for web design work
• Create wireframes using the Apple Pencil and Paperlike combination
• Design detailed UI layouts with improved precision
• Map user flows effectively on your iPad

Introduction

The Paperlike screen protector transforms your iPad into a more tactile drawing surface, making it feel closer to sketching on actual paper. For web designers, this means better control when wireframing, prototyping, and mapping user journeys. This chapter shows you how to use Paperlike effectively for web design work, from initial sketches to detailed interface layouts.

Lessons

Setting Up Paperlike

Before you start designing, you need to install Paperlike correctly on your iPad.

Step 1: Check compatibility
Make sure your Paperlike matches your iPad model. Each iPad size needs a specific Paperlike version.

Step 2: Clean your screen
Use the included cleaning cloth to remove all dust, fingerprints, and debris from your iPad screen.

Step 3: Apply the screen protector
Align the Paperlike with your iPad's edges and apply it slowly, smoothing out any air bubbles as you go.

The included dust-absorber stickers help catch any remaining particles before application. Use them – they prevent annoying bumps under your screen protector.

Creating Wireframes

Wireframes are the skeleton of your website design. With Paperlike, sketching these feels more natural than on a bare iPad screen.

Step 1: Choose your app
Open a design app like Procreate, Adobe Fresco, or even the built-in Notes app for quick sketches.

Step 2: Start with basic shapes
Sketch rectangles for content areas, circles for buttons, and lines for navigation elements. Keep it simple at this stage.

Step 3: Add labels and notes
Write brief descriptions next to each element. This helps when you move to the detailed design phase.

The Apple Pencil's double-tap feature lets you switch between drawing and erasing quickly. Set this up in your iPad settings under Apple Pencil.

Designing UI Layouts

Once your wireframe is solid, you can add detailed UI elements.

Step 1: Refine your wireframe
Clean up your rough sketches and make the layout more precise.

Step 2: Add interface elements
Draw buttons, form fields, images, and text areas. Pay attention to sizing and spacing.

Step 3: Consider visual hierarchy
Use different line weights and shading to show which elements are most important.

Paperlike's texture helps you feel when you're drawing, making it easier to create consistent line weights and avoid accidental marks.

Mapping User Flows

User flows show how visitors move through your website. Visual mapping helps you spot potential problems early.

Step 1: Identify key tasks
List what users need to accomplish on your site, like making a purchase or finding contact information.

Step 2: Sketch the journey
Draw boxes for each page or screen, then connect them with arrows showing the user's path.

Step 3: Mark decision points
Show where users make choices, like clicking different menu items or filling out forms.

Use different colours for different user types or scenarios. This makes complex flows easier to follow.

Practice

Create a wireframe for a small business website homepage. Include:

• Header with logo and navigation
• Hero section with main message
• Services or products section
• Contact information
• Footer

Spend 15 minutes sketching this layout on your iPad with Paperlike. Focus on getting the basic structure right rather than perfect details.

FAQs

Does Paperlike affect my iPad's screen quality?
Paperlike slightly reduces screen brightness and sharpness, but most users find the trade-off worth it for the improved drawing experience.

Can I remove Paperlike if I don't like it?
Yes, you can peel it off, though it's designed for long-term use. Removing it might leave some residue that needs cleaning.

Will Paperlike work with other styluses?
Paperlike is designed for the Apple Pencil, but it can improve the feel of other styluses too. The Apple Pencil gives the best results though.

How long does Paperlike last?
With regular use, Paperlike typically lasts 6-12 months before the texture wears smooth. Heavy users might need to replace it sooner.

Jargon Buster

Wireframes: Simple layouts showing where elements go on a webpage without colours or detailed design

Prototyping: Creating a working model of your website to test how it functions

UI Layouts: The arrangement of buttons, text, images, and other elements on a webpage

User Flow: The path a visitor takes through your website to complete a task

Wrap-up

Paperlike makes iPad-based web design feel more natural and controlled. You've learned how to set it up, create wireframes, design UI layouts, and map user flows. The key is practice – the more you use Paperlike with your Apple Pencil, the more comfortable you'll become with digital sketching.

Your next step is to try different design apps and find which works best for your style. Some designers prefer the simplicity of Notes for quick wireframes, while others need the advanced features of professional design apps.

Ready to improve your web design skills? Join other designers learning practical techniques at https://www.pixelhaze.academy/membership