US 18 - Styling Part #1

arne-witteler commented 6 months ago

Value proposition

As a homemade remedies enthusiast I want the app's visual design to be intuitive and appealing, so that I can easily navigate and use the app comfortably without any distractions.

Description

For now we want to focus on the RecipeCards, RecipeList, DetailsPage and NavBar!

Acceptance criteria

The RecipeCard has a uniform design and contains an image, the title, a favorite button, the symptoms and a banner for the creator of the recipe.
The DetailsPage has a as a uniform design and contains an image, the title, a favorite button, the symptoms and a banner for the creator of the recipe.
The NavBar contains Icons for the HomePage, DetailsPage and the CreateForm

Tasks

[ ] create a feature branch feature/styling-1
[ ] add Icons for HomePage and BookmarkPage (and change the name to Favorites)
[ ] Style the RecipeCard accordingly to the mockup
[ ] Change the BookmarkIcon and place it inside the first layer of the RecipeCard
[ ] Delete the "Read more"-Link and make the whole card clickable
[ ] Implement a Banner for the Creator of the Recipe (e.g. "recipe by herbie")
[ ] Style the DetailsPage accordingly to the mockup
[ ] Implement the same Banner here

nattenhagen commented 6 months ago

@arne-witteler Keep in mind: When I hover the tip the whole card expands, which suggests to me that card can be interacted with. In reality, only the link will redirect me to the next page. This UX is a bit confusing.

Solution: change the code so that the whole card leads me to the Detail Page!

E-Swoboda commented 6 months ago

Your focus on intuitive design for RecipeCards, DetailsPage, and NavBar is spot on. Keep it uniform, use clear icons for navigation, and listen to user feedback for improvements. Your app will be user-friendly and visually appealing.

Larissartoricader commented 5 months ago

UPDATE: Due NEW Login-Button we changed the position of Filter Bar. Now it stays with full width.

DominikSpeidel commented 5 months ago

Hey we like your design, there are two minor issues regarding the acceptance criteria:

The Banners of the Creator on the RecipeCards are missing
NavBar: We think instead of DetailsPage (in the acceptance Criteria) your intention is to show a Bookmark-Button in the NavBar, as implemented.

Larissartoricader / Capstone