Bridgeclub de Boerderie

A grid of illustrations

How can you organize and navigate a variety of subjects and functionality in an orderly fashion? For the bridge club ‘de Boerderie’ (local dialect for ‘farm’) we designed and build a site that unlocks all content through a grid of 13 illustrated cards.

To keep all content close at hand, we decided to create a grid of cards. Like the albums in iTunes, each item consists of an illustration (like a album cover) and a title beneath it. If you click a card, a content area becomes visible, displaying the content of the subject without leaving the page.

Fibonacci suit icons

The Boerderie logo uses a spades and clubs sign. We decided to draw a custom set of the card suits, since we planned on using the suit symbols in the illustrations for the different cards as well (each illustration holds at least one suit icon). We based the sizes of the curves in the icons on the Fibonacci sequence. Starting with 1,1,2,3,5 etc. the sequence expands with the next number being the sum of the last two. We used this sequence to size the diameter of all curves in the icon set. The same scale is also used in the grid on which the illustrations are drawn.

13 illustrations

We categorized the content and functionality into thirteen groups (the number of cards you get dealt in a game of bridge). For each group we designed an illustration.
The illustration are drawn on a grid based on the Fibonacci sequence. The thinnest lines are 4px wide, to ensure sharp scaling to all different screen sizes and resolutions.

The playing card archetype

The cards are laid out in a responsive grid that shows more cards per row if the screen size increases. They are shown on a background pattern, inspired by the repetitive patterns common on the back of playing cards. The logo of the club is placed inside the grid. This allows more content to be visible and prevents the last card from becoming a row on its own on many screen widths.

Each card carries the suit icon in the upper left and lower right corner. This pattern echoes the layout of a playing card and also helps to categorize the content into suits, while still keeping the most common top tasks at the start of the grid.

Content drill down

If a card is clicked, the content area is revealed. Sometimes the content of a card spans multiple subjects, represented in expandable area’s of different sorts.
If any card is clicked, the content area closes itself.

Responsive

The pattern of a responsive grid with cards works well on both larger and smaller screens.

Concept to Code

We wrote the code for this site and delivered working html, js and css to the webmaster. The site consists of a single html file holding all the content.

We thank Bridgeclub de Boerderie for the freedom they gave us in designing and building the website.

concept, design + code