Chapters
Chapters

Chapters

Hide chapters

App Design Apprentice

Second Edition · Figma

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: Design & Tool Fundamentals

Section 1: 3 chapters
Show chapters Hide chapters

Section II: Components & Design Systems

Section 2: 5 chapters
Show chapters Hide chapters

Section III: Interactive prototypes & Developer Handoff

Section 3: 4 chapters
Show chapters Hide chapters

4. Wireframing & Screen Layout
Written by Prateek Prasad

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

In the previous chapter, you went over Figma’s basic shape and styling options and used them to create a sign-in screen. You also went through an app teardown exercise to uncover common patterns across two popular apps. In the process, you learned how to reuse and compose simple building blocks to create unique design variations.

Figma has many more tools to offer, which you’ll look into eventually. For now, however, you’ll leverage the skills you picked up in the last chapter to start laying the foundation for your movie app, Cinematic.

In this chapter, you’ll start wireframing the app and build a scaffold that you’ll flesh out in the upcoming chapters.

The Importance of Wireframing

Wireframing is essential in UI design. It allows you to give structure to your ideas and materialize them. Wireframing exposes the rough edges in your thoughts early on so you can iterate them without time-wasting changes and revisions.

Diving directly into creating high-fidelity mockups that look and feel real might seem tempting at this stage, and for good reason. But you are going to start with wireframes as working in low-fidelity helps prevent wasting time and effort.

Wireframing is particularly crucial when working in a cross-functional team because it lets key stakeholders get involved early in the ideation phase to discuss different approaches. It opens up the discussion about which direction to take and promotes collaboration. Your collaborators don’t need to know how a specific tool works to provide valuable input.

When you’re wireframing an app, it’s essential to keep customization and styling to a bare minimum. Wireframes need to be generic enough to allow for rapid iteration and exploration while still having critical building blocks in place to define the foundation of the core experience. This stage in design focuses more on function and less on form.

Establishing the core flow and functional structure with wireframes will allow you to modify and tune the app’s cosmetic aspects in the future. In the chapters that follow, you’ll build on top of the wireframe, adding the finer details and polish like establishing a palette and a typographic scale.

Defining the App’s Concept

Before you turn to the drawing board, it’s helpful to define the idea you’re working toward.

Designing the Movies List

For the first iteration, you’ll create a conventional list, like the ones you’ve seen in most of the apps you use. The list item will have five components:

Adding the Movie Name

For the movie name, add a text layer (T) with SpiderMan Far From Home, a font size of 24 and the font Roboto-Regular. Name this layer movie-name, align it to the left of movie-image with a left margin of 32, a right margin of 32 and a top margin of 16.

Adding the Metadata

For the next row, which contains the movie metadata, add a text layer (T) with 2019 to denote the movie release year. Give it a size of 14 and use the font Roboto with a Regular weight.

Adding Genres

For the genres row, create a rectangle (R) measuring 51×18 with a default fill. Now, add a text layer (T) on top of the rectangle with the text set to Action, a font size of 12 and the font Roboto-Regular. Align the text to the rectangle horizontally and vertically. With both layers selected, change the constraints to center.

Adding Ratings

For the rating row, select the Star from the Shape Tools menu.

Creating the Navigation

Start by adding a 414×52 rectangle (R) with a default fill and a black stroke to the frame. Align it to the bottom of the frame and place it on top of the movies list. This rectangle will serve as a container for the navigation destinations.

Components

Components in Figma are UI elements that you can reuse across multiple design files. They allow you to create consistent designs and make changes quickly.

Creating your Components

Before creating your components, take a moment to organize things by breaking them up on a different frame. Press F and create a new Macbook Pro 14” frame, which you’ll find under the Desktop category in the Frames menu. Name this frame components.

Implementing Your Components

Now, in the components canvas, rebuild the movie-list-item card by replacing the movie-image, genre, and rating groups with the components you just created.

Trying out the Components

Create a new iPhone 11 Pro Max frame (F) and name it movie-list-wireframe. Add a bottom-navigation component to this frame by dragging it from the Assets panel then align it to the bottom of the frame. Set the bottom navigation constraints to Left and Bottom.

Reviewing the Current List Implementation

The list looks good, but before proceeding, it’s important to spend some time with the wireframe and see how it fits in the grand scheme of things. This is also a good time to refine your ideas and see if your strategy needs any course correction.

Making Some Decisions

Since this chapter’s scope is focused on wireframing, you’ll just go over the questions above and think about the solutions so you can iterate over the design and continue making progress.

Filtering the List

Your next step is to add a button to surface the filter options.

Designing the Movie Detail Screen

The detail screen involves a few more bits than the list screen does. This screen will show:

Implementing the “Add to Watchlist” Feature

The last missing piece on this screen is an option to add a movie to a watch list. To do this, add a 382×58 rectangle (R) to the screen. Give it a black stroke and a fill of #C4C4C4.

Grouping the Movie Information

Start by adding a rectangle (R) measuring 379×590 with a corner radius of 8, a black stroke and a fill of #F5F1F1. Call this rectangle backdrop and make it the last layer on the Layers panel for this frame. Next, horizontally align it to the frame and position it at a margin of 171 from the top.

Marking Movies as Seen

The last thing to do on this screen is to add the ability to mark a movie in the user’s watchlist, as seen. This only requires you to add an extra state to the button.

Key Points

In this chapter, you learned:

3. App Teardowns
5. Reusable Elements & Data
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2024 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now