Chapter 3 - Let's Wireframe An App

What is a Wireframe?

Before building an app, app designers create a special drawing called a wireframe. A wireframe is like a blueprint or a map for your app. It helps you figure out:

• Where everything goes: Where will the buttons, pictures, and text be?
• How things will work: What happens when someone taps a button?

Wireframes are important because they let you see your ideas on paper (or on a screen) before you start building your app. It’s like sketching a picture before painting it.

---

Why Are Wireframes Important?

Wireframes help you:

1. Organize Your Ideas
   Instead of guessing where things go, a wireframe shows you exactly where to place buttons, pictures, and other parts of your app.

2. Save Time
   Planning first makes it easier to build your app because you already know how it will look and work.

3. Make Your App Better
   When you draw a wireframe, you can see if something is missing or if there’s a way to make your app more fun and easier to use.

---

Step 1: Think About Your App

Before you start drawing, you need to have a plan. Ask yourself:

1. What will my app do?

   • Will it play a sound, show a picture, or do something fun?
   • For example, “I want my app to play a dog barking sound when I tap a button.”

2. What parts will my app need?

   • Buttons: What will they do?
   • Pictures: What will they show?
   • Text: What instructions or messages do I want to show?

Take a moment to write or draw your ideas. This will help you get ready to create your wireframe.

---

Step 2: Open Excalidraw

We’re going to use a tool called Excalidraw to draw your wireframe. It’s easy to use and perfect for designing apps.

1. Go to Excalidraw in your web browser.
2. You’ll see a blank canvas—this is your space to create your app’s wireframe.

---

Step 3: Draw Your App Screen

Now it’s time to draw! Follow these steps to create your app wireframe:

1. Draw Your Screen

   • Use the rectangle tool to draw a big rectangle. This is your app screen.
   • Imagine this rectangle is the phone or tablet screen where your app will appear.

2. Add Buttons

   • Use the shape tool to draw small rectangles or circles for buttons.
   • Label each button with what it does. For example:
     • “Play” to play a sound.
     • “Next” to go to another screen.

3. Add Pictures

   • Use the image tool to upload or draw a simple picture.
   • Place it where you want it to appear in your app. For example:
     • A picture of a dog in the center of the screen.

4. Add Text

   • Use the text tool to write instructions or feedback. For example:
     • “Tap the button to hear a sound.”
     • “Welcome to my app!”

---

Step 4: Make Your Wireframe Fun and Clear

Once your basic wireframe is ready, look at it and ask yourself:

• Are the buttons in the right place?
• Are the instructions clear?
• Does it look fun to use?

If you need to make changes, that’s okay! Wireframes are meant to be updated as you think of new ideas.

---

Step 5: Share Your Wireframe

Show your wireframe to a classmate, friend, or teacher. Ask them:

• Do they understand what your app will do?
• Do they have any suggestions to make it better?

Sharing your wireframe is a great way to get ideas and improve your design.

---

Quick Quiz

1. Why do we make wireframes?
   a) To decorate our screens
   b) To plan how the app will look and work
   c) To skip the planning step
   d) To turn off the computer

2. What should you include in a wireframe?
   a) Buttons, pictures, and text
   b) Only pictures
   c) Just a rectangle
   d) Nothing at all

3. Why is it important to share your wireframe?
   a) To get feedback and make it better
   b) To show how creative you are
   c) To make it colorful
   d) To skip the building step

---

Activity: Create Your Wireframe

Follow these steps to create your app wireframe:

1. Open Excalidraw.
2. Draw a rectangle for your screen.
3. Add buttons, pictures, and text to show what your app will do.
4. Label each part of your wireframe to explain how it works.
5. Share your wireframe with someone and ask for feedback.

---

Step 6: Get Ready to Build

Once your wireframe is finished, you’re ready to turn it into a real app! Wireframes are the first step to making something amazing. Great work—you’re on your way to becoming an app designer!

Vocabulary for Chapter 3: Wireframing Apps

Term	*Definition
Wireframe	A simple drawing of an app’s design.
Blueprint	A plan showing where things go in an app.
Screen	The part of the app where you see buttons, pictures, and text.
Button	A shape you tap to make something happen.
Text	Words in the app that give instructions or information.
Feedback	Ideas to help improve your app or drawing.
Excalidraw	A tool to draw plans for your app.
Plan	Deciding what your app will do before making it.
Label	Words that explain what parts of your app do.
Organize	To arrange things neatly and clearly.

These shorter definitions are perfect for second-grade students to quickly understand the vocabulary.