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.

English

is een no-nonsense UX bureau.


Als creatieve ingenieurs houden wij van complexe uitdagingen. We ontwerpen oplossingen die logisch zijn voor gebruikers en focussen op kwaliteit. We kiezen voor een compact bureau, zodat elke klant onze volle aandacht krijgt. Samen brengen wij ruim 20 jaar ervaring mee.

Bart + Meike: ingenieurs met een focus op mensen.
Meike Mak design researcher en UX specialist—industrieel ontwerpen (cum laude), TU Delft. Meike duikt graag diep in de belevingswereld van gebruikers en geeft trainingen in UX research en interviewtechnieken. Ze houdt van bergen, squash en bordspellen en is moeder van Willem.
Bart van Lieshout ontwerper—architectuur (cum laude), TU Delft. Bart werkte 10 jaar als architect aan complexe gebouwen zoals ziekenhuizen. Hij is gefascineerd door grids, typografie en altijd op zoek naar elegante oplossingen. Naast zijn werk zingt Bart als solist in klassieke muziek. Hij is vader van Domino.

Onze specialiteit is fact-based design.


Dat betekent dat we onze ontwerpen baseren op feiten en inzichten. We doen onderzoek naar de behoeften van de mensen die een product of dienst gebruiken. Deze wensen en behoeften brengen we samen met de ambities van de organisatie in de vorm van een concept.


Concept een strategische basis voor het ontwerp. We ontwerpen een oplossing voor de essentie van het vraagstuk. Van hieruit schetsen we de belangrijkste functionaliteiten, zodat de principes en structuur helder worden. De vorm van een concept kan per project sterk verschillen.
Een goed concept is het halve werk. Het is een basis voor het prioriteren en plannen van functionaliteiten, het overtuigen van stakeholders en het maken van een roadmap. Voor agile teams vormt het concept een duidelijke high-level context, essentieel bij grote of complexe projecten.
We beginnen altijd met schetsen en werken met onze klanten van grof naar fijn. Zo kunnen we snel itereren en voorkomen we dat dure stappen opnieuw moeten.

Wij helpen ambitieuze organisaties om online projecten succesvol te maken.


Ons werk is vaak van strategisch belang voor onze klanten, dus we kunnen niet alles laten zien.
  • Ontwerp van online diensten voor pensioenuitvoerder

  • Ideation van inkoopsoftware voor de Rijksoverheid


    Ideation het genereren van ideeën en oplossingsrichtingen. Samen met de inkoopprofessionals van de overheid ontwikkelde we een klikbaar prototype van hoe het inkoopproces in de toekomst gefaciliteerd kan worden.
    Lees meer over dit project.
  • Ontwerp van website en maildienst voor advocaten


    Ontwerp een helder plan van wat er moet gaan komen. Op basis van onderzoek maakten we schetsen, grafische ontwerpen en prototypes. De site is live gegaan in 2017 en samen met het ontwikkelteam werken we agile aan uitbreidingen en verbeteringen.
    Bekijk wat we ontworpen hebben. En waarom.
  • Design Sprints


    Design Sprints een door Google Ventures ontwikkeld format om in 5 werkdagen te komen tot een prototype dat gevalideerd is met gebruikers. De ideale compacte (en goedkope) start van innovatie voor corporates met uitdagingen en ambities.
    Design thinking en teamwork.
  • Concept nieuwe mijn-omgeving van overheidsorganisatie

  • Implementeren van UX research bij sportmerk

  • I.A. van app voor telecomprovider


    Informatie Architectuur ontwerp van de organisatie van informatie. Welke informatie wordt waar getoond? Welke schermen zijn nodig en welke navigatie sluit het beste aan bij wat gebruikers willen doen? Een doordachte I.A. is het uitgangspunt voor het interactieontwerp, layout en grafisch ontwerp.
  • Coaching van in-house UX teams


    UX-rescue hulp voor ontwerp- en productteams die twijfelen of vastlopen. Soms zie je door de bomen het bos niet meer. Of twijfel je of de gekozen richting wel de juiste is. Met de frisse blik van een buitenstaander helpen we teams om het probleem te identificeren en een oplossingsrichting te kiezen, zodat met hernieuwde focus en energie verder gewerkt kan worden.
  • Strategische snelkookpan voor diverse bedrijven


    Strategische snelkookpan In een aantal sessies werken we met alle stakeholders naar een heldere visie op het product of de dienst. Er ontstaat een gezamenlijk overzicht en inzicht in kenlpunten, uitdagingen en kansen.
  • Branding voor tandartspraktijk


    Branding de identiteit van je bedrijf. Je visitekaartje—letterlijk. Wat wil je uitstralen? Welke kernwaarden vormen de basis voor je bedrijf en wat voor huisstijl past daarbij?
    Lees meer over lettertype, layout en logo.
  • Ontwerp en bouw van website voor bridgeclub


    We bouwen met regelmaat zelf websites. Zo houden we onze kennis up-to-date van wat er kan in een browser en hoeveel moeite verschillende dingen kosten. En omdat we vinden dat goede ontwerpen rekening houden met het maakproces. Online producten zijn geen klikbare plaatjes, maar een responsive systeem dat op alle schermgroottes prettig moet werken. Dat vergt kennis van code.
    Illustraties en website voor een bridgeclub.
  • Onderzoek naar OV-chipkaart


    Onderzoek uitzoeken hoe iets werkt. In dit geval hoe de Nederlandse OV-chipkaart werkt voor mensen die internationaal reizen met de trein. Tegen welke problemen lopen de reizigers aan? Begrijpen buitenlanders die per trein ons land binnenkomen wat de bedoeling is? En hoe ze het station uit kunnen komen?
    Bekijk onze bevindingen.
  • Eerste website van mbstudio


    Eerste website altijd lastig. Wat kun je op je site zetten als je eerste project nog moet beginnen en je nog druk bezig bent met het opstarten van je eigen bedrijf in de avonduren?
    Dit hebben wij ervan gemaakt in 2016.
  • Bedrijfsnaam kiezen


    Als je graag beslissingen neemt op basis van feiten, en je adviseert je klanten om onderzoek te doen, hoe kies je dan de naam voor je studio? Fact-based natuurlijk ;) Compleet met schetsen, prototypes en onderzoek.
    Lees het hele verhaal.
  • adidas
  • Arcadis
  • Boom juridische uitgevers
  • Centraal Bureau Rijvaardigheid
  • ING
  • knab
  • Ministerie van Binnenlandse Zaken
  • Nederlandse Spoorwegen
  • Schaal+
  • Squla
  • Delft University of Technology
  • User Intelligence
  • UX academy
  • uxinsight

Omdat wij geloven dat digitale producten het leven beter kunnen maken.


Waarom je iets doet is minstens zo belangrijk als wat je doet. Wij geloven in human-centered-design: producten en diensten die zijn ontworpen vanuit de mens. Wij vinden dat goede websites, apps en online diensten ons leven makkelijker en prettiger maken. En dat de impact van deze producten op ons leven—en dat van onze kinderen—steeds groter wordt.
Daarom zetten wij graag onze talenten in om digitale producten zo goed mogelijk te maken.

Heb jij een uitdaging? Neem dan contact met ons op.

We denken graag mee en kunnen meestal helpen. Je kan ons mailen via studio@mbstudio.nl