Project Overview
We need a complete UX/UI design (wireframes + visual design in Figma) for a recipe web
application. The application will allow users to browse, filter, and add recipes, manage their
profiles, and interact with the community. An admin panel will be required for moderation
and content management. The design should be responsive (desktop + mobile) and include a
design system/UI kit for consistent implementation. The web will also include ad placements
(Google AdSense style), so layouts must integrate ads without breaking the user experience.
Core Features:
Recipe browsing & filtering: by ingredients, diets (gluten-free, lactose-free, vegan,
FODMAP, etc.), difficulty, preparation time, rating, other things…
Recipe details: ingredients, instructions, cooking time, difficulty, diet labels, average
rating, user comments.
User accounts: registration, login, profile with user recipes and saved favorites.
Recipe submission form: upload photos, add ingredients and instructions, choose
categories/diets, set difficulty/time/servings.
Community: recipe ratings, comments, likes, saving recipes.
Ads: advertising slots included in layouts (e.g. banners, sidebars).
Admin panel: recipe moderation, user management, comment moderation,
category/tag management.
Pages to Design
Public Area
1. Homepage (priority should be on search bar and add recipe button section)
Top navigation (menu, search, login/register). - Navigation: Home, My feed?,
Recipes, Add Recipe, About, Contact.
Featured categories/diet filters (e.g. gluten-free, vegetarian) - Search bar (always
visible, primary action). Some quick search categories (some labels clickable).
Newest / most popular recipes. Just row with top recipes. Newest Recipes – show
recent activity and freshness. Top Rated Recipes – social proof, best content
highlighted. Trending Recipes – based on views or saves. Personalized Section -
For logged-in users: “Recommended for you” recipes based on saved
diets/preferences. For anonymous users: generic Popular recipes. If you are
logged then there should be feed of recipes that are from people I follow.
Ad slots (banner, sidebar). I am not sure about this.
Footer (About, Contact, Terms, Privacy, Social links). Just links (labels) and icons.
2. Recipe Listing / Search Results
Grid/list of recipes with thumbnails, title, rating, cooking time, difficulty.
Filter panel (ingredients included/excluded, diets, difficulty, time, rating).
Sorting (newest, top rated, most viewed, trending).
Details recipe cards: Thumbnail photo, Recipe title, cooking time, Difficulty (Easy /
Medium / Hard), Rating (stars, average score + number of votes). Quick diet tags
(Gluten-free, Vegan, etc.). Hover/interaction states (e.g., save to favorites icon,
preview hover). Grid of 3–5 columns on desktop, 1 column stacked on mobile.
Infinite scroll (auto-load more recipes).
Advertisement - Horizontal banner ad after every X rows (e.g., after 6–8 recipes).
Sidebar ad (desktop only - not sure). Ads must have fixed reserved slots (avoid
CLS).
Empty results: show friendly message + suggestion (“No recipes found with those
filters. Try removing some filters or explore popular recipes below.”). Error
message if something fails (server error). Optional fallback: highlight Popular
recipes to keep engagement.
3. Recipe Detail
Title (H1), main photo, recipe info (time, difficulty, servings, average rating).
Ingredients (structured list).
Step-by-step instructions (numbered).
Diet tags/categories (clickable).
User rating (stars), comments section.
Save recipe / share / print buttons.
Related recipes section.
Portions (can be changed)
Name of recipe owner (picture, buttons to follow or click on profile)
Nutritions?
Ad placement in layout. I would like to see if it is not disturbing.
4. Registration & Login & Profile
Registration: username, email, password (confirm).
Login: email/username + password.
Error/success states, “forgot password” link.
My profile where I can fill some stuff, name, diets, food restrictions, age etc.
Saved recipes. Verify button form (later add), Account settings (change
password/email, update avatar).
5. User Profile (from point of view of another user)
User info (avatar, username, bio).
User’s own recipes (with edit/delete).
People user follow
Messages?
Report button
Last comments and last recent recipes, some rating maybe
6. Submit Recipe Form
Title.
Upload photos (main + gallery).
Video if you are premium (same as picture, some drag and drop window)
Ingredients (dynamic fields).
Steps (dynamic, numbered).
Portions (for people)
Category/Diet selection (checkboxes/dropdowns). Possibility of not filling but will
be automatically sent into the queue for approval or manual check.
Cooking time, difficulty, servings.
Submit button with confirmation (e.g. “waiting for approval”). If you would not be
verified.
Admin Area (this can be in one field, maybe some sub-windows, it must be just functional,
it won’t be for people, it will be for administration)
7. Dashboard
Overview of total recipes, users, new submissions pending approval.
Top rated in past 24h, 1week, 1month, 1 year and the whole time
8. Recipe Management
Table of recipes (title, author, date, status). Recent recipes.
9. User Management
User list (name, email, role, activity, status account).
Ban/unban, edit roles.
10. Comment Moderation
List of reported comments.
Option to delete/remove.
11. Category/Tag Management
List of categories/tags.
Add/edit/remove.
Other Pages (this is not required at this point, can be done later)
About Us
Contact Page (with contact form).
Terms of Use & Privacy Policy (GDPR compliant)
Error Pages (404, 500)
Cookie Consent Banner (CMP compliant)
Design Requirements
Deliverables in Figma (organized layers, components, styles).
UI kit / design system (typography, colors, buttons, inputs, cards, modals, etc.).
Responsive design: desktop + mobile layouts.
Accessibility: high contrast, legible fonts, ARIA-friendly.
Ad slots integrated without layout shift (no CLS issues).
Include error states, empty states, loading states.
Provide clickable prototype (for user flow testing).