Skip to content
Tech for Everyone

Designing User Interfaces

Read Aloud with Speechify Practice with Kahoot Open Journal with Inkblok Play Online Game

What is a User Interface (UI)?

The user interface (UI) is the part of the app that users see and interact with. It includes buttons, text, images, and other elements that help users perform tasks. A good user interface is easy to use and helps people achieve what they want quickly and easily.

Examples of User Interfaces:

  • A calculator app where the numbers are easy to press.
  • A video app where users can quickly play, pause, or change the volume.
  • A game where the buttons are placed in convenient spots for the player to use.

The Importance of UI Design

Designing a good user interface is important because it makes the app more enjoyable and easier for people to use. If the app is too hard to use or doesn’t look good, users might get frustrated and stop using it. In this chapter, you will learn how to add and arrange UI components to make your app look good and work well.

Basic UI Components in Thunkable

Let’s take a closer look at the most common UI components in Thunkable. We’ll be using these to create the look and feel of our app.

  1. Labels: Labels are used to display text on the screen. For example, a label can be used to show instructions or display information.
  2. Buttons: Buttons are interactive elements that users press to make something happen in the app (like submitting information or changing screens).
  3. Text Input: This allows users to type in text, like entering their name or answering a question.
  4. Images: Images make your app more visually interesting and can help explain what the app does.
  5. Sliders: Sliders allow users to select a value by sliding a bar from left to right (e.g., choosing a volume level).

Arranging UI Components

UI components must be arranged in a way that makes sense for users. Here are some tips for arranging components in your app:

  1. Use Spacing: Make sure there’s enough space between elements so that they don’t look crowded.
  2. Align Elements: Try to align buttons, labels, and images so the app looks organized.
  3. Group Similar Elements: Keep related items (like buttons and text) close together.
  4. Consistency is Key: Keep the style and design of your app consistent across all screens. This means using the same font, color scheme, and button style throughout the app.

Activity: Creating a Simple Calculator App

In this activity, we’re going to create the user interface for a simple calculator app. This app will have buttons for numbers and basic operations (addition, subtraction, multiplication, and division).

Step-by-Step Instructions

1. Create a New Project
Open Thunkable and create a new project. Name it “Simple Calculator.”

2. Add the UI Components

  • Add Labels: Drag a Label component to the screen. This will be where the result of the calculations will be shown. You can set the initial text to “0.”
  • Add Buttons for Numbers: Add several Button components for numbers 0–9. Arrange them in a grid layout to look like a calculator keypad.
  • Add Buttons for Operations: Add four more buttons for the operations: +, –, ×, and ÷. Place them next to the number buttons.
  • Add a Clear Button: Add a button labeled “C” for clearing the calculator screen.

3. Customize the UI

  • Change Button Sizes: Make the number buttons the same size for consistency.
  • Change Button Colors: Make the operation buttons (+, –, ×, ÷) a different color from the number buttons so they stand out.
  • Align the Components: Make sure all buttons are properly aligned and there is enough space between them.

4. Test the User Interface
After you finish arranging the buttons, labels, and other components, test the interface by using the Thunkable Live app. Check if the buttons are easy to press and if the layout looks clean and organized.

Making Your App User-Friendly

A user-friendly app is one that is easy and enjoyable to use. Here are some things to consider when designing your app’s user interface:

  1. Button Size: Make sure your buttons are large enough to tap easily, especially for younger users.
  2. Readability: The text on your app should be easy to read. Use clear fonts and colors that contrast well with the background.
  3. Feedback: Give users feedback when they press a button (e.g., changing the color of the button when pressed or showing a message).
  4. Simplify: Don’t clutter the screen with too many elements. Keep things simple and focused.

Advanced Customization: Changing Themes

Thunkable allows you to change the overall look of your app by customizing colors, fonts, and backgrounds. You can create a theme for your app to make it look unique and professional.

Changing the Theme:

  1. Background Colors: You can set the background color of your app by selecting the screen and choosing a color in the properties panel.
  2. Text Styles: You can change the font, color, and size of the text on labels and buttons.
  3. Images: Use a background image to make the app more visually appealing. Make sure the image doesn’t make the text hard to read.

Try experimenting with different styles until you find the perfect look for your app.

Wrap-Up Discussion

Now that we’ve built the user interface for a calculator app, let’s talk about what we learned:

  • What makes a good user interface? (It should be easy to use, simple, and organized.)
  • How did we arrange the buttons and labels in the calculator app? (In a grid layout for the number buttons and operation buttons.)

Chapter Summary

In this chapter, we learned about:

  • The importance of user interface design in making apps easy to use.
  • Common UI components in Thunkable, such as labels, buttons, text inputs, and images.
  • How to arrange and customize UI components in a user-friendly way.
  • Designing a calculator app and customizing its layout and appearance.