All Activities
Design digital mockups

Design digital mockups
Green highlight

Create simple digital mockups of an app or website using drawing tools, templates, or paper sketches to plan layouts, colors, and buttons.

Orange shooting star
Download Guide
Collect Badge
Background blob
Challenge Image
Table of contents

Step-by-step guide to create simple digital mockups

Here at SafeTube, we're on a mission to create a safer and more delightful internet. 😊

How to Create Mockups In Figma? | Figma Tutorial For Beginners | UI/UX Figma Mock-Up | Simplilearn

What you need
Colouring materials such as markers or crayons, eraser, paper, pencil, printed templates or grid paper optional, ruler, sticky notes or index cards

Step 1

Pick one app or website idea to design and say its name out loud

Step 2

Decide if your mockup is for a phone tablet or computer and draw a matching rectangle on your paper

Step 3

Draw a simple layout inside the rectangle with a header a main area and a footer

Step 4

Add a navigation area like a menu bar or buttons and draw them where people will tap or click

Step 5

Sketch the main content pieces such as images text boxes lists or forms in the main area

Step 6

Write a short label next to each element that explains what it does for example Search or Buy

Step 7

Choose two or three colors and one font style to use across the screens

Step 8

Color in your mockup and darken important lines to make the design clear

Step 9

Make at least one more screen such as a details or settings screen using the same steps

Step 10

Use arrows or sticky notes to show how users move from one screen to another when they tap buttons

Step 11

Take a photo or export your mockup files so you have a digital copy

Step 12

Share your finished mockups on DIY.org

Final steps

You're almost there! Complete all the steps, bring your creation to life, post it, and conquer the challenge!

Complete & Share
Challenge badge placeholder

Help!?

What can we use instead of special art supplies or a camera if we don't have them?

Use colored pencils or crayons instead of markers and use a smartphone camera or a scanning app to take a photo or export your mockup files.

My arrows or sticky notes for navigation look messy—how can we make the user flow clearer?

Darken and number the arrows and write short action labels like 'Tap Menu' next to them so the path between your header, main area, footer and the extra screen is easy to follow.

How can I adapt the steps for different ages (younger kids vs older kids)?

For 5-year-olds use a pre-drawn rectangle, big shapes and stickers with single-word labels; for 8-year-olds ask them to draw a phone and one extra screen, pick two colors and label elements; for 12-year-olds have them design three screens, choose a consistent font style and map navigation with arrows and notes.

How can we make the mockups more realistic or impressive before sharing on DIY.org?

Add a simple logo, fill the main content boxes with real sample text, include a details or settings screen as instructed, and take a clean photo or scan to export a polished digital copy to share on DIY.org.

Watch videos on how to create simple digital mockups

Here at SafeTube, we're on a mission to create a safer and more delightful internet. 😊

Easily Create Box Mockup Photoshop Tutorial

4 Videos

Facts about basic UI/UX and prototyping for kids

✏️ Many designers begin with quick paper sketches because they're the fastest way to try lots of ideas.

🖱️ Buttons with simple, action words (like “Play” or “Buy”) get more clicks than vague labels.

🧠 Creating a simple mockup can catch big problems early and save a lot of time and effort later.

📱 Over half of global web traffic comes from mobile devices, so mockups should check small screens first.

🎨 People form a first impression of a website in about 50 milliseconds — colors and layout matter almost instantly!

How do I create simple digital mockups with my child?

Start with a clear idea and sketch a few layouts on paper to label headers, content, buttons, and navigation. Move to a simple tool like Google Slides, Canva, or a tablet drawing app and recreate your paper wireframe using shapes and text. Pick colors, add icons, and make multiple screens as slides. Let your child ‘tap’ between slides to test flow, then iterate based on what’s confusing or fun. Keep sessions short and playful.

What materials do I need to make simple digital mockups?

You’ll need a device (tablet, laptop, or desktop) and optionally a stylus. Paper, pencils, markers, and sticky notes are helpful for quick sketches and ideas. Free tools like Google Slides, Canva, or Figma work well; a family email may be needed to set up accounts. A printer/scanner is optional for moving paper sketches to digital form. Keep everything simple—templates and shape tools speed up the process.

What ages is this activity suitable for?

This activity adapts well across ages: preschoolers (4–6) can do simple layouts and choose colors or stickers; early elementary (7–9) can use drag-and-drop tools and label buttons; tweens and teens (10+) can learn basic wireframing and use apps like Figma to prototype interactions. Adjust complexity, supervise account setup, and offer step-by-step prompts for younger children to keep it fun and educational.

What are the benefits of designing digital mockups with kids?

Creating mockups builds design thinking, problem-solving, and visual planning. Kids practice sequencing, user-focused thinking, and basic digital skills while improving communication as they explain choices. The activity encourages creativity, confidence, and collaboration when done with family. It also introduces concepts like layout, color contrast, and usability that help future learning in coding, art, or product design. Short, guided projects keep it rewarding and age-appropriate.
DIY Yeti Character
Join Frame
Flying Text Box

One subscription, many ways to play and learn.

Try for free

Only $6.99 after trial. No credit card required

To create a safe space for kid creators worldwide!

Discovery Tools

DIY Wiki

DIY TV

Creativity Tools

How to draw

Teacher Tools

SafeTube

DIY Blog

2025, URSOR LIMITED. All rights reserved. DIY is in no way affiliated with Minecraft™, Mojang, Microsoft, Roblox™ or YouTube. LEGO® is a trademark of the LEGO® Group which does not sponsor, endorse or authorize this website or event. Made with love in San Francisco.