App Design
Gedurende de minor Visual Design & Front-End Development heb ik de app en bijbehorende website van Haak Maatje ontworpen. Hét platform voor beginnende en gevorderde hakers! Leer nieuwe steken, ontdek patronen en hou je eigen projecten bij! Lees hieronder meer over het project!
Tijdens het uitwerken van Haak Maatje heb ik onderzoek gedaan naar de diverse Laws of UX, waarbij ik heb gekeken naar hoe ik deze binnen mijn ontwerp kan toepassen. Alle Laws heb ik doorgenomen, op een rijtje gezet en bekeken hoe ik deze in de app kan toepassen.
Haken wordt al gauw zien als een 'oma' hobby, aangezien hier een stereotype omheen hangt. Daarom wilde ik met de visuele stijl de app een jonge en hippe uitstraling geven. Met hierin vloeiendere vormen die de garen waarmee gehaakt wordt weergeven. Daarnaast wlide ik een licht beeldende element in het logo terug laten komen wat de gebruiken doet denken aan een maatje, dit heb ik gedaan in de vorm van een extra 'lachend' lijntje onder de 'aa' van maatje.
Het logo
Webdesign
Om te beginnen met het uitwerken van de opzet van de app, ben ik begonnen met het opzetten van wireframes. Deze wireframes vormen de basis van de app, ze geven weer welke functionaliteiten zich waar bevinden en zijn een belangrijke uitwerken om vervolgens op verder te borduren in de ontwerpfase.
Op basis van de wireframes is de visuele uitwerking en het prototype van de Haak Maatje app gemaakt. Hierin is de gehele stijl toegepast, inclusief kleurenpalet en afbeeldingen. Tijdens dit proces zijn er meerdere iteraties gemaakt, onder andere aan de hand van feedback van mijn peers. Uiteindelijk heeft dit geresulteerd in een compleet Figma prototype van alle functionaliteiten van de Haak Maatje app.
Visuele uitwerking app
Om de app van Haak Maatje om te zetten naar een web app, die men kan gebruiken in hun internet browser heb ik eerst de layout van elk onderdeel op papier geschetst. Waarna ik vervolgens voor elk formaat scherm (desktop en tablet) een schaalbare navigatie voor heb uitgewerkt. Dit heb ik als eerste in Figma gedaan. Toen ik bij de gewenste navigatie ben uitgekomen heb ik deze uitgewerkt in no-code development tool Framer. Daarnaast heb ik alle schermen responsive uitgewerkt op drie verschillende schermformaten in Figma, welke ik later heb overgezet in Framer.
Schetsen en design
Uiteindelijk heb ik voor de goede schaalbaarheid van de webapp vijf schermformaten uitgewerkt. Hierbij is het kleinste scherm (mobiel) uitgewerkt zoals ik de app heb ontworpen. Bij de steken- en patronenpagina's staan op de grootste pagina's vijf blokken op één rij, maar wanneer deze kleiner schaalt veranderd de hoeveelheid of het formaat van de blokken tot dat deze op mobiel op twee per rij staan.
Ontwikkeling
