Skip to content

Analyse

Jump to bottom
KB15 edited this page Jun 20, 2024 · 12 revisions

Briefing

BNR, Prins Bernhardplein 173, Amsterdam

Menno van Boheman

Email: menno.van.boheman@fdmediagroup.nl

Achtergrond informatie

  • BNR is een onafhankelijk nieuwsradio
  • BNR staat voor Bussines Nieuws Radio
  • BNR verzorgt naast het belangrijkste zakelijke en financieel- economische nieuws ook duiding, verdieping en context- en opinievorming.
  • commercieel radio, talks only
  • radio, geschreven nieuws, podcast
  • BNR is de een na grootste podcast uitgever in NL
  • 1+ miljoen luisteraars per maand
  • Een radiozender met muziek dat afspeelt en ook dat je nogsteeds bij blijft met wat er af gespeeld word bij BNR met bvb bulletins etc.

Project: Now Playing Livestream

  • SINGLE PAGE APPLICATION: Een landings pagina waar mensen kunnen luisteren naar liedjes en waar ook het laatste nieuws van BNR binnen komt, denk aan een blog met radio erbij.

Wat moeten we nou precies maken?

  • Een landings pagina waar mensen kunnen luisteren naar liedjes en waar ook het laatste nieuws van BNR binnen komt, denk aan een blog met radio erbij.

Wat is het doel hiervan?

  • mensen moeten naar de radio luisteren, zo lang mogelijk

Wie zijn de eindgebruikers?

  • ondernemers, business to business doelgroep (nike bvb), mensen die in de ochend naar werk reizen bvb. Consumenten, professionals, mensen die meer kennis willen opdoen over hun werk/baan (zakelijke beslissers).
  • Mensen willen ook naar muziek luisteren (muziek radio)

Wat zijn de randvoorwaarden en verwachtingen van de opdrachtgever?

  • Nieuws kunnen zien
  • Muziek kunnen luisteren
  • Voldoen aan de BNR huisstijl
  • Toe aan muziek? ga naar ons nieuw station
  • Je bent vrij in hoe je de pagina maakt en opstelt zolang je de huisstijl volgt, het is een aparte pagina van BNR.
  • Je hoeft niet de artikel pagina`s te maken.
  • De artikelen zitten in de API.
  • Responsive
  • Mobile first
  • De URL die gegeven word is een playlist met muziek
  • Je moet de player onafhankelijk maken dus het moet blijven spelen al ben je bezig met andere dingen.

Hoe moeten gebruikers de website ervaren?

  • Je wilt het op de achtergrond gebruiken, je klikt op play en luistert muziek en wanneer je kijkt naar de pagina dat je ook gewoon kan lezen.

Wanneer en hoe leveren wij het project op?

  • 20/06/2024 (Donderdag)

Wat krijgen we mee

  • guidelines
  • huisstijl
  • livestream URL
  • Artikelen uit een API met een share URL (gebruik die voor verwijzingen)
  • imgix plugin via de JSON
  • De database is READ only voor ons je kan het niet aanpassen (naast de imgix)
  • business beats en gewone BNR krijgen we mee (wat afgespeeld word)

Wat ik heb meegenomen uit de BNR Guidelines:

  • De font die gebruikt moet worden is Plus Jakarta Sans
  • De main kleuren zijn #FFD200 (geel), #000 (zwart), #D7D2CB (grijs).
    • Van de main kleuren is #FFD200 (geel) het accent kleur
    • #D7D2CB (grijs) de achtergrond kleur
    • #000 (zwart) de font kleur
  • De logo moet zich links boven plaatsvinden
    • Ook moet de grootte van het logo 1/6de zijn van de hoogte van de viewport
  • De CTA moet in het zwart/wit en boven/onder het 'artwork'
  • De brand matra is 'Blijf scherp'
  • De slices worden gebruikt als frames voor fotografisch content, denk aan een instagram post of iets

Mogelijke oplossingen die ik heb bedacht

  • Een website waar je radio vast staat onderin op mobile zodat het altijd de aandacht heeft
  • De artikels van BNR staan vervolgens ook op het scherm boven zodat mensen snel geinteresseerd raken in de artikels die BNR schrijft

Principes en Conventies (S10 t/m S12)

  • Responsive images
  • Feature branches
  • Pull requests
  • Loading optimization
  • Lighthouse performance
  • Client side fetching
  • Form validation
  • View transitions
  • Client side fetching
  • Progressive Enhancement
  • Pleasurable UI(animations, transitions etc)
  • Client side scripting for UX
  • UML Diagram
  • Zero-State
  • Skeleton Loader
  • Refactoring

Welke heb ik toegepast?

Welke nog niet?

  • Feature branches
  • Pull requests
  • Form validation
  • View transitions
  • Zero-State
  • Skeleton Loader
  • UML Diagram

Waarom heb ik ze nog niet toegepast?

Voor de UML diagram, feature branches en Pull requests: Ik werkte alleen dus had ik ze niet nodig en een UML diagram zou hier ook overbodig zijn omdat ik maar 1 pagina hoefde te maken.

Form validation had ik ook niet nodig omdat ik geen form moest maken

View transitions had ik geen tijd voor (begreep t ook niet echt super goed, dus zat eerst echt een deep dive erin te doen om het goed erin te krijgen)

Zero-state heb ik niet gedesigned omdat ik geen ander state nodig zou hebben naast de default state

Skeleton Loader is me niet gelukt om te gebruiken, begreep het ook niet echt.

Clone this wiki locally