UI Design

[mmtftr]

📌 Feature request

📝 Description

The UI Design of the application should be created for the reference of the frontend and mobile teams.

The acceptance criteria are:

• All pages of the application as defined in the Requirements have a design
• Commonly used components among these pages are consistent (ie. have the same design)
• Proper spacing and hierarchy of content is used in the design.
• The Typography and color assets are used instead of arbitrary colors.
• The mockup pages should be edited so that the newly designed components/pages are used.
• (Optional) Using auto layout is recommended so that the design easily translates into frontend code.

Prototyping is not included in this task.

📈 Motivation

Frontend teams must have a proper reference design of the User Interface so that the final product is consistent.

📊 Additional context

The mockups and scenarios created by @EnesBaserr and @asligook provide a baseline for the functional contents of these designs. However, there might be missing parts and as such the Requirements are the source of truth and must be referenced throughout this task.

[mmtftr]

Overview of To-Do Items

• Icon library (Nazire)
  • 30+ icons for the food categories
  • General icons for other purposes
• Search Page (Nazire)
  • Can search for Profiles or Dishes
  • Components
    • filter icon
    • search input
    • a grid of Dish Cards or Profile Cards
  • Variants:
    • Haven’t searched yet
    • Search results
• Recipe Creation Page (Nazire)
  • Components (inputs)
    • Servings
    • Time
    • Calories
    • Dish
    • Ingredients
    • Description (includes instructions)
    • Photo upload
    • Allergens
• Profile Page (Nazire)
  • Variants
    • My profile
    • Other user’s profile
  • Components
    • Follow button (other user)
    • Edit button (my profile)
    • Recipes list
    • Number of followers/following/recipes
    • List of following/follower users (separate page)
• Recipe Page (Efe)
  • Components
    • Photos
    • Tag-like items for
      • Servings
      • Cook time
      • Dish
      • Allergens
    • Author
    • Description
    • Ingredients
    • Rating interface
    • Copy Link
    • Bookmark button
    • List of bookmarkers
    • Comments Button
• Comments Page (Efe)
  • Components
    • List of comments
    • Comment box to add a comment
• Cuisine Page (Efe)
  • Components
    • Name of cuisine
    • Country flag associated with cuisine
    • Description
    • “View in Wikipedia” Button if applicable
    • Recipe list with two tabs: “Top Rated” and “Recent”
    • Button to view all dishes for that cuisine
• Feed Page (Efe)
  • Components
    • Tabs for Following/Explore
    • In each tab, a grid of recipes
    • Filter button that shows filter UI
• Dish Page (Efe)
  • Components
    • “View in Wikipedia” button if applicable
    • Cuisine
    • Create recipe button
    • Country of cuisine if available
    • Food Type
    • Description
    • Photo
• Bookmarks Page (Efe)
  • List of recipes

As items are completed, a preview of the resulting UI should be added to this issue.

[mmtftr]

Figma design file's link has been added to the sidebar of the wiki.

[mmtftr]

Bookmarks Page

 

Expand

Comments

Expand

Cuisine Page

Expand

Dish Page

Expand

Feed Page

Expand

Filter Modal

Expand

Recipe Card

Expand

Recipe Page

Expand

Dish Card

Expand

[NazireAta]

My Profile Page

 

Expand

Other User Profile Page

Expand

Search Page

Expand

Recipe Creation Page

Expand

[NazireAta]

Assigning @asligook for checking

[asligook]

I have reviewed the UI Design, as far as I see all pages are consistent with the requirements so I will close the issue.
It seems great, thanks for your effort @mmtftr and @NazireAta .