Application Design I / Project 3：Lo-Fi App Design Prototype
02.12.2024 - 30.12.2024 / Week 11 - Week 14
ID name YANG HANWEN
ID number 0364085
Program name bachelor of design (honors) in creative media
UI/UX
Project 3 : Lo-Fi App Design Prototype
LIST
◆ Project 03: Lo-Fi App Design Prototype
Instructions
Project 03:Lo-Fi App Design Prototype
I made some drafts? in Figma according to the second file of the Instructions above and this ↓ tutorial.
Uh, since I was working on two prototypes (one low-fidelity and one high-fidelity) in a row, the content of this post will be long-winded or vague or have a lot of repetitive content. Please forgive me.🙏
Mr. Wong suggested that we could sketch on paper to describe the low-fidelity model. I drew the following ↓ sketches at this time (about the 12th? week)
Although Mr. Wong told me that it was a bit late for me to start sketching, I still introduced him to the necessary processes of the application I was going to make. I also introduced my workflow of sketching while doing low-fidelity in Figma (the circled numbers were drawn by Mr. Wong)
At that time, I explained to Mr. Wong the three main processes of the application I designed: user login and registration, user posting related functions, and finally the user searching or discovering the game and downloading and installing it to play or choosing to play it in the cloud without downloading and installing it.
Ironically, I was still two steps short (user posting and finding the game) and I realized that the low-fidelity prototype was not the final project. The high-fidelity prototype was the final project.
So, since week 11, I haven’t updated this blog for nearly 3 weeks (actually 5 weeks).(In addition to the feedback section)
However, on Friday of week 14, I sent Mr. Wong my final low-fidelity prototype video demo (although it was still a rough draft at the time).
But the next thing to put in is the actual final submission, which is the link to the low-fidelity prototype and the video showing it.
Because I only made a few pages in the end, I still need to organize it (referring to the blog of this senior student, I roughly know what it needs to be organized into)
Okay, now it's sorted.
Submission
Feedback
Week 11
I asked Mr. Wong about the use of Figma and how to use the color zilla plug-in to extract the color code of the sample website and use WhatFont to retrieve the font information on the web page. Of course, I need to complete the draft of the prototype based on the file he sent.
Week 12
I showed Mr. Wong the prototype I made in Figma, which is considered a draft, right? Asked some questions: I couldn't find a screenshot of the mobile phone prototype page of the "Game" category or "Game Market" category on mobbin.com, and then you asked us in the textbook to set up 4 columns. In prototype design, at least 4 are required. He explained to me the navigation bar and other issues: The website was inspired by the prototype of a certain page you designed, and the four central pillars were used to divide the text or main content within this range.
Oh, by the way, he said that some of the functions in the Information Architecture part of my 10-11 week project 2 need to be further subdivided, and the flowchart needs a ""tip?" " (of course, there are also a small number of functions to be added). Anyway, it is used to explain what my "boxes" represent. Each functional subdivision in Information Architecture has a different color.
Week 13 2024.12.16
I drew a part of the draft on A4 paper and showed it to Mr. Wong. He said it would be too late for me to show him the draft on the paper now. He suggested that I finish it on the paper and then make it on Figma or make a draft on the paper at the same time. Make corresponding effects on Figma.
Week 13 2024.12.19
I hurriedly completed half of the project. After reading it, he asked me to create a complete set of app usage processes and told me the full version of the interactive process in the next step of instructions. After making it in Figma, I shared it through zoom or other software. Let other students use the screen and ask for screen recording.
Week 14 2024.12.26
I changed the details of the prototype that Mr. Wong suggested me to modify last week. In the end, I still had one page of interaction left to complete. He complained that my progress was a bit slow. I thought I would be finished at project 3. But he told me that this was just the low-fidelity prototype. The high-fidelity prototype was the final one. I immediately realized the seriousness of the situation.
What I need to do for the high-fidelity prototype is to match the colors, paste the specific pictures and text content. Fortunately, I added some specific text content when I was making the last page.
Reflections
Experience
After these 5 weeks of experience, this prototype is really a lot of work. Whether it is low-fidelity or high-fidelity, the time and energy spent from drafting to final completion of a low-fidelity prototype project is two or three times that of other modules in previous semesters.
Observation
According to my observation, when making prototypes and drawing on other applications as reference cases, it is inevitable that there will be some plagiarism. So Mr. Wong’s suggestion is to make a rough draft on paper first and then do the detailed design based on the draft. Or supplement it. This suggestion is still quite effective.
Findings
I found that the Figma platform (also considered a software) is quite different from the Adobe software I used before, especially Adobe Illustrator (because this is the one I use most smoothly). As for the alignment between fonts and icons, I am generally familiar with using guides (when using Adobe Illustrator) to align, but I don’t know if it’s because I’m not familiar with it or it’s a problem that it doesn’t have this function.
Comments
Post a Comment