Design App Interfaces: Inspiration Through Imitation Using SwiftUI

This is a three-part lesson activity for high school students learning app design. Students should have a basic knowledge of Swift and Xcode. The presentation materials include a lesson plan, a downloadable student template, and tips for assessing student work.

Learning how to design creative, original interfaces starts by copying existing interfaces. Students use Keynote to easily recreate views from apps they use every day. Moving to Swift Playgrounds and SwiftUI, they learn and practice using the basic building blocks — called container views — that designers use to build stunning and beautiful interfaces using SwiftUI.

In this activity, students will practice laying out interfaces using container views in SwiftUI.

An interface is a collection of elements on the screen. App designers use SwiftUI to define a series of container views to organize the different elements with respect to one another, and get them to display properly on the largest number of devices. 

This activity has three parts:

1. Learn about container views.
2. Diagram an existing interface.
3. Recreate the interface in Swift Playgrounds.

Optional: Take a screenshot from your favorite app and try to recreate it using SwiftUI and Swift Playgrounds or Xcode.

Students should be familiar with HStacks, VStacks, Spacers, and padding. Optionally, some knowledge of Grid and the location of the Swift documentation would be useful. See the Suggested Resources for links.

Part 1: Learn About Container Views

Students should first complete the Develop in Swift Tutorial Layout and Style.

Review the different types of container views: HStacks, VStacks, Spacers, and Padding.

Interface elements are composed of container views.

Horizontal Stacks (HStacks) combine screen elements next to each other in the same row.

Vertical Stacks (VStacks) combine screen elements in a single column.

ZStacks layer elements on top of one another.

Spacers will manually insert space between elements in a HStack.

padding() creates vertical space between elements in a VStack.

Suggested Resources

1. Complete the Laying Out Views tutorial.
2. Read Laying out a simple view.
3. Read Maintaining the adaptable sizes of built-in views to learn how different views behave in a layout.
4. Read Picking Container Views for your Content | Apple Developer Documentation

Part 2: Diagram an Existing Interface

In this part of the activity, students should take a screen shot of an app and import it into Keynote. They should then decide which container views could be used to recreate the same interface, and label each container appropriately. Here are some examples:

The Yelp app's interface features a VStack containing an HStack and another VStack.

Rover's app interface recreated in Keynote, with an HStack and a VStack contained in a single VStack.

When you click on the cat in the list, you see the Detail view which contains the vital information in a VStack.

Use iPhone's screenshot feature to capture an app screen, or download the sample screen shots by clicking the sample images link at the bottom.

Part 3: Recreate the interface in Swift Playgrounds

Swift Playgrounds is a great way to introduce students to layout design using SwiftUI. Students can access interface elements using the menus at the top of the screen, and immediately see the results using the live preview on the right.

After students have built a prototype interface in Keynote, they should transition to Swift Playgrounds and add the images to the layout using SwiftUI code.

NOTE: We will be using Swift Playgrounds here but the same steps can be followed in Xcode instead.

They might follow this workflow:

Create a new project in Swift Playgrounds.

Drag the image assets into Swift Playgrounds.

Select all the images, click, and drag into the Assets pane.

Write your code on the left and preview your image on the right.

Remind students to use a combination of container views such as VStack, HStack, and spacers, just as they indicated in their Keynote decks.

Depending on how many elements you have in your VStack, you may need to add the following property to the entire VStack in order to make all of your content visible on the screen.

.scaleEffect(CGSize(width: 0.50, height: 0.50))

NOTE: Students may need to click the full screen arrow in the upper right of the App Preview window in order to see all of their images.

Ask students to take a screenshot of their app and the related code when they are done! They can paste it into their Keynote file so everything is in one place.

Happy designing!

Attachments

Sample Images.zip

Download  (491.5 KB)

Attachments

app screen samples.key

Download  (9.2 MB)