Zurück
Dimitri Wittwer

Gridonic Prototyping

The development of a website is a complex process that goes far beyond mere design. At Gridonic, we attach particular importance to ensuring that every new website is not only aesthetically pleasing, but also structurally well thought-out and user-centered. A crucial step in our projects is therefore the creation of a browser-based prototype that makes the structure and functionality of the new website tangible.

#UX/UI Design#UX / UI Ideation

The Prototype with the Gridonic Boilerplate

Prototypes are often created in specific applications such as Figma, Miro, or Axure. Real interactions – if possible at all – require significant effort to configure. Instead, we build the prototype of your new website directly with the software we will use for your actual website – DatoCMS. With the Gridonic Boilerplate, we lay the foundation for your new website. It includes the following aspects:

  • Structure Visualization: The prototype maps out the entire site structure and shows how different content elements are interconnected.

  • Interactive Feedback: Instead of abstract diagrams or wireframes, our clients receive an interactive model with the Gridonic Boilerplate that can be tested directly in the browser.

  • Content Logic: The Gridonic Boilerplate allows us to define content logic early on, ensuring that content management is as efficient and error-free as possible.

  • Efficiency: Information architecture and user flows can be tested early in the process, helping to identify and resolve potential weaknesses or navigation issues.

  • Collaboration: The prototype facilitates collaboration between clients, designers, and developers.

  • Content Creation: Thanks to the evolutionary prototype, we know early in the relaunch process which content needs to be created and can plan its production in advance.

  • Learning Curve: Your new website starts as a Gridonic Boilerplate and evolves step by step throughout the project, allowing you to familiarize yourself with the system from the very beginning.

The Process

1. Discussion of Information Architecture

In the first step, we conduct workshops with the client to define the core structure of the new website, focusing on personas and user flows. What main pages should exist? What content should go on which page?

2. Setting Up the Client’s Boilerplate

Next, we set up the boilerplate for the client based on the latest version. It becomes accessible in the browser at kunde.gridonic.io, where we organize information into structured pages, subpages, and content blocks. At this stage, we use placeholder text, standard images, and simplified content, focusing on structure rather than details. Different architectures are tested to find the most effective one.

3. Connecting the Pages

Now we start mapping user flows by linking the different pages. Multiple variations can be explored to ensure an intuitive on-page navigation, making it easy for visitors to find the content they need.

4. Configuring the Menu

Once the information architecture is established and pages are properly linked, we design the menu. Which pages should appear in the menu? How many hierarchy levels should be included? The boilerplate allows different menu configurations, which we refine with our UX specialists to optimize the experience for both large and small screens.

5. Testing, Testing, Testing

Now it’s time for project team members, employees, and clients to navigate through the prototype and thoroughly test it. Can users easily find what they’re looking for? We gather feedback and refine the prototype accordingly.

👉 Check out the Boilerplate: https://boilerplate.gridonic.io/

Benefits for the Client

Creating a browser-based prototype is not just a technical step but a strategic tool to ensure project success. Clients benefit from:

  • No surprises: There’s no need to wait until the final phase to see how the new website will turn out. Clients get a clear vision of their website early in the process.

  • Transparency: With an evolutionary prototype, the client remains closely involved in the development process and can track progress on a daily or weekly basis.

  • Better decision-making: An interactive model enables more informed decisions and allows stakeholders to be involved early on.

  • Time and cost savings: Issues are identified and resolved early, preventing costly fixes in later stages.

Conclusion

The Gridonic Boilerplate is a powerful tool that enables us to create prototypes quickly and efficiently—both functionally and visually. This approach makes the entire relaunch process more agile and delivers a final product that excites our clients from day one.