docs: add design mockups

README.md

@@ -12,12 +12,13 @@ The code in `src/` is the Vite starter project with one example test. The toolin
 
 ## What to review
 
-| Document                                 | Describes                                                                                |
-| ---------------------------------------- | ---------------------------------------------------------------------------------------- |
-| [docs/UI_PLANS.md](docs/UI_PLANS.md)     | The user groups, user stories and pages of the application                               |
-| [docs/DATA_MODEL.md](docs/DATA_MODEL.md) | The entities, how they relate, the constraints and the reasoning behind the main choices |
-| [docs/examples/](docs/examples/)         | Invented example data that shows how each entity in the data model is structured         |
-| [docs/AI_USAGE.md](docs/AI_USAGE.md)     | How AI was used in the project                                                           |
+| Document                                       | Describes                                                                                |
+| ---------------------------------------------- | ---------------------------------------------------------------------------------------- |
+| [docs/UI_PLANS.md](docs/UI_PLANS.md)           | The user groups, user stories and pages of the application                               |
+| [docs/design/README.md](docs/design/README.md) | Mockups of five of the pages. Mock designs only, not the final design                    |
+| [docs/DATA_MODEL.md](docs/DATA_MODEL.md)       | The entities, how they relate, the constraints and the reasoning behind the main choices |
+| [docs/examples/](docs/examples/)               | Invented example data that shows how each entity in the data model is structured         |
+| [docs/AI_USAGE.md](docs/AI_USAGE.md)           | How AI was used in the project                                                           |
 
 ## The dataset
 

docs/UI_PLANS.md

@@ -33,6 +33,8 @@ Coaches log in with their Google account. In addition to everything a visitor ca
 
 The search page is the start page for both user groups.
 
+Mockups of some of the pages are in [design/README.md](design/README.md).
+
 | Page                | Logged out | Logged in | Description                                                                                                                                                                         |
 | ------------------- | ---------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Search**          | ✓          | ✓         | Search, filter and sort all elements and vaults. Logged-in coaches can add an element directly to one of their gymnasts' routines, or add it to a gymnast's list of elements.       |

docs/design/README.md

@@ -0,0 +1,42 @@
+# Design mockups
+
+> **These are mock designs.** They were made only to give a visual impression of the idea. They are not the final design, which may look very different.
+
+- **The visual style is a placeholder.** The colours, fonts and visual style have not been chosen.
+- **The content is invented.** The elements, codes, values, names and gymnasts are example data. They are not taken from the Code of Points, and they may not match the [data model](../DATA_MODEL.md) exactly.
+
+The pages are described in [UI_PLANS.md](../UI_PLANS.md).
+
+## Search
+
+![Mockup of the search page](search.png)
+
+The start page for everyone. It shows the search field, the filters for apparatus, element group and difficulty, the sorting, and the result list with code, description, apparatus and value.
+
+## Element details
+
+![Mockup of the element details page](elementDetail.png)
+
+All the information about one element: its drawing, description, value, code, apparatus, element group and the gymnast it is named after. The variants of the element are shown below the drawing.
+
+## Calculator
+
+![Mockup of the calculator page](calculator.png)
+
+Building a routine on one apparatus without logging in. Elements are added from the list on the left, and the routine on the right shows its D-value and which elements are not counted.
+
+## Gymnasts
+
+![Mockup of the gymnasts page](gymnasts.png)
+
+A logged-in coach's overview of their gymnasts, with each gymnast's highest D-value per apparatus and the number of elements in her list. The button creates a new gymnast.
+
+## Gymnast
+
+![Mockup of the gymnast page](gymnastDetail.png)
+
+One gymnast's page. It shows her routines on the chosen apparatus with their D-values, so the coach can compare versions, and her list of elements she can do or is practicing.
+
+---
+
+The mockups were generated with Claude Design.