Mockups smartphone

De mockups worden gebruikt om de interface definitief te ontwerpen en vast te leggen. In de

wireframes is er geëxperimenteerd met diverse ontwerpen, welke op die wijze getest konden worden in een realistisch visueel ontwerp. Het doel van de mockups is dus om de uiteindelijke interface te ontwerpen, zodat deze in de volgende ontwerpfase als blauwdruk gebruikt kunnen worden om het prototype te programmeren. Alle interface elementen worden dus in deze activiteit definitief vastgelegd.

Het rode vlak in de afbeeldingen is het effectieve gedeelte van 44px bij 44px. Dit is het gebied wat reageert op de actie van de gebruiker. Daarnaast is te zien hoe de afmetingen zoals zijn vastgelegd in de systeemeisen zich daadwerkelijk verhouden in de interface tot elkaar. De marge van 5px van de zijkant tot de content is genoeg om een onderscheid te krijgen en het overzicht te bewaren. De menu knop bestaat uit het ‘hamburger’-icoon, de titel staat bovenaan de content in de header, samen met de knop om naar het volgende artikel te gaan. De onderste knoppenbalk bestaat dus uit drie knoppen, terug naar het vorige artikel – terug naar het begin van het artikel en naar het volgende artikel. Deze knoppenbalk is bij het inladen van het artikel zichtbaar en verdwijnt na drie seconden wanneer de gebruiker heeft gescrolled. De balk keert terug wanneer de gebruiker het scherm opnieuw aanraakt / weer gaat scrollen. Tevens is te zien in de afbeelding links onder welke feedback de gebruiker krijgt wanneer deze swiped naar het volgende artikel.

Boven: Afbeelding 6.1.2– ‘Begin van artikel en inhoudsopgave’

Onder: Afbeelding 6.1.3– ‘Tekst in content, voorpagina en artikel’

In de afbeelding hierboven (6.1.2) is te zien hoe de daadwerkelijke kleuren van het visuele ontwerp zich uitten in het design met een breedte van 320px. Zoals te zien heeft de header een opacity (doorzichtigheid) met de waarde van 0.8. Het ontwerp van het artikel start met de hoofdafbeelding, gevolgd door de kleinere afbeelding die strookt met de tekst. De inhoudsopgave heeft het ontwerp zoals is afgesproken. De knoppen hebben wederom een afmeting van 44px hoog en 230px breed. Daarnaast bied de resolutie met een breedte van 320px ruimte voor zes artikelen plus de social media functionaliteiten. De titel in de header heeft een grootte van 20px, waar het lettertype van de tekst in de content een grootte heeft van 16px met een tussenregelafstand van 20px.

19

Boven, onder: Afbeelding 6.2.1– ‘Artikelpagina’s en voorpagina’

6.2

Mockups tablet

Zoals is te zien in de afbeelding hiernaast (afbeelding 6.2.1) blijven de header en de onderste knoppenbalk een hoogte houden van 44px. De breedte schaalt wel mee met het design. Dit zal blijven gebeuren tot een breedte van 1024px.

De tekst blijft een lettertype behouden van 16px en een tussenregelafstand van 20px, waar de breedte van de zinnen mee schalen met het ontwerp. De afbeeldingen schalen ook mee het de breedte van het scherm, wat een vereiste is bij het realiseren van een responsive design.

21

RESPONSIVE DESIGN NXT: ONTWERPRAPPORT – MOCKUPS

In de afbeelding hiernaast is te zien hoe de systeemeis waarin wordt vastgelegd dat alle secties van een artikel onder elkaar geplaatst moeten worden, wordt gerealiseerd in een visueel ontwerp. Dit kan vergeleken worden met de mobiele websites van Facebook, Twitter en instagram. Uit het vooronderzoek bleek namelijk dat gebruikers daar al veel ervaring mee hebben en het dus niet erg vinden om te scrollen om de content te lezen. Hierin is wel een goede afwisseling tussen de afbeeldingen en de tekst vereist. Uit de usability tests bleek namelijk dat de testpersonen het als prettig ervaren wanneer de tekst voldoende wordt afgewisseld met de afbeeldingen.

Zoals te zien in de afbeeldingen schaalt het design op de tablet gewoon mee met de breedte van het scherm. De afmetingen van de header, de onderste

knoppenbalk en de tekst blijven hetzelfde als bij de smartphone versie, om de consistentie te bevorderen. De afbeeldingen schalen wel mee met het design, welke zullen overschakelen naar de templates van MagStream bij een breedte van 1024px. Dan komt de landscape tablet / desktop weergave tevoorschijn.

23

RESPONSIVE DESIGN NXT: ONTWERPRAPPORT – MOCKUPS

Boven en links: Afbeelding 6.3.1– ‘Aangepaste functionaliteiten social media’

Boven: Afbeelding 6.3.2– ‘Aangepaste functionaliteiten onderste knoppenbalk’

6.3

Mockups aanpassingen

Na deze definitieve ontwerpen zijn er op basis van de testresultaten nog een aantal wijzigingen doorgevoerd in het design. Deze zijn al wel opgenomen in de systeemeisen en worden hieronder verder gespecificeerd.

De rechter bovenknop om naar het volgende artikel te gaan heb ik vervangen voor de social media functionaliteiten. Deze werken middels een uitschuifmenu, net als bij de

inhoudsopgave (afbeelding 6.3.1).

Daarnaast heb ik extra feedback toegevoegd aan de onderste knoppenbalk. Wanneer het scherm zich op de eerste 50px bevindt, zal deze doorzichtig grijs kleuren. Pas wanneer de gebruiker meer dan 50px scrolled, zal deze zijn kleur terug krijgen.

6.4

Prototype opleveren

Het prototype wordt aangeleverd aan MagStream in een .ZIP bestand.

De naam van het bestand is ResponsiveNXT, waar de .ZIP bestaat uit de volgende bestanden: HTML bestanden: index.html Artikel1.html Artikel2.html Artikel3.html Artikel4.html Artikel5.html CSS bestanden: - voorpaginahamburger.css - voorpaginahamburger2.css - voorpaginahamburger3.css - voorpaginahamburger4.css - 2hamburger.css - 2hamburger2.css - 2hamburger3.css - 2hamburger4.css - 2ahamburger.css - 2ahamburger2.css - 2ahamburger3.css - 2ahamburger4.css - 3hamburger.css - 3hamburger2.css - 3hamburger3.css - 3hamburger4.css - 4ahamburger.css - 4ahamburger2.css - 4ahamburger3.css - 4ahamburger4.css - hamburger.css - hamburger2.css - hamburger3.css - hamburger4.css - JPstyle.css - Jquery.sidr.dark.css - spn.css Javascript bestanden: - hamburger.js - highlight.min.js - jquery.jpanelmenu.js - jquery.sidr.min.js - jquery-1.9.0.js - spn.js

Dit document is bestemd voor: Michiel Auerbach, Liesbeth Bos en Jörgen Janse.

Den Haag, 10 februari 2014