ASSIGNMENT 3
ASSIGNMENT 3
Flutterflow low-fidelity wireframe design
In Task 3 and Task 4, I need to complete the construction of my FlutterFlow program in two steps, namely low-fidelity model and high-fidelity model. In this part, I need to complete the basic wireframe construction and restore the page layout, color matching and main functions of the program I made in Figma as much as possible.I will sync my progress and show my production process here
Login/Registration Page
Figma low-fidelity wireframe
Flutterflow low-fidelity wireframe
The login and registration pages I designed in flutterflow continue the figma style while expanding the entire frame to the full picture. This not only conforms to the operating habits of vertical screen mobile phones, but also stretches the picture to make it look more majestic. The empty area in the middle can also be used to add micro-animations or patterns in the high-fidelity stage.
I created a login and registration page with a gradient background and main layout. There are "Register" and "Log in" buttons at the top of the page, and the email, password, and confirm password input boxes are placed in the middle. Below is a prominent registration button, and a checkbox and link text for agreeing to the terms are added at the bottom. The overall style is unified and the functions are complete.
Home Page
Flutterflow low-fidelity wireframe
The homepage I built includes a top avatar, search box and notification button to facilitate users to operate quickly; in the middle are switchable category labels and recommended video players to improve content display efficiency; two small cards are placed below to display different video information; at the bottom is a fixed navigation bar with a striking upload button to strengthen the main function entrance.
Video playback page
Figma low-fidelity wireframe
Flutterflow low-fidelity wireframe
The video preview page follows the previous design, with a custom back button and title at the top, and a search box and button in the middle, so users can quickly find content. The category section uses label buttons to switch between different content, and below is a list card that displays category thumbnails and titles. The overall layout is clear, supports full-page scrolling, and is suitable for mobile browsing.
Search Page
Figma low-fidelity wireframe
Flutterflow low-fidelity wireframe
The global search page has a custom back button, search box, and "GO" button combination at the top, allowing users to quickly enter keywords and perform searches. Popular keywords, recommended tags, and search history are displayed below, all in the form of tags that can be interacted with or deleted. The page supports full-screen scrolling, with a clear overall structure and a smooth experience.
Personal Page
Figma low-fidelity wireframe
Flutterflow low-fidelity wireframe
This is the initial construction of a personal homepage, with a gradient background and a circular avatar at the top, the user name, channel entrance, and number of followers/likes/views in the middle, and horizontal scrolling modules such as history, favorites, and watch later at the bottom. The bottom provides entry for submission, download, and feedback. The page supports full-screen scrolling and adds a floating button for easy content upload. The overall structure is clear and the functions are complete.
Product shopping page
Figma low-fidelity wireframe
Flutterflow low-fidelity wireframe
Category Page
Figma low-fidelity wireframe
Flutterflow low-fidelity wireframe
The category browsing page is designed to be an independent page, no longer an additional page of the homepage. The top includes a back button and page title, followed by a search bar and search button combination, so that users can quickly find content. The middle part uses double tags to switch the category list, and different cards are presented as thumbnails and titles. The whole supports full-screen scrolling, with a clean interface and smooth interaction.
Comments
Post a Comment