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.
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.
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.
is a no-nonsense UX bureau.
As creative engineers, we love complex challenges. We design solutions that feel logical for users. We focus on quality. We choose to be a small agency, so we can give each client our full attention.
We bring over 20 years of experience to each project.
Bart van Lieshout designer—architecture (with honors), TU Delft. Bart worked 10 years as an architect, designing complex buildings such as hospitals. He is fascinated by grids and typography and always in pursuit of elegant solutions. Bart sings as a tenor soloist in classical music. His daughter is called Domino.
Our specialty is fact-based design.
We base our designs on facts and insights. We research the needs of the people who are going to use the product or service. And we merge these user needs and ambitions with our clients’ ambition in a concept.
Concept a strategic foundation for the design. We sketch solutions for the core user interaction. From here we design the main functionality, outlining principles and structure.
A solid concept is half the battle. It forms the basis for prioritising and planning features, helps to convince stakeholders and guides the product roadmap. For agile teams the concept provides a clear high-level context, essential during large or complex projects.
We help ambitious organisations to make online projects successful.
Our work is often of strategic importance to our clients, so we can only show a selection.
Design for online services of a pension administration
Ideation for purchasing tools for the government
Design for a website and mail service for lawyers
Design Sprints is a format developed by Google Ventures to create a user validated prototype in only 5 working days. The ideal compact (and low-cost) innovation kickstart for corporates with challenges and ambition.
Concept for a new public service portal
Implementation of UX research for a sports brand
I.A. for a telco app
Information Architecture a design for the organisation of information. What information will be displayed where? What screens are necessary and what form of navigation aligns best with the user goals and needs? A well though out I.A. forms the basis for a successful interaction design, layout and visual design.
Coaching in-house UX teams
UX-rescue help for design teams and product teams in doubt or in trouble. Sometimes it’s hard to see if your working in the right direction. Is this the best solution for the problem? Or are you fixing the wrong problem?
With the refreshing perspective of outside professionals we help teams to identify their problem and choose an adequate solution, empowering the team to get back to work with renewed energy and focus.
Strategic pressure cookers for teams
Strategic pressure cookers facilitating sessions with stakeholders and business owners to outline a clear product vision. Strategic sessions result is a shared understanding and insight of the bottle necks, challenges and opportunities that lie ahead.
Branding for a dental practice
Design and code for a bridge club website
We build websites on a regular basis. This keeps our knowledge up-to-date about what can be achieved in the browser—and how much effort is involved. We believe that good design takes into account how things are made. Online products are not clickable images, but responsive layout systems that work well on small and larger screens alike. So we need to understand the code that makes the design.
User research in public transportation
First website for mbstudio
Naming our company
Because we believe that digital products make life better.
Why you do something is just as important as what you do. We believe in human-centered design: products and services designed from the perspective of the human who uses them. We believe that good websites, apps and online services make our life easier and more pleasurable. And that the impact of digital products on our life—and that of our children—will only increase.
That is why we choose to use our talents and energy to make digital products as good as possible.
Are you facing a challenge? Contact us.
We like to think along and can usually help. You can reach us at email@example.com