{"id":1031,"date":"2024-03-08T00:22:04","date_gmt":"2024-03-08T00:22:04","guid":{"rendered":"https:\/\/mojanjavid.com\/?post_type=portfolio&#038;p=1031"},"modified":"2024-03-11T01:35:39","modified_gmt":"2024-03-11T01:35:39","slug":"ux-ui-design","status":"publish","type":"portfolio","link":"https:\/\/mojanjavid.com\/?portfolio=ux-ui-design","title":{"rendered":"UX\/UI Design"},"content":{"rendered":"[vc_row][vc_column][vc_column_text]This Recipe App Mockup is a visual representation of the user interface and key features of a recipe application. I designed this Recipe App while taking a course course with Udemy which I recently took. I learned how to\u00a0showcases the design and functionality of the recipe application, highlighting its user-friendly interface, engaging visuals, and personalized features.[\/vc_column_text][vc_empty_space][\/vc_column][\/vc_row][vc_row][vc_column]\t<div id=\"thb-image-69e217ebb9d26\" class=\"caption-style1 animation right-to-left aligncenter   thb_image_link wp-caption \">\n\t  \t\t\t<div class=\"thb-image-inner size_100\">\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1346\" src=\"https:\/\/mojanjavid.com\/wp-content\/uploads\/2024\/03\/Mockup-1.jpg\" class=\"thb_image   attachment-full\" alt=\"\" srcset=\"https:\/\/mojanjavid.com\/wp-content\/uploads\/2024\/03\/Mockup-1.jpg 2560w, https:\/\/mojanjavid.com\/wp-content\/uploads\/2024\/03\/Mockup-1-300x158.jpg 300w, https:\/\/mojanjavid.com\/wp-content\/uploads\/2024\/03\/Mockup-1-1024x538.jpg 1024w, https:\/\/mojanjavid.com\/wp-content\/uploads\/2024\/03\/Mockup-1-768x404.jpg 768w, https:\/\/mojanjavid.com\/wp-content\/uploads\/2024\/03\/Mockup-1-1536x808.jpg 1536w, https:\/\/mojanjavid.com\/wp-content\/uploads\/2024\/03\/Mockup-1-2048x1077.jpg 2048w, https:\/\/mojanjavid.com\/wp-content\/uploads\/2024\/03\/Mockup-1-20x11.jpg 20w, https:\/\/mojanjavid.com\/wp-content\/uploads\/2024\/03\/Mockup-1-150x79.jpg 150w, https:\/\/mojanjavid.com\/wp-content\/uploads\/2024\/03\/Mockup-1-600x315.jpg 600w, https:\/\/mojanjavid.com\/wp-content\/uploads\/2024\/03\/Mockup-1-900x473.jpg 900w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/>\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t[vc_empty_space][\/vc_column][\/vc_row][vc_row][vc_column width=&#8221;1\/2&#8243;][vc_column_text]\n<div class=\"flex flex-grow flex-col max-w-full\">\n<p>&nbsp;<\/p>\n<p><strong>Key Components:<\/strong><\/p>\n<div class=\"markdown prose w-full break-words dark:prose-invert dark\">\n<ul>\n<li><strong>Homepage:<br \/>\n<\/strong>The homepage welcomes users with a visually appealing layout showcasing Popular Recipes, Saved Recipes, and Shopping Lists based on user preferences.<br \/>\nNavigation elements such as search bar, categories, and user profile icon are prominently displayed for easy access.<\/li>\n<li><strong>Recipe Detail Page:<br \/>\n<\/strong>When a user selects a recipe, they are directed to the recipe detail page featuring a high-resolution image of the dish, along with ingredients, cooking instructions, and cooking time.<br \/>\nInteractive buttons allow users to add ingredients to their shopping list, save the recipe for later, and share it on social media platforms.<\/li>\n<li><strong>Search and Filter Functionality:<br \/>\n<\/strong>Users can search for specific recipes or browse through categories such as Appetizers,Entrees, and Desserts.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<div class=\"mt-1 flex justify-start gap-3 empty:hidden\">\n<div class=\"text-gray-400 flex self-end lg:self-center justify-center lg:justify-start mt-0 -ml-1 h-7 visible\"><\/div>\n<\/div>\n<div class=\"flex\"><\/div>\n[\/vc_column_text][\/vc_column][vc_column width=&#8221;1\/2&#8243;][vc_column_text]\n<p>&nbsp;<\/p>\n<ul>\n<li><strong>Shopping List:<br \/>\n<\/strong>The shopping list feature allows users to compile a list of ingredients needed for their chosen recipes.<\/li>\n<li><b>Preparation:<br \/>\n<\/b>Accessible from the recipe detail page, cooking tools provide users with helpful resources such as measurement and prep times.<br \/>\nUsers can check off each step as they progress through the prep section and complete each task.<\/li>\n<li><strong>User Profile:<br \/>\n<\/strong>The user profile section allows users to manage their account settings, view saved recipes, and see comments from other users who have shared their comments on each recipes.<\/li>\n<li><strong>Rating the App:<\/strong><br \/>\nAt the very end when the user is all done, they can rate the app and share their experience with leaving a comment on the comments section.<\/li>\n<\/ul>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space]\t<div id=\"thb-image-69e217ebba506\" class=\"caption-style1 animation left-to-right aligncenter   thb_image_link wp-caption \">\n\t  \t\t\t<div class=\"thb-image-inner size_100\">\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1346\" src=\"https:\/\/mojanjavid.com\/wp-content\/uploads\/2024\/03\/Mockup.jpg\" class=\"thb_image   attachment-full\" alt=\"\" srcset=\"https:\/\/mojanjavid.com\/wp-content\/uploads\/2024\/03\/Mockup.jpg 2560w, https:\/\/mojanjavid.com\/wp-content\/uploads\/2024\/03\/Mockup-300x158.jpg 300w, https:\/\/mojanjavid.com\/wp-content\/uploads\/2024\/03\/Mockup-1024x538.jpg 1024w, https:\/\/mojanjavid.com\/wp-content\/uploads\/2024\/03\/Mockup-768x404.jpg 768w, https:\/\/mojanjavid.com\/wp-content\/uploads\/2024\/03\/Mockup-1536x808.jpg 1536w, https:\/\/mojanjavid.com\/wp-content\/uploads\/2024\/03\/Mockup-2048x1077.jpg 2048w, https:\/\/mojanjavid.com\/wp-content\/uploads\/2024\/03\/Mockup-20x11.jpg 20w, https:\/\/mojanjavid.com\/wp-content\/uploads\/2024\/03\/Mockup-150x79.jpg 150w, https:\/\/mojanjavid.com\/wp-content\/uploads\/2024\/03\/Mockup-600x315.jpg 600w, https:\/\/mojanjavid.com\/wp-content\/uploads\/2024\/03\/Mockup-900x473.jpg 900w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/>\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t[\/vc_column][\/vc_row]\n","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][vc_column_text]This Recipe App Mockup is a visual representation of the user interface and key features of a recipe application. I designed this Recipe App while taking a course course with Udemy which I recently took. I learned how to\u00a0showcases the design and functionality of the recipe application, highlighting its user-friendly interface, engaging visuals, and personalized&hellip;<\/p>\n","protected":false},"featured_media":1078,"parent":0,"menu_order":0,"template":"","tags":[],"class_list":["post-1031","portfolio","type-portfolio","status-publish","has-post-thumbnail","hentry","project-category-design","project-category-identity","project-category-ux-ui"],"_links":{"self":[{"href":"https:\/\/mojanjavid.com\/index.php?rest_route=\/wp\/v2\/portfolio\/1031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mojanjavid.com\/index.php?rest_route=\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/mojanjavid.com\/index.php?rest_route=\/wp\/v2\/types\/portfolio"}],"version-history":[{"count":30,"href":"https:\/\/mojanjavid.com\/index.php?rest_route=\/wp\/v2\/portfolio\/1031\/revisions"}],"predecessor-version":[{"id":1079,"href":"https:\/\/mojanjavid.com\/index.php?rest_route=\/wp\/v2\/portfolio\/1031\/revisions\/1079"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mojanjavid.com\/index.php?rest_route=\/wp\/v2\/media\/1078"}],"wp:attachment":[{"href":"https:\/\/mojanjavid.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1031"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mojanjavid.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}