Bridgeclub de Boerderie

Een illustratief grid

Hoe kun je een bridgeclub een overzichtelijke website geven die een veelheid aan informatie en functionaliteiten op een makkelijke manier ontsluit?
Voor de bridgeclub uit Enschede bouwden we een site die alle content ontsluit via een geïllustreerd grid van 13 kaarten.

Om de site overzichtelijk te houden, besloten we een grid van kaartjes te maken. Een beetje zoals de albums in iTunes. Elk kaartje bestaat uit een afbeelding en een titel eronder. Wanneer op een kaartje geklikt wordt, wordt de content van dat kaartje getoond op dezelfde pagina.

Icoontjes op Fibonacci

Het logo van de bridgeclub, maakt gebruik van een schoppen en een klaveren teken. Het logo was toe aan een facelift en we besloten de symbolen voor schoppen, harten, ruiten en klaveren opnieuw te tekenen. Deze iconen spelen ook een belangrijke rol in de illustraties. De kaartsymbolen zijn terug te vinden in elke illustratie.
Om de verhoudingen tussen de verschillende rondingen te controleren, gebruikten we de reeks van Fibonacci. Een reeks die begint bij 1,1,2,3,5 etc., waarbij het volgende getal verkregen wordt door de twee voorgaande bij elkaar op te tellen. We gebruikte deze reeks voor diameter van alle rondingen. Ook de illustraties zijn getekend op een grid dat gebaseerd is op dezelfde verhoudingen, wat terugkomt in de vlakverdelingen.

13 illustraties

De content en functionaliteit van de site hebben we onderverdeeld in dertien groepen (het aantal kaarten dat je in een hand krijgt gedeeld bij bridge). Voor elke groep tekenden we een illustratie. Om te zorgen dat de illustraties op een scherpe manier verschalen naar de verschillende schermen en resoluties, hebben de dunste lijnen een breedte van 4 pixels.

Archetype speelkaart

De kaarten zijn uitgelegd op een responsive grid. Hoe breder het scherm, hoe meer kaarten er naast elkaar getoond worden. De kaarten worden getoond op een achtergrond die is geïnspireerd op de achterkant van speelkaarten, waarbij een simpel repeterend patroon gebruikelijk is.
Het logo is in het grid geplaatst. Hierdoor zijn meer kaartjes zichtbaar bij het openen van de site en wordt voorkomen dat het 13e kaartje op veel breedtes eenzaam onderaan bungelt.

De kaartjes hebben linksboven en rechtsonder een kaarticoon in de hoek. Dit maakt dat de illustraties doen denken aan speelkaarten, en maakt het ook mogelijk om de verschillende onderwerpen te groeperen en tegelijkertijd de belangrijkste toptaken bovenaan het grid te platen.

Content drill down

Wanneer een kaartje wordt aangeklikt, verschijnt een gebied waarin de content van het onderwerp ontsloten wordt. Soms bestaat dit uit meerdere onderwerpen, waarbij elk onderwerp verder uitgevouwen kan worden.
Wanneer weer een kaartje wordt aangeklikt, sluit de content zich.

Responsive

Het gekozen patroon van een grid met kaartjes werkt goed op grote en kleinere schermen.

Concept tot Code

We schreven ook de code voor deze site en leverden werkende html, js en css op aan de webmaster. De site bestaat uit een enkele html file die alle content bevat.

Met dank aan Bridgeclub de Boerderie voor de vrijheid die we kregen bij het bedenken en maken van de site.

concept, ontwerp + code