Design Your Own App/web
Green highlight

Design your own simple app or website using paper prototypes and block coding; plan screens, add buttons, and test ideas with friends.

Orange shooting star
Start Creating
Background blob
Challenge Image
Skill Badge
Table of contents

Step-by-step guide to design your own app or website

0:00/0:00

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

Learn HTML for Beginners - W3Schools.com

What you need
Coloring materials, eraser, paper, pencil, sticky notes, tape

Step 1

Choose a fun app or website idea and write one short sentence that says what it does.

Step 2

Decide who will use your app and write their name or age next to your idea.

Step 3

Make a quick list of the main screens your app needs and write each screen name on the top of a separate paper.

Step 4

Draw the first screen on one paper with a big title and one main picture.

Step 5

Draw the other screens on their papers showing where pictures and text will go.

Step 6

Add buttons on each drawn screen and label each button with what it should do.

Step 7

Use sticky notes or arrows to show which button goes to which screen.

Step 8

Tape the pages together so you can flip from screen to screen like a real app.

Step 9

Ask a friend to try tapping the buttons while you change the pages to match their taps.

Step 10

Write down two things to change from the test and mark them on your paper screens.

Step 11

Open a block-coding tool (like Scratch) and start a new project to turn your paper screens into digital screens.

Step 12

Create each screen in the tool and add a button sprite that you program with blocks to switch screens when clicked.

Step 13

Test your interactive app in the tool, fix any bugs you find, and then share your finished creation 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
Challenge badge

Help!?

What can we use if we don't have sticky notes or tape to show button links and attach pages?

If you don't have sticky notes or tape, use index cards or cut paper tabs for arrows and fasten pages together with binder clips, staples, or a glue stick so you can still 'tape the pages together' and flip screens.

My button sprite in the block-coding tool doesn't switch screens when clicked—what should I check?

If a button sprite doesn't switch screens, verify you recreated each paper screen as a Scratch backdrop or sprite and use a 'when this sprite clicked' block to broadcast a message or switch backdrop while ensuring no hidden sprites are covering the button.

How can we adapt the activity for different age groups?

For younger kids (4–6) simplify to 2–3 paper screens with a big title and one main picture and have an adult convert them into backdrops, while older kids (9–12+) can add more screens, complex button logic, variables, and lists when creating button sprites in Scratch.

How can we extend or personalize our app project after testing and fixing bugs?

To enhance your app, customize drawn screens with unique colors and characters, add sound effects and sprite animations using 'play sound' and 'switch costume' blocks for each button sprite, then retest and share the finished creation on DIY.org.

Watch videos on how to design your own app or website

0:00/0:00

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

Build a FREE Website with Google Sites

4 Videos

Facts about app and web design for kids

✂️ Paper prototyping lets teams sketch and test whole app screens in minutes — no code required.

🧩 Block-based coding (like Scratch) uses puzzle-like blocks so beginners learn programming logic without typing syntax.

👥 Testing with just 5 users often uncovers the majority of common usability problems — small tests are powerful.

🖥️ The Apple App Store launched in 2008 with about 500 apps available on day one.

🗺️ Wireframes are simple blueprints that show layout and navigation, not final colors or artwork.

How do I guide my child to design a simple app or website using paper prototypes and block coding?

Start by brainstorming the app’s purpose and sketching each screen on paper. Cut out buttons, icons, and menus from paper and use sticky notes to simulate navigation. Test the paper prototype with family or friends and note changes. Then open a block-coding tool (Scratch, ScratchJr, MIT App Inventor) and recreate screens with simple sprites/blocks. Add button behaviors, transitions, and test interactions. Iterate quickly, keep features small, and celebrate working prototypes.

What materials do we need to design a paper prototype and then build it with block coding?

Basic materials: paper, colored markers, pencils, scissors, sticky notes, tape or glue, index cards, and a ruler for neat screens. For digital prototyping use a tablet or computer and free block-coding platforms like Scratch, ScratchJr, MIT App Inventor, Thunkable, or Blockly. Optional: printer for templates, stickers for icons, and a webcam/mic to record user tests. Reliable internet and an adult account may be needed for some online tools.

What ages is designing a paper prototype and using block coding suitable for?

Paper prototyping works for ages 4–12: preschoolers (4–6) enjoy drawing screens and moving paper buttons with adult help. Block coding is best introduced with ScratchJr for ages 5–7, Scratch for 8+, and MIT App Inventor or Thunkable for 10–14+ when they can plan logic and variables. Adapt complexity, use pair programming with an adult for younger kids, and focus on short sessions to match attention spans.

What are the benefits of making paper prototypes and learning block coding with friends?

Designing an app and building it with paper prototypes and block coding boosts creativity, planning, and problem-solving. Kids learn sequencing, user-centered thinking, and basic programming concepts like events and variables. It encourages communication and teamwork when testing with friends, builds confidence through rapid iteration, and introduces user interface design and accessibility awareness. These activities also strengthen fine motor skills, vocabulary, and logical reasoning in a low-p
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

Design Your Own App/web. Activities for Kids.