About the project
Schule für Gestaltung (SFG) Basel, an art school in Basel, Switzerland, partnered with dreipol to design a new website that embraced their commitment to innovation and creativity. They required a site that featured interactive 3D elements and allowed editors the flexibility to manage content easily.
Using DatoCMS as the content backbone, dreipol developed a solution that prioritized a seamless user and developer experience, without sacrificing on the heavy customization required on the editorial side for generating custom 3D artworks using rich textures.
We were really fascinated by the granularity of the artworks generated, and how editors could create new textured models on the fly, so we caught up with Jörg from dreipol to chat about their experience with the project.
TLDR
GraphQL Playground: dreipol utilized DatoCMS's GraphQL API Explorer to create efficient data queries and incorporated a live preview for real-time content updates.
3D Art Customization: The CMS enabled editors to control 3D textures and visual parameters directly from within the CMS and get a live preview of what the end results would look like.
Plugins: Conditional controls and pre-built plugins streamlined the editing experience, making DatoCMS accessible to non-technical users.
Developer Experience (DX): DatoCMS’s flexible schema management and clean UI empowered frontend developers to manage backend tasks efficiently.
Implementing DatoCMS
From the beginning, dreipol saw DatoCMS as an ideal fit for SFG Basel’s requirements.
In their initial pitch, dreipol built a simple prototype that showcased dynamic 3D content controlled via DatoCMS - a core requirement for the project. This early example highlighted the flexibility and straightforwardness that the editors could expect when working with Dato, and helped secure it as the preferred platform for the project.
For SFG Basel, we showcased 3D elements where they could dynamically choose textures and colors right from the CMS, which won us the pitch.
On the other hand, DatoCMS’s user-friendly interface and strong DX made it a preferred choice for dreipol's frontend team, who needed to manage both the presentation and content modeling.
The no-code schema setup allowed for a collaborative, iterative approach, with dreipol meeting with SFG Basel fortnightly to adjust content structures and provide guidance. Not only did this help the content team understand the foundations behind the structure, but led to minimal onboarding at project completion since they were quite familiar with the project already.
DatoCMS is clean, focused, and doesn’t have unnecessary features. It’s just what we need without the bloat.
The team defined specific validation parameters, such as character limits and contextual help texts, to ensure an intuitive editing process with content integrity in place. This hands-on, flexible approach to schema development allowed dreipol to quickly adjust content structures based on SFG Basel’s evolving needs, keeping the platform manageable and user-friendly.
Where DatoCMS stood out
We'd already established that the dreipol team were in favour of choosing Dato, but some key features on both the editorial and development sides stood out to reassure them that they were making the right choice.
GraphQL Explorer
The DatoCMS GraphQL API Explorer was a big plus to dreipol's approach.
The CDA playground allowed for pre-documented and efficient data querying, allowing them to break down queries into reusable fragments for different components in a safe sandbox environment and then take it to their repo.
We’re big fans of the GraphQL API Explorer. The flexibility with GraphQL queries is fantastic. It’s intuitive and helps us easily reuse fragments across different queries.
It also streamlined the process of identifying and fetching specific content attributes, accelerating development and improving both the UX and DX by reducing loading times and optimizing the data flow across the site.
Plugins and Validations
DatoCMS’s plugin ecosystem was another major key in enhancing the editorial experience. dreipol integrated plugins such as the live preview, which provided a real-time view of content changes, greatly benefiting SFG Basel’s editors.
The content team would often upload new textures and generate artwork for landing pages using those textures, along with some presets for angles, lighting, and other visual configurations on how the end result should look. Having the live previews side-by-side was a huge time saver in letting them actually visualize things before pushing them to staging or production.
Additionally, they employed conditional controls, which dynamically hid or revealed fields based on specific inputs. This modified the interface, making the CMS less cluttered and more intuitive, especially for non-technical editors.
Customization for 3D Artwork Generation
A standout feature of the new website was the dynamic 3D art generator.
Initially conceptualized during the pitch phase, this capability evolved to allow editors direct control over various 3D visual parameters. The implementation centered on user-friendly inputs within DatoCMS, where editors could upload textures, adjust displacement, control lighting angles, and modify surface properties. This customization capability empowered SFG Basel’s editorial team to bring their creative vision to life, enabling on-the-fly adjustments to interactive 3D elements without developer intervention.
Integrated Search
DatoCMS’s built-in search functionality, with its simple setup and configuration, further helped dreipol to include options like fuzzy matching and they found the API responsive enough to handle content search efficiently. The search was easy to integrate and required minimal adjustments, providing users quick access to relevant content.
Balancing User Experience with Developer Experience
Another few points that stood out in our chat was the overall experience for editors and devs. Granted that the editors use the CMS the most beyond a point, but the DX had to be equally strong to setup such a complex project in a straightforward manner.
Here's a few points that Jörg felt really enhanced the overall experience.
Content Modeling and Migrations
DatoCMS enabled dreipol's frontend team to take an active role in backend configuration and content modeling.
DatoCMS makes it super easy as a frontend developer to get into content modeling. It's a great developer experience.
This flexibility was especially advantageous as they could make real-time schema adjustments during the regular feedback sessions with SFG Basel. For ongoing content updates, dreipol used DatoCMS’s migration capabilities, allowing them to automate schema changes, such as updating category tags, without requiring any manual intervention whatsoever.
This adaptability ensured that the site could evolve with minimal disruption, an essential feature for a dynamic content-rich site like SFG Basel’s.
Plugins and Workflows
Real-time previews enabled editors to see changes as they made them, reducing the need for repetitive testing with hits and misses. The combination of the GraphQL API and live previews also improved dreipol's development workflow by allowing developers to visualize the effects of their code changes instantaneously, resulting in a more connected integration between the frontend and backend.
The modular plugin architecture of the CMS allowed them to also expand the CMS’s functionality without sacrificing simplicity. By using plugins for tasks such as conditional field display and live preview integration, they were able to create a purpose-built CMS that met SFG Basel’s specific requirements without editorial complexity.
Future Expansion
DatoCMS’s feature set and flexibility leaves room for future expansion.
Balancing new features with the ease of being able to implement them straight out of the box without any needs for replatforming gives them the peace of mind that the project can be enhanced if and when needed.
Seeing that DatoCMS added the media collections feature recently was great. The client had requested it initially, and now they can organize files easily. The new cache tags feature also works really well with Next.js’s revalidate tag, making the caching process smooth and manageable.
dreipol has the option to easily add new functionalities as SFG Basel’s needs evolve, such as additional 3D components or interactive content. By managing ongoing updates with migrations, dreipol can efficiently introduce new features while maintaining content integrity, ensuring that their implementation stays scalable in the future.