Practice Wireframe Design in Figma

• 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

UI Design by Functionality for a Photo-Sharing App

In our example, the app's frames are divided into six key functionality groups:

1. 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.
2. 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.
3. 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.
4. 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.
5. 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.
6. 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.

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.