2. ontwerpen - wingsvn/proof-of-concept GitHub Wiki
![image](https://private-user-images.githubusercontent.com/144009709/336633493-8851a346-a59b-430a-8f2c-82c1f800b289.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNzAwMDksIm5iZiI6MTcyNTE2OTcwOSwicGF0aCI6Ii8xNDQwMDk3MDkvMzM2NjMzNDkzLTg4NTFhMzQ2LWE1OWItNDMwYS04ZjJjLTgyYzFmODAwYjI4OS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwNTQ4MjlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04M2IyMjA0MmIwMWYzNzM5YTMzODFlNjYwZThjYTBjOGMyOTdmMGEwMjM5MzEwNmU5N2I0NDY4NGY2MGYxZjE3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.FXPb-AJHAH8ux7uGR2kT5A28ANbCXNlep1l8WOm1xt0)
![image](https://private-user-images.githubusercontent.com/144009709/336633552-e0b24d7e-f314-4741-9af8-68bc1a58b606.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNzAwMDksIm5iZiI6MTcyNTE2OTcwOSwicGF0aCI6Ii8xNDQwMDk3MDkvMzM2NjMzNTUyLWUwYjI0ZDdlLWYzMTQtNDc0MS05YWY4LTY4YmMxYTU4YjYwNi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwNTQ4MjlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01Mzk2NzU5NTdmOTI0NGQ4YzM5OGMzNDhmYWM1NDMyYzAwOGI5NjMxYjQ5MDk0MzAzOGU4Njg3ZjQ5MTk1YWJiJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.fEbKRQWhLTaKCd_wt4ZOJxM94COuVbzdMwqrO_pqlwA)
![image](https://private-user-images.githubusercontent.com/144009709/336633707-d982e62f-5219-47ab-9b2d-77ec490651a0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNzAwMDksIm5iZiI6MTcyNTE2OTcwOSwicGF0aCI6Ii8xNDQwMDk3MDkvMzM2NjMzNzA3LWQ5ODJlNjJmLTUyMTktNDdhYi05YjJkLTc3ZWM0OTA2NTFhMC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwNTQ4MjlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mNTRhNjEzMmFiYzBhNmIzMDU3OWU5YTE3NzQzNDg3YjhiOTFlOTc1NTRkNTY4MjNmOGYzOTA1ZGNkZjc4ZTcwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.nU88BqypvWK9KmWvvNVKFAj-9fTON0Y5lO8X5dYkOC0)
Ik was nog niet helemaal uit over mijn 1e ontwerp qua layout en bereikbaarheid/handigheid en heb mijn ontwerp opgestuurd naar mijn opdrachtgever met de vraag om feedback.
verkregen feedback:
- Enige wat ik mij af vraag is, zullen klanten op de
variatie tip
enbasis ingrediënten
knop klikken? Is het ook een optie om dit bij de lijst met "kies je producten" te zetten? - En de vraag, wil je alternatieven een aparte sectie geven of wil je zodra zij het ingrediënt wegklikken een pop up/lay over doen?
Aan de hand van deze feedbackpunten heb ik een redesign gedaan.
![image](https://private-user-images.githubusercontent.com/144009709/337415105-68d78b61-605e-4933-a909-9b8ae192dbb5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNzAwMDksIm5iZiI6MTcyNTE2OTcwOSwicGF0aCI6Ii8xNDQwMDk3MDkvMzM3NDE1MTA1LTY4ZDc4YjYxLTYwNWUtNDkzMy1hOTA5LTliOGFlMTkyZGJiNS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwNTQ4MjlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hM2Q0OTE3ODk2MzZlNDU3NTIyMWFiMmMzOWNmMjU2OTI1OGQ2MDVmNzZjMjBkZDYyZjE1MGUzYWY5Y2M5Njc4JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.eQkeBi-lP_QUlKqcl1IFD171fpvPrQZ9oJfiq448wG4)
![image](https://private-user-images.githubusercontent.com/144009709/337414721-1eca94c4-2f60-4537-8553-1f8de9e7c7d2.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNzAwMDksIm5iZiI6MTcyNTE2OTcwOSwicGF0aCI6Ii8xNDQwMDk3MDkvMzM3NDE0NzIxLTFlY2E5NGM0LTJmNjAtNDUzNy04NTUzLTFmOGRlOWU3YzdkMi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwNTQ4MjlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01N2Q4NGI0MjRiYzU1NzY1OGJlODNjNjFmNDhmMjc3ZmMwNjZlMDBhY2NhYzFkZDAzYjhmNTU0ZmQ2OTdjZGQzJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9._3va0SvaupVpSiLqtkGjCpzW9DtdhpFZcXwtTbHFLAc)
- schrijf de vraag van de opdrachtgever op papier
Een gedetailleerde productpagina voor het bestellen van maaltijden, waarbij de recepten filtermogelijkheden hebben om maaltijden samen te stellen die voldoen aan de specifieke wensen van de klant.
- bepaal de core functionaliteit
Het kunnen toevoegen en verwijderen van producten/ingrediënten van een recept. Het kunnen kiezen van alternatieven (eg. vlees vervangen door vis) Het recept/maaltijd kunnen toevoegen aan je winkelwagen.
- gebruik de verschillende schetstechnieken om grip te krijgen op de opdracht, zodat je weet wat je moet bouwen
- sitemap (+ url)
- wireframes (+ url + control flow met routes & data + breakdown in html, breakpoints in css)
- wireflow (+ url + control flow met GET/POST routes & data, breakdown in html & css)
sitemap
![image](https://private-user-images.githubusercontent.com/144009709/336769214-53bd3e5b-abc9-4d16-838d-d1a44547a03f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNzAwMDksIm5iZiI6MTcyNTE2OTcwOSwicGF0aCI6Ii8xNDQwMDk3MDkvMzM2NzY5MjE0LTUzYmQzZTViLWFiYzktNGQxNi04MzhkLWQxYTQ0NTQ3YTAzZi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwNTQ4MjlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0wNjc1MzlhMDYzY2IwYWJlYmM3ZDA2ODIyNWU4OTY4MTgyM2FkZjNmNWRjN2FlZDczZTdhMDJjMWUzNjc5NDAwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.ZeiYouQphINdg4xE_pdqHC9aOi8mmOt9BRoyqLzg0iU)
breakdown
![image](https://private-user-images.githubusercontent.com/144009709/337414561-1ce11dd5-76bd-4f6c-af15-c58ff9ada2e1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNzAwMDksIm5iZiI6MTcyNTE2OTcwOSwicGF0aCI6Ii8xNDQwMDk3MDkvMzM3NDE0NTYxLTFjZTExZGQ1LTc2YmQtNGY2Yy1hZjE1LWM1OGZmOWFkYTJlMS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwNTQ4MjlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kOTBhZTNhNThmNDQ0NzA0YWIxODViMzlhZjExMWM2NGY2NTAwNWQ5MTI4ZDk2MTliMjgwZmJmMDViZmE5ZDEyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.9L5ZY7XdMVShLvAxRHK1zbSE8CkeQE4htkkwkpvRA9o)
wireflow
![image](https://private-user-images.githubusercontent.com/144009709/337414053-b69ecb9f-14cc-4fec-878a-ea8bd1f8bbf0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNzAwMDksIm5iZiI6MTcyNTE2OTcwOSwicGF0aCI6Ii8xNDQwMDk3MDkvMzM3NDE0MDUzLWI2OWVjYjlmLTE0Y2MtNGZlYy04NzhhLWVhOGJkMWY4YmJmMC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwNTQ4MjlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00NDBhMWM2NTA2YjJmNGRiMWFiNmE1YzhhOTZiMDdkMTc0NGM1YWE4N2MyNTNlMGM5OWFlZGFkZWM5Mjc3ZjhhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.-qr4NySyvpAQ05R_bgIpCf_rwNnYPuJeF0Uj9R02pGE)
![image](https://private-user-images.githubusercontent.com/144009709/337414233-9507959d-228d-43ca-9afb-9efd517b7051.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNzAwMDksIm5iZiI6MTcyNTE2OTcwOSwicGF0aCI6Ii8xNDQwMDk3MDkvMzM3NDE0MjMzLTk1MDc5NTlkLTIyOGQtNDNjYS05YWZiLTllZmQ1MTdiNzA1MS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwNTQ4MjlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iZTViNGM3NzU2ZGQ4ZDMyNmE2YzMyZWNiMWQzMTM1MDQ1NDhjNTRmMTkxNmJjZTJhZWIzY2VmMGY1NzE4NGY1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.JA5H_HxKWnpNO2i_aOJOxokYwMImDZBJKn7p1OHcMcc)
![image](https://private-user-images.githubusercontent.com/144009709/337414376-6c94077e-9595-42aa-8f16-b66da7b051e1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNzAwMDksIm5iZiI6MTcyNTE2OTcwOSwicGF0aCI6Ii8xNDQwMDk3MDkvMzM3NDE0Mzc2LTZjOTQwNzdlLTk1OTUtNDJhYS04ZjE2LWI2NmRhN2IwNTFlMS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwNTQ4MjlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05OWNiMTRkNzMwMzMzNDQ3NDQyNjRlZTQzNjk5NmFlZDdmMTkwODcwYTQ3ZDY0YWFhNTIwMGZiMWM0MTdkMDZmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.StqIH_cr_rHr1Y0DOwKQmVhG2MIRusoXwnEZmL-9M10)
![image](https://private-user-images.githubusercontent.com/144009709/341801100-f959805a-cf26-43e1-a781-a7c54dfbbda1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNzAwMDksIm5iZiI6MTcyNTE2OTcwOSwicGF0aCI6Ii8xNDQwMDk3MDkvMzQxODAxMTAwLWY5NTk4MDVhLWNmMjYtNDNlMS1hNzgxLWE3YzU0ZGZiYmRhMS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwNTQ4MjlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01ZjYxNzRjZTRjZWIzZjQxZTlmNWMxOGQ4YWJkZTE2Y2FmNWVlZDQxMzBhMGJiNGE1OTE2MTViM2JjODIwYjk4JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.tFddw4iuCigFPIz3K3kptqW9rIsPonNaZbgBysvfsK4)
wie is de gebruiker?
de gebruiker is de gemiddelde Nederlander of Genz die boodschappen wil doen voor een recept of maaltijd.
Wat komt de gebruiker op de pagina doen?
informatie over een recept opzoeken: de ingrediëntenlijst bekijken, de bereidingswijze bekijken en producten voor het recept kopen indien hij/zij deze nog niet heeft.
wat denk je dat je kan doen op deze website?
- iets met burgers
- je kan naar bereiding, naar ingrediënten en naar winkelmandje
- je kan producten kiezen