# Building your First Mobile App: App Design Let's begin by designing the user interface. Below is a hand-drawn diagram illustrating how the interface should look:

**About the app** The application features a display containing an image accompanied by a button. When pressed, the button alters the visibility of the image and modifies the button's label text. As part of an advanced tutorial, participants will learn how to enhance their app by integrating sound effects upon interactions. **Desiging the user interface** Now, we will guide you through the process of building this interface using the MIT App Inventor platform. Follow these steps: 1. Create a new project and give it a suitable name. 2. Drag and drop an **`Image`** and a **`Button`** onto your screen, resulting in the following layout:

1. Adjust the components' positions to the center and middle of the screen: * Click on **`Screen1`** in the **`Components`** tree. * Set **`AlignHorizontal`** and **`AlignVertical`** to **`Center`** in the **`Properties`** panel. * *Optional*: To use the device default theme, scroll down in the **`Properties`** panel and change the **`Theme`** to **`Device Default`**. 2. The **`Image`** component is a placeholder; upload an actual image: * Go to the **`Media`** panel, click **`Upload File`**, and select **`light_on.png`** from the **`media`** folder. * Click on the image icon or **`Image1`** in the **`Components`** tree. In the **`Properties`** panel, click **`Picture`**, select your image file, and press **`OK`**. * To prevent the image from dominating the screen, set its height to a percentage value (e.g., 60%) in the **`Properties`** panel. 3. Customise the **`Button`**: * Click on the **`Button`** on the screen. * In the **`Properties`** panel, set the **`Width`** to **`Fill parent`**. * Change the **`Text`** property to **`Hide`**. 4. **Congratulation!** You have completed the design phase. Now, it's time to think about implementing the app logic.