diff --git a/README.md b/README.md index c9b00dd..ba33285 100644 --- a/README.md +++ b/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 diff --git a/docs/UI_PLANS.md b/docs/UI_PLANS.md index b99f1cf..05691a3 100644 --- a/docs/UI_PLANS.md +++ b/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. | diff --git a/docs/design/README.md b/docs/design/README.md new file mode 100644 index 0000000..18e7f42 --- /dev/null +++ b/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. diff --git a/docs/design/calculator.png b/docs/design/calculator.png new file mode 100644 index 0000000..c81bade Binary files /dev/null and b/docs/design/calculator.png differ diff --git a/docs/design/elementDetail.png b/docs/design/elementDetail.png new file mode 100644 index 0000000..37f3dfb Binary files /dev/null and b/docs/design/elementDetail.png differ diff --git a/docs/design/gymnastDetail.png b/docs/design/gymnastDetail.png new file mode 100644 index 0000000..45723a6 Binary files /dev/null and b/docs/design/gymnastDetail.png differ diff --git a/docs/design/gymnasts.png b/docs/design/gymnasts.png new file mode 100644 index 0000000..c46bc77 Binary files /dev/null and b/docs/design/gymnasts.png differ diff --git a/docs/design/search.png b/docs/design/search.png new file mode 100644 index 0000000..ce771fa Binary files /dev/null and b/docs/design/search.png differ