Web Design and No-Code Development for Quantum Education
Jannes De Wilde
Webdesign and No-Code Development for Quantum Education.
Introduction
Quantum Education is the collective name for various Quantum Hubs under Quantum Delta NL. Each of the six hubs focuses on a different target group, yet they aim to present a unified online presence. The primary audience includes students under 18 (primary and secondary education) and their teachers.
Challenge
Each hub operates independently, targeting different audiences and conducting diverse activities. This independence led to a lack of cohesion and clarity, making it challenging for users to navigate and understand the offerings.
How do we create a central digital space where teachers and students can learn about quantum?
Solution: Creating Clarity
To address the fragmentation, the website showcases the differences between the hubs as strengths rather than weaknesses. By highlighting each hub's specialization, the site presents a professional and organized overview.
Different locations of the Hubs
Design Approach
Wireframes
A sticky map changes location upon scrolling, providing an interactive way to explore each hub.
First wireframe version of the different locations.
Final version
Color Palette
Each hub is assigned a distinct color, aiding in visual differentiation and enhancing user experience.
Functionality
Beyond showcasing the hubs, the website includes:
Blog: Integrated with Webflow's CMS, allowing easy publication of articles and events.
Search Function: Enables users to find relevant information quickly.
Landing Pages: Dedicated pages for special events, such as the quantum feature in NVOX published on April 11.
Blog Features
Multi-reference CMS with authors, tags, locations, and special editions.
Fully styled rich-text elements.
Sticky sidebar with recommendations and a dynamic table of contents.
Enhancements/ Micro-animations
Button Hover Effects: Interactive animations on buttons.
Sticky Map: Persistent map navigation as users scroll.
Dynamic Table of Contents: Automatically generated for each blog post.
Ongoing Development
This project is still in progress, with additional content and features planned for future updates.
Live Site:
Like this project
Posted May 21, 2025
Developed a cohesive website for Quantum Education's hubs using Webflow.
Likes
1
Views
6
Timeline
Sep 2, 2024 - May 21, 2025
Clients
Leiden University
