Wireframing van een SPA

Een SPA bestaat vaak uit een login-gedeelte en een applicatie gedeelte. Beiden kunnen via wireframing (een simpel ontwerpproces), in overleg met de opdrachtgever worden gemaakt. De ontwerper maakt een wireframe, en toont dat aan de opdrachtgever. Nadat ze, na eventuele wijzigingen, het eens zijn geworden kan de applicatie worden gebouwd. Hieronder is een voorbeeld van een wireframing proces.

Wireframing

Het login gedeelte
Dan de applicatie-pagina, dat is een terugkerende hoofdindeling. Bovenin is een Featured Area, dit is over de artiest die actief naar geluisterd wordt, rechts het audio-gedeelte over het album van deze artiest waarnaar wordt geluisterd, en links onderin de overige applicatie onderdelen.
Laten we beginnen met de Featured Area, daarin komt een titel met de tekst: "Featured", daaronder een afbeelding van de artiest, rechts daarvan de naam van de artiest, en daaronder een tekstblok dat iets over de artiest zegt.
De volgende stap is de applicatie-functionaliteit in de tabbladen.
We maken vier tabbladen: My Music, My Account, en nog twee, later in te vullen.
My Music zal alle albums die ik mag beluisteren tonen. De lijst kan lang zijn, dus komt er een scrollbar rechts. We zetten er een subtitle in om de sectie kenbaar te maken.
Daaronder komen placeholders voor de albums, afbeeldingen met daaronder in vet, de albumtitel en in gewoon de naam van de artiest. We dupliceren dit een aantal malen, horizontaal en verticaal. De onderste rij kappen we af om de illusie van scrollen duidelijk te maken.
My Account bevat gegevens over het account, mailadres, wachtwoord, soort van abonnement, etc.
Dan aan de rechterkant, zoals aangegeven, het panel dat aangeeft wat er nu speelt. Op dat panel komen audio-speler-controls, en geluid-controls. We zetten een album-placeholder erboven, en een tracklist eronder.
Het My Account wireframe, dat onder een ander tabblad is gekomen.
Dan zijn er nog twee tabbladen, die moeten nog ontworpen worden. Ik wil dat graag voor u doen.
Of een andere applicatie voor u ontwerpen.