Ontwerpen - koeenm/the-startup-responsive-interactieve-website GitHub Wiki

Inleiding

Hier beschrijf ik het ontwerp proces. Aangezien meer dan driekwart van de gebruikers van de mensen die deze dienst gebruiken dit op hun telefoon doen, is het belangrijk dat het ontwerp op de telefoon heel duidelijk is.

Responsive breakdownschets

Op beide versies van de site kies ik ervoor de navigatie en het deel waar de radio live te beluisteren is net zo proberen te houden zoals de site het nu heeft. Omdat ik denk dat dit al heel erg goed en makkelijk werkt. En het helpt goed om aan te geven dat dit een BNR website is.

Ik heb maar een echt verschil tussen de mobiele en de desktop versie, en dat is dat er op de desktop een extra kolom is aan de rechterzijde van het scherm. Op desktop heb je natuurlijk maar ruimte dan op mobiel, dus geef ik extra aandacht aan de app downloaden op desktop, zodat gebruikers op desktop er ook van extra op de hoogte worden gebracht dat je de site, of beter gezegd, dat ze de app op hun telefoon kunnen gebruiken. Daarnaast kan je in die sectie naar beneden scrollen voor uitgelichte uitzendingen of podcasts. Ook is het hamburger menu opgedeeld in de navigatie balk omdat daar nu de ruimte voor is.

Op deze landingspagina kan je gelijk live luisteren naar de radio wat onderaan te zien is. Maar je kan ook door navigeren naar programma's en podcasts, naar de gemiste radio, of je kan doorklikken naar de live radio om deze inclusief beeld te kunnen bekijken en beluisteren.

Interactie

Ik ga een dropdown menu maken. BNR heeft een hamburger menu op de mobiele versie van de website en deze ga ik proberen te recreeren. Dat moet er dan zo uit komen te zien:

Wireflow

In mijn wireflow is te zien hoe mijn interactie eruit gaat zien. Door middel van margin wil ik het menu op het scherm laten komen, ik moet nog even tijdens het bouwen of het met margin-top, of margin-left of -right het mooiste gaat worden. Ook kan je het menu weer sluiten, door middel van het kruisje dat in plaats van het hamburger icoon in het scherm komt, wanneer het menu open geklapt is.

Ik heb ook nog maar even het 3 stappenplan opgeschreven omdat ik het wel een beetje was vergeten hoe het ook al weer werkte, na er een lange tijd niet meer mee gewerkt te hebben.

Het hamburger icoontje duidt een beetje feedforward aan, want wanneer je op dit icoontje klikt, dan gebeurt er iets, en dat is dat er een dropdown menu opent. In deze interactie is er niet echt feedback, deze interactie is alleen op de mobiele versie, en je kan niet bijvoorbeeld hoveren over het icoontje, omdat je op mobiel bent.