Compared to low-fidelity prototypes, mid-fidelity prototypes address many shortcomings present in initial designs. By incorporating additional animation effects, they achieve a more professional overall appearance. In mid-fidelity prototypes, we strive to ensure all users can browse and retrieve relevant information with greater ease. Simultaneously, we gather feedback to continuously refine the content of the mid-fidelity prototype.
The above is my mid-fidelity prototype. I’ve revised numerous layout elements deemed inadequate in the low-fidelity phase, along with specific color schemes. Details can be found in the corresponding sections.
I’ve incorporated animated effects on the welcome page and homepage to elevate the overall aesthetic. Simultaneously, I’ve adjusted the initial text placement concepts from the low-fidelity phase, employing cleaner typography to highlight subsequent photos and information.
Regarding color, the initial blue palette and black-and-white accents were intended to complement each other. However, during the mid-fidelity phase, I realized blue was highly unsuitable as my theme color. Since my subject matter involves food, blue rarely appears as an edible element in nature or daily life—think blue mushrooms, blue octopuses, etc. Blue often signals toxicity in nature, and blue edible items are exceptionally rare—blueberries, for instance, are more purple-black. This scarcity prevents us from associating “blue = delicious,” making it less appetizing. Blue evokes associations with “medicine, cleaning agents, mold.” Additionally, in most major countries and culinary traditions, blue foods are seldom considered staple items.
Consequently, I transformed the blue and black elements in the logo into warmer tones more consistent with food colors. The previous logo design also felt overly monotonous. Drawing inspiration from British daily life and dining habits, I incorporated crossed forks and spoons positioned behind the title—a subtle nod to the theme of food.
At the same time, in high fidelity, I will adjust the colors to be relatively appropriate (while maintaining consistency with the theme’s color scheme) to enhance my website.