# Recipe App Design: Clarify Portions Beyond the Photo Source: https://www.jvds.cn/en/share/ui-design/nutrirecipes-meal-shopping-u056 Language: en Published: 2026-10-14 Author: JVDS Design Studio NutriRecipes’s recipe app design uses a large photograph to identify a dish, then short fields and people controls make it something to prepare. Menu and shopping pages share green headers and white cards but arrange them differently: one sets scale first, the other lists ingredients individually. Their tasks are distinct. ## Key takeaways - Food photographs and short fields support quick recognition and comparison. - People and days precede meal selection, giving menu scale a clear setting. - Shopping lists provide quantities and editing, while personal conditions are grouped on the account page. ## Information below the large photo has room to breathe Eggs with peppers fills the upper detail area with a close-up of peppers and eggs, leaving the favorite heart in a white circle. A curved transition leads into white space, where name, rating and short fields have separate positions. Rich imagery and simple text do not crowd each other. Time, energy and XE occupy one row, followed by vegetarian, egg and protein tags. List cards repeat similar fields at a smaller image scale, keeping names and ratings clear. This repetition aids comparison, but abbreviations need explanation and nutrition figures should state whether they concern a serving or the full recipe. People controls sit beside Ingredients. Plus is green, minus white, with the current number between them. This position is worth adapting: portions affect ingredients, making the relationship easier to understand here than hidden in settings. ![NutriRecipes pepper-and-egg detail and salad list with large photos, short fields, tags, Ingredients and people controls](https://www.jvds.cn/upload/2026/1008/d187-tp/u056-i1.webp) Middle and lower details | Photography transitions to white information space; people controls follow the ingredient heading. ## Set people and days before choosing meals Plan your menu uses two pale-gray cards for people and days, with labels above numbers and plus/minus controls. Person and calendar icons distinguish the subjects despite similar controls, avoiding confusion about whether the second is another portion setting. Meals appear lower down, with Lunch selected in yellow and marked by a green circle while Breakfast remains pale. Menu scale and meal choice form two stages: establish planning range before choosing content. JVDS favors this order for multi-day menus; an individual recipe’s serving count still needs its relationship to the overall plan explained. The image does not unfold recalculation after a change in people. A later design could show affected dishes and ingredients while retaining manual differences, keeping an adjustment within the original plan. Charts need not be complex, but the [scope of change](https://www.jvds.cn/en/share/ui-design/b2b-business-state-model) must be clear. ## The shopping list leaves room for real adjustments Purchase groups Vegetables and Fruits, with quantity and unit beneath each ingredient and edit and delete on the right. Allowing changes suits everyday preparation: calculated quantities can begin the process, but ingredients already at home and substitutions still need handling. The yellow [saved message](https://www.jvds.cn/en/share/ui-design/notification-toast-banner-inbox-ux) states a storage location and offers Change, making feedback more specific than a checkmark alone. It currently covers items below, so give it independent space or collapse it after a short period. Storage needs clarity without obscuring quantities being checked. Combined ingredients could retain their sources, showing which dishes contribute to each item. Clear units, people and sources make the shopping list more than a string of numbers and enable returning to edit the original plan. ![NutriRecipes shopping and menu screens with ingredient quantities, edit/delete, yellow saved feedback, people, days and meal choices](https://www.jvds.cn/upload/2026/1008/d187-tp/u056-i2.webp) Two mobile screens, middle areas | Menus set scale first; lists verify quantities item by item. ## Favorites and personal conditions form separate groups The account page opens with a yellow person card. My Content contains favorite recipe thumbnails, Meal Plans and profile information; Diet & Preferences contains goals, diet profile, avoided ingredients and allergies. Grouping content and conditions clarifies which setting someone wants to revisit. The knowledge article above retains a large photo and white reading area rather than sharing a card with personal conditions. Similar recipe products could explain which searches and plans use those conditions, showing what a change affects. Health-promotional wording in the image is not endorsed here as a professional conclusion; content suitability needs separate review. ![NutriRecipes knowledge article and account page with photo reading, yellow person card, favorites and diet conditions](https://www.jvds.cn/upload/2026/1008/d187-tp/u056-i3.webp) Lower account page | Personal content and diet conditions are grouped; articles retain separate reading pages. ## Frequently asked questions ### Where is a recipe portion control clearest? Near ingredients or nutrition scope, with the effect of changing people explicit. A dish’s servings and a multi-day menu’s people are different settings; show affected content when updating. ## Design review checklist - Check serving units in dish fields. - Distinguish dish servings from the menu’s overall people count. - Check that saved feedback does not cover the last ingredients. ## Plan a recipe or everyday food product Dish browsing, menu plans and shopping lists need different information densities and consistent portion relationships. JVDS provides UI/UX design and website design and development, helping organize product pages and content. JVDS provides UI/UX design and website design and development. We can work through interfaces, content and development needs together. [Contact JVDS to discuss your project](https://www.jvds.cn/contact)