Cyber Cypher

De place 2 be voor alles Hip Hop

Een hip hop website ontworpen op een strak grid met een doelbewuste kleurkeuze

Deze opdracht (Minor Visual Interface Design) draaide om het toepassen van een grid en een gefundeerde kleurkeuze. Ik koos voor oranje vanwege de energie en associatie met hiphop-cultuur. Cyber Cypher is een website waar je alles vindt rond hiphop: events, nieuws en een wiki met artiest- en historiepagina’s.

De probleemstelling: er is geen centraal platform voor hiphop; informatie is verspreid over veel sites. Ik ontwierp in Figma een klikbaar prototype met o.a. een werkend filtersysteem in de agenda. De flow liep van schetsen → mid-fi → hi-fi, met een 12-koloms grid voor desktop (mobiel was niet vereist).

Bekijk prototype
  • Figma
  • 2 weken
  • Minor Visual Interface Design
  • UX/UI design
  • Prototype

Ontwerpvraag

Hoe kan ik een centraal, overzichtelijk platform ontwerpen waar hiphopliefhebbers snel events, nieuws en verdieping vinden — met een helder grid en een doordachte kleurhiërarchie?

Onderzoek naar grid en kleur, referenties en moodboards

Onderzoek

Ik onderzocht de rol van kleurpsychologie en koos voor oranje vanwege energie, urgentie en zichtbaarheid — passend bij hiphop en live-events. Daarnaast analyseerde ik platforms voor muziek/scene-cultuur en noteerde ik patronen in navigatie, kaart/agenda-weergaves en tag-systemen.

Uit dit onderzoek bleek de noodzaak voor een gecentraliseerde informatiearchitectuur, duidelijke typografische hiërarchie en scannable kaarten voor events/nieuws.

Mid-fi en hi-fi wireframes op een 12-koloms grid

Design & interactie

Ik werkte van schetsen naar mid-fi en vervolgens hi-fi op een 12-koloms grid (desktop). De oranje accenten sturen aandacht naar primaire acties (zoals tickets, filters, lees verder). Er is een werkend filtersysteem in de agenda (locatie, datum, categorie) en een overzichtelijke nieuwsfeed.

De wiki-pagina over de geschiedenis van hiphop is bewust losser van het grid opgezet om ritme en storytelling te versterken, zonder de leesbaarheid te verliezen.

Agenda met filters en event cards Nieuwssectie met artikelen en categorieën

Styleguide

Styleguide met kleuren, typografie, grid en componenten
Cyber Cypher footer ontwerp met navigatie en context

Resultaat & Reflectie

Het resultaat is een klikbaar Figma-prototype met een duidelijke structuur voor events, nieuws en wiki. Ik ben het meest trots op de footer: die laat een sterke afsluiting achter met heldere navigatie, context en vervolgstappen. De wiki-pagina werkt goed als editorial break — visueel eigenwijs, maar functioneel en leesbaar.

Als volgende stap zou ik zoeken/filters verder verfijnen (chips, snelle presets) en de agenda koppelen aan echte data om edge-cases te valideren.

Bekijk prototype

Boat Buddies

Volgend Project