A new look for a makerspace website: the BiG Fab Lab

Synopsis

The BiG Fab Lab was a makerspace in Bowling Green, Ohio. The website was built with WordPress and the Salient theme. The site made a poor use typography, color and content. The owners wanted wanted a fresh, modern look and feel that would be responsive, and utilize their vast library of images to showcase the space and the work of their members. They also wanted to make it easier for visitors to find information about the equipment and tools available at the makerspace, and to make it easier for members to reserve equipment and tools. They needed a friendly way to drive visitors to request and sign up for events and classes.

Key Achievements

• To move quickly, I added a Gutenberg blocks library to the Salient theme. This enabled me to quickly assemble standard design patterns for the landing page while taking my time on creating reusable plugins for the custom pages.
• For the homepage, I created a card box design with CTA button to launch reservation forms and jump to other pages.
• For two interior pages, I built a custom block to list the equipment and tools available at the makerspace.
• For the second custom page, I built a custom block to list rental spaces available at the makerspace.
• Forms built with Gravity Forms integrating with Mailchimp for newsletter announcements.

Custom Plugins

ACF Tooling Block

This was my first attempt at creating a Gutenberg block plugin. I used the ACF block builder template to create a custom block that would list the tools and equipment available at the makerspace. The block is built with a repeater field that allows the user to add a title, description, and link to a manual for each tool. The block is styled with CSS Grid and Custom Properties. Combined with Qubely blocks, I placed the list inside an accordion block to collapse long lists.

The view it replaces was a hard to read table with no context. It was generated when they were seeking various tools and equipment donations. The new view is much more readable and provides context for each tool. Visitors of the site are impressed that they have access to user manuals for some of the tools.

ACF Rental Block

As my second Gutenberg block plugin project, I used the ACF block builder to create a custom block that would list the rental spaces available at the makerspace. The block is built with a repeater field that allows the user to add a title, description, and pricing for each space. The block is styled as a card with a strong call to action button. Integrated with Qubely blocks, I added background shapes to increase visual interest.