Application Design /Project 3: Lo-Fi App Design Prototype
Start from 5.12.2024
5.12.2024 -2.1.2024 /Week 11- Week 15
LI XIN LI / 0379305
Application Design 1 / Bachelor of Interactive Spatial Design
Project 3/ Lo-Fi App Design Prototype
Week 11:
In order to ensure that everyone has more time for practical operations, the teacher of this class explained the subsequent content, taught us in detail how to use Figma, and also gave us practical plug-ins.
This part mainly talks about usability testing and the importance of UI components.
During usability testing, we first needed to prepare a low-fidelity prototype, recruit 3 people and assign account management and other scenarios, use Zoom to test, send Figma links, collect and analyze feedback, and then improve the wireframe.
UI components are a collection of UI elements that can reduce the burden on designers and can also serve as templates for specific fields (such as e-commerce). Its typography determines the level of fonts and titles, icons help clarify functions, layout and grid stabilize components, color matching ensures brand consistency, and component combinations standardize component matching. All parties collaborate to create high-quality APP designs.
In the second part, I learned the usability principles of user interface design, which is of great significance to APP design.
Principles such as system status visibility and matching with the real world allow the system to provide timely feedback and make operations easier to understand; user control and freedom, consistency and standards ensure the flexibility and consistency of user operations; error prevention and recognition rather than recall principles such as reducing user burden; flexibility, beautiful and simple design, error help and documentation support, etc., all help to create an easy-to-use APP.
The third part describes the visual elements of the APP user interface.
Lines and shapes can plan the interface, colors should be matched appropriately, and textures and shadows should be used sparingly. Button design has height and style requirements, icons must be standardized and have clear meanings, and pictures and illustrations must be coordinated and focused. Cards simplify display content and leave blank space to improve readability. Navigation components such as the search bar also have their own design points, which are very important to APP design.
Plug-in URL:
https://colors.muz.li/
https://www.freepik.com/
https://convertio.co/
https://www.toools.design/
Reflection:
Although I passed the teacher's teaching in the class, I found that there were still some operational difficulties in Figma practice, so I went to the YouTube website for further study, and during the design process, I found that I often struggled with some layout and routing problems. Mistakes caused the picture to be not beautiful enough and often needed to be remade. This affected the speed and mentality of the design to a certain extent. Therefore, in the subsequent design process, I will adjust the rhythm to make a draft first and then proceed to the next step, thus reducing the impact on work efficiency and work efficiency. The influence of mentality.
Week 12:
This week, the class had to be canceled because the teacher had something to do at home, so I will continue to complete the content assigned by the teacher in the eleventh week and made a low-fidelity model. I tried to find several new media social programs, such as Douyin Xiaohongshu to study their design and layout, these applications provide valuable reference for Weibo projects, as follows：
Before making a low-fidelity prototype, I first made a UI KIT about Weibo.
Here are all the low-fidelity prototypes I created:
In order to conduct practical testing, we need to prepare three user scenarios to test the low-fidelity prototype, provide instructions for each scenario, recruit three participants, conduct test recordings through online contact or video recording, and send them A Figma link and ask for experience feedback to improve the high-fidelity prototype based on the feedback.
Reflection:
I ran into a lot of difficulties when making low-fidelity prototypes using Figma. In terms of layout, it is very difficult to accurately align and distribute elements. Manual drag and drop adjustments are often not in place, and there are occasional misoperations when using the alignment tools, causing the entire page to look very untidy and affecting the overall prototype. Aesthetics and professionalism.
When creating an interactive area, for some irregular-shaped elements, it is difficult to accurately demarcate the interactive trigger range. It is either too large or too small. This makes the interactive effect far from expected, and it is difficult to achieve satisfactory results with repeated adjustments. , which made me very distressed during the production process and greatly reduced my work efficiency and confidence in the final result.
Week 13:
In this class, the teacher mainly introduces the knowledge points and related resource tools about color and typography in user interface design.
- Color: Introduces the process of selecting colors. You can choose the main color first and then create a palette, and apply it according to the 60/30/10 rule, that is, 60% of the dominant color is used for large areas such as the background, and 30% of the auxiliary color is used for For buttons, etc., 10% accent color highlights key elements. It also mentioned a variety of color generation tools such as Colorz, Kuler, etc., as well as the characteristics of color schemes such as single tones, similar colors, complementary colors, and three color groups, such as single tones that are simple but easy to be monotonous, and complementary colors with strong contrast, etc., and explained at the same time The visual effect of gradients in design and the role of ColorZilla tools.
- Typesetting: It emphasizes that good typesetting can effectively convey information, and explains the importance of typesetting elements such as font size, thickness, line spacing, alignment, and paragraph width, as well as the principles of font matching, such as choosing a maximum of 2-3 types and combining fonts. Style, the main text font should be easy to read and have personality. It also lists some commonly used fonts such as Montserrat, Roboto, etc., and points out that improper layout should be avoided.
- Resource tools: It introduces the design guidelines and components provided by Material Design 2, free UI kits provided by UI Store Design, and video tutorial resources for tools such as Figma to provide support for design practice.
After the course explanation, I showed the current low-guaranteed prototype to the teacher. During the display process, we found that there were several problems with not smooth interaction, and there were deviations in the position of some details. The teacher also gave more complete improvement suggestions and added For the new user guidance page and registration page, change the main title of the page to English as much as possible.
Improve：
Based on the teacher's feedback, I re-checked and changed the low-fidelity prototype, and added a new guidance page and registration page.
Details changed：
New page:
Week 14:
With no classes this week during the Christmas public holidays, I conducted scenario testing and put together feedback to make final changes to the low-fidelity prototype.
You can see the feedback in the document below:
Based on users’ actual experience feedback, I made further changes to the low-guaranteed prototype. This is the final result.
Reflection:
Through this time, I found that I usually ignore some details, causing the user experience to deteriorate. I will pay more attention to the details in the future.
Final Outcome
Project 3: Lo-Fi App Design Prototype
View in Figma:
Link to Figma File :
Comments
Post a Comment