Hoe heb ik de opdracht uitgevoerd? Aller eerst ben ik begonnen met het bedenken van een collectie. Nadat ik voor voetballogo s had gekozen, heb ik nagedacht over de interactie met de gebruiker. Het eerste plan was vooral gericht op de clubs, maar later heb ik ervoor gekozen om het geheel te richten op de logo s. Vervolgens ben ik verder gegaan met het opschrijven van alle functies en de inhoud die het geheel bevat. Nadat ik dit netjes geordend had, ben ik begonnen met het maken van de user model. Deze heb ik eerst geschetst, zodat eventuele fouten snel opgelost waren. Uiteindelijk heb ik de user model digitaal nagemaakt. Als laatste ben ik bezig geweest met het maken van de scenario. Voordat ik met het ontwerpen begon, heb ik eerst een stappenplan gemaakt. Vervolgens heb ik deze stappen simpel geschetst en ben ik het internet opgegaan op zoek naar inspiratie. Hierbij kwam ik veel dingen tegen die niet mochten ontbreken in mijn ontwerp. Uiteindelijk heb ik de hoofdpagina ontworpen en vanuit daar de rest van de schermen. Nadat ik mijn scenario aan medestudenten had getoond, heb ik verschillende punten verbeterd. Dit is terug te zien bij de ontwerpbeslissingen.
User model
Scenario inclusief ontwerpbeslissingen In deze afbeelding is de hoofdpagina te zien van een logo, in dit geval het AJAX logo. Hierin vallen vooral de buttons op. Deze heb ik een opvallende kleur gegeven, om de gebruiker er op te attenderen dat deze bestaan. Ik heb er voor gekozen om bepaalde eigenschappen te tonen aan de hand van een logo. Dit bespaard ruimte en zorgt voor eenvoud en duidelijkheid. Bovenin is er een breadcrumb geplaatst. Dit geeft de gebruiker een duidelijk beeld van waar hij zich bevind. Verder heb ik onder elke afbeelding bepaalde statistieken geplaatst. Ook deze zijn voorzien van een logo, voor eenvoud en duidelijkheid. De gebruiker kan de pagina delen via verschillende sociale media. Dit kan door middel van de kleine logo s rechts bovenin.
Stap 1 Browse Ik heb er voor gekozen om het toevoegen van afbeeldingen in een popup af te handelen. Dit is simpel en duidelijk voor de gebruiker. De buttons heb ik net als op de hoofdpagina voorzien van een opvallende kleur. Het valt op dat de back button lichter van kleur is. Dit komt omdat deze in stap 1 niet te gebruiken is. Ook geef ik bovenaan op twee manieren de gebruiker informatie over het aantal stappen welke nog volgen. Ik heb hier voor gekozen zodat de gebruiker weet wat volgt en er eventueel voor kan kiezen om een stap terug te gaan.
Stap 2 Edit Hier kan de gebruiker de afbeelding aanpassen zodat deze voldoet aan zijn eisen. Ook is het mogelijk om de afbeelding nog te veranderen, mits de geselecteerde afbeelding niet volstaat. De iconen naast het logo geven aan wat er allemaal met logo mogelijk is. Van boven naar beneden is dat slepen, de hoogte aanpassen, de breedte aanpassen en draaien. Deze aanpassingen zijn enkel van toepassing op het zwarte vierkant. De back button is in dit geval wel te gebruiken, vandaar dat de kleur ditmaal hetzelfde is als de next button. Overigens heb ik de next button een groter lettertype gegeven dan de back button, omdat deze voor gebruiker vaak belangrijker is dan de back button.
Stap 3 Info In deze stap heeft de gebruiker de mogelijkheid om informatie voor het logo in te vullen. Waar nodig heb ik de gebruiker informatie gegeven over het invullen van de velden. De logo s dit gebruikt worden op de hoofdpagina komen ook hier weer in terug. Nadat de gebruiker een tag, kleur of lettertype heeft toegevoegd, kan hij deze verwijderen door op het kruis ernaast te klikken.
Stap 3 info Lettertype Nadat de gebruiker op het plusje heeft geklikt, verschijnt er een dropdown met lettertypes. Alle soorten lettertypes hebben als font hun eigen stijl. Dit moet het voor de gebruiker nog makkelijker maken om hun font te vinden.
Stap 3 Info Kleuren Vervolgens kan de gebruiker de kleuren van het logo kiezen. Ik heb er voor gekozen om een aantal standaard kleuren te kiezen, zodat er ook op gezocht kan worden.
Stap 3 Info Objecten Na het toevoegen van de kleuren, kan de gebruiker de objecten invullen. Deze dienen getypt te worden en moeten worden afgesloten door middel van een komma (,) of een enter. Ik heb hiervoor gekozen omdat het dan ook mogelijk is om spaties in een tag te gebruiken. Zodra er op de tag geklikt wordt kan deze gewijzigd worden. Hetzelfde geld voor het invoeren van de dieren, echter is dat in dit voorbeeld niet van toepassing.
Stap 4 Preview Uiteindelijk krijgt de gebruiker een overzicht van de ingevulde waardes. Zo is het mogelijk voor de gebruiker om te controleren of alles goed is ingevuld en eventueel nog dingen aan te passen door een stap terug te gaan. Zodra alles goed is ingevuld, kan het toevoegen worden afgerond.
Database indeling User Voetballogos Afbeeldingen Clubs Competities Username Kleuren logoid logoid Naam Wachtwoord Lettertype Bestandsnaam Clubnaam Land Emailadres Objecten type Clubstad Voornaam Dieren views CompetitieID Achternaam Views favorites Leeftijd Favorites thumbs up Favorites Fotos omschrijving lettertypes objecten dieren Kleuren