Practice Wireframe Design in Figma
Wireframe design is an essential skill for creating clear, functional, and user-friendly interfaces. This guide provides hands-on practice using Figma, enabling you to apply key techniques and design principles to develop effective wireframes. By the end of this guide, you'll have the skills necessary to craft intuitive layouts that enhance user experience (UX) and streamline the development process.
In this section, we’ll cover the following topics.
- Designing UI by Functionality
- UI for Signup, Login, and Logout
- UI for Main & Post Items
- UI for User Group Registration
- UI for My Posts (View, Edit, and Delete)
- UI for Search Items
- UI for Account Settings
- Adjusting UI for Different Device Types
Designing UI by Functionality
When designing a user interface (UI), it's important to consider the overall user experience (UX). Grouping your UI design by functionality can help you think through how users will interact with each feature, anticipating their needs and reactions. In this section, we'll explore approaches to designing UI by functionality, using a photo-sharing app as an example.
UI Design by Functionality for a Photo-Sharing App
In our example, the app's frames are divided into six key functionality groups:
- Signup, Login, and Logout
These are essential, commonly used functionalities. The UI design for these features is typically straightforward, focusing on simplicity and ease of use. - Main Page & Media Data Items (View and New Post)
The main page is the most critical aspect of the UI, as it serves as the app's "face." Special attention must be given to the data structure, especially in social media apps where media content is managed systematically. The UI should reflect this structure, ensuring that users can easily navigate and interact with the content. - Community Registration
This feature allows users to create and manage groups within the app. When designing this UI, it’s crucial to have a clear process for how users will register and join groups, whether through open signup, invitation, or another method. - My Posts (View, Edit, and Delete)
This functionality enables users to manage their own content. Key design considerations include how posted items are displayed and how users can easily view, edit, or delete their posts. - Search Items
Search functionality is fundamental in most apps. From a UI perspective, the challenge is to design an interface that effectively displays search results, ensuring that users can quickly find what they’re looking for. - User Settings
For apps with membership functionality, a user settings interface is essential. The UI should allow users to manage various account settings, including the option to deregister from the app if necessary.
UI for Signup, Login, and Logout
If you've already prepared the necessary design assets, creating the UI for user login and logout in Figma involves primarily copying, pasting, and aligning objects. This process is straightforward but crucial for ensuring a consistent and polished look.
Signup, Login, and Logout UI Examples
The following demonstration videos illustrate the basic operations for designing these UIs:
- Utilize Assets: Drag and drop assets into your design frame when using them for the first time.
- Copy and Paste: Reuse assets within your frame by copying and pasting them.
- Override: Customize components by overriding properties such as text or colors.
Watch the video below.
Navigation Bar / App Top Bar
The UI of the navigation or top bar often changes depending on the user's login status. For our photo-sharing app, the navigation bar is only visible to signed-in users, meaning it appears after login but not during the login process itself.
UI for Main & Post Items
The main screen is the most critical element in your UI, particularly for social media apps where media content is central. The design should not only look appealing but also be structured in a way that efficiently organizes and presents media data.
Detail View vs. List View
Typically, media content can be displayed in either a detail view (showing individual items) or a list view (showing multiple items). Both views have specific use cases in social media apps, such as displaying user profiles or media posts.
Main View and Media Data Items for the Photo-Sharing App
In this photo sharing app, three layers are used to display posted media data.
Main view
This is used to give users an overview of all media data. You need to structure media contents in an effective way and take into account the device size. On mobile, horizontal scroll is one of effective ways to display a list of items within the limited display size. How to design the horizontal scroll with Figma will be explained in Chapter 6.
Adding different views is another technique. In this example, we created two views. One can be used to focus on popular posts, and the other – to focus on user’s recent views.
Community View
Photos in this app are organized by community. The community view includes subframes such as a timeline for recent posts, a section for popular posts, and a "My Posts" view. The registration of communities and members will be covered in a later section.
New Post and Posted Item Views
These views focus on key data elements like the title, photo, and message. In the posted item view, the photo should dominate the UI, while in the new post view, editability is emphasized with balanced design elements.
UI for User Group Registration
Designing the UI for user group registration requires deciding how users will create and join groups. This choice influences the UI design significantly. For example, groups can be created openly, by invitation, or manually by the group owner.
Community Registration for the Photo-Sharing App
In our app, we use an invitation-based approach for community registration, with three key views:
- Creating a Community
- Sending Invitations
- Confirming Invitations Sent
For these UIs, you can leverage existing designs, such as reusing the new post view for community creation and signup UIs for invitations.
UI for My Posts (View, Edit, and Delete)
The "My Posts" view is designed to help users manage their content. Important UI considerations include searchability in list views and editability in detail views. A confirmation view can help prevent accidental deletions.
My Posts for the Photo-Sharing App
By this point, you can reuse several existing UIs to create new ones. For example, use the new post view as a template for the editing and deleting views.
A unique UI element here is the My Post List View, which uses a grid structure to enhance searchability. Offering both short and long list views can provide a more realistic user experience. To avoid slow loading times, consider loading data on demand.
User Flow for Managing Posts
Having a clear user flow is crucial for improving the UX. For this app, the user flow is designed to be intuitive and efficient.
UI for Search Items
Designing the UI for search involves more than just placing a search icon or box; it's about how the results are displayed. The search results UI should prioritize ease of use and effective item display.
Search Items for the Photo-Sharing App
For search results, the app uses the My Post UI, which is already optimized for searchability.
User Flow for Search Action
The user flow for search is designed to provide a seamless experience from entering a query to viewing the results.
UI for Account Settings
In apps with membership functionality, a user settings interface is essential. The UI should be customized to handle various account parameters based on the user journey.
User Settings for the Photo-Sharing App
The My Profile view is similar to the profile registration view designed during signup. A unique feature here is the list of communities the user has registered for. Given that the app is designed as a closed community platform, users must also have the option to deregister from these communities.
User Flow for Community Deregistration
The user flow for deregistering from a community is designed to be straightforward, ensuring a smooth and user-friendly experience.
Adjusting UI for Different Device Types
The main page or screen is critical for UI design, serving as the app’s visual identity. In social media apps, where media content is managed systematically, the UI must be designed with the data structure in mind.
Resizing Design for a Tablet
Here’s how to adjust a mobile UI to fit a tablet screen, using the photo-sharing app’s main view as an example:
1. Create a Copy of the Frame and Update the Frame Size
Duplicate the main view frame and change the frame size to match a tablet (e.g., iPad Pro 12.9 in landscape orientation).
2. Resize the Top Navigation Bar
Remove the status bar and resize the top navigation bar to fit the tablet’s screen. Since nested components cannot be resized in an instance, detach the instance from the parent component first.
After detaching, resize the nested components and add any additional icons. Once resized, register the navigation bar as a new component for tablet use.
3. Resize Other Items
Use a grid layout to resize items to align with the tablet screen. For example, use a six-column grid to adjust card sizes.
Detach the instance to resize the cards, then register the resized card as a new component.
Replicate the cards to fit within the layout grid.
place-card-components-using-layout-grid-in-figma-id504110040410-img20
FAQ: Practice Wireframe Design in Figma
Why is wireframe design important in UI/UX design?
Wireframe design is essential for creating clear, functional, and user-friendly interfaces. It allows designers to plan and structure a layout without getting distracted by visual details, ensuring that the user experience (UX) is intuitive and effective.
How should media post content be displayed in a photo-sharing app?
Media content can be displayed in two main views:
- Detail View: Shows individual media items.
- List View: Displays multiple items at once.
For the main view, organize media content effectively, considering device size. Horizontal scrolling is often used on mobile devices to manage limited screen space.
What should be considered when designing the UI for search functionality?
Designing a UI for search functionality involves more than just placing a search icon or box. The results should be displayed in a way that prioritizes ease of use and effective navigation through the items found.
What are the key elements of a user settings interface in a membership-based app?
The user settings interface should allow users to manage various account parameters. In a photo-sharing app, this might include managing profiles, viewing registered communities, and having the option to deregister from the app or communities.