forked from fdnd-task/fix-the-flow-interactive-website
-
Notifications
You must be signed in to change notification settings - Fork 0
Ontwerpen
Ryank2004 edited this page Dec 22, 2023
·
5 revisions
Voor het ontwerp ben ik eerst een Wireflow gaan tekenen. Die hoort ook bij de deeltaak van deze sprint. Een Wireflow laat zien wat een interactie doet op een website en wat de verschillende uitkomsten zijn. Hieraan zitten een paar vereisten. Het zo duidelijk zijn dat iemand anders jouw Wireflow kan bouwen in code. Er moet dus voldoende uitleg per state van de website staan en het moet niet verwarrend zijn. Na de Wireflow ga ik een breakdown schets maken zodat ik kan kijken hoe de HTML er uit moet zien om de interactie met JavaScript te laten werken.
![Screenshot 2023-12-04 at 12 44 41](https://private-user-images.githubusercontent.com/25478764/287686987-14a2c946-8721-46ae-8492-a140cdc7d91f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkwMDkxMTgsIm5iZiI6MTczOTAwODgxOCwicGF0aCI6Ii8yNTQ3ODc2NC8yODc2ODY5ODctMTRhMmM5NDYtODcyMS00NmFlLTg0OTItYTE0MGNkYzdkOTFmLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMDglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjA4VDEwMDAxOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWU2MzE4MjZiYjQyOGZkNTliMWQzZmE3MDJmZGY2ZmVjZDg4MzA1ZjBjZGY1NmMyMjAwMjgxMTA0ODA3NGFkMTQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.WnK8sp64PhGFoWCtRlnCTckdKE8xMU3ovn-JnQ8z8Bw)
In deze Wireflow zie je hoe je vanaf de homepagina kan navigeren door de aangeboden en gezocht secties. Ik heb 2 varianten gemaakt, één voor aangeboden en één voor gezocht. De paarse kleur gebruik ik voor de interactie en de User Flow. De groene kleur is voor de actieve sectie. Ik heb elk scherm een titel en nummer gegeven en daaronder staat er wat een user doet en wat daarna zal gebeuren.