Pace Züri Web Design by Sophie Kondratenko: Where Swiss Grid Meets Running Telemetry Modern athletic communities need digital interfaces that deliver top-tier accuracy while keeping the energy high. For Pace Züri, a running club based in Zurich, designer Sophie Kondratenko created an electric web layout that brings the rhythm of street running straight into a polished interactive space. By blending classic Swiss graphic design with modern sports culture, this layout turns urban running from a solo habit into a design-driven team experience.
Modular Grid Structure and Running Telemetry in Web Design The visual structure is built on a 6-column modular grid crafted for 1920px desktop screens with generous 80px side margins. Anchoring the whole look is a geometric monogram inspired by stadium design and running tracks: a continuous ribbon running along an 8px grid, complete with delicate guidelines and sharp orange nodes. Sophie Kondratenko pairs this visual identity with a super clean typographic hierarchy. The clean sans-serif Inter handles the body copy and navigation bar—scaling all the way up to 384px for big hero titles—while condensed Bebas Neue brings a sleek, technical vibe to stats and tracking cards.
The color palette captures high-voltage movement through four high-contrast shades: charcoal black (#000000), crisp white (#FFFFFF), neutral gray (#9A9898), and an athletic orange (#FE4602) inspired by track surfaces. Interactive route cards for loops like Lake loop, City loop, and Züri hills layer vector path lines showing exact distance, average pace, and runtime right over real-world photos. Meanwhile, a bold center typography banner slashes the phrase “RUN THE CITY” with a white vector street map, turning navigation into an absolute head-turner.
On mobile devices, the interface stays nimble using smooth horizontal swipe cards. This keeps pacer community details—covering everything from chill recovery runs to fast tempo workouts—alongside weekly schedules and FAQs, totally clean and easy to navigate on any screen.
Check out the complete project on www.behance.net/gallery/255043323/Pace-Zueri-Running-Club-Web-design-UIUX-Landing.
Thiết kế web Pace Züri của Sophie Kondratenko: Sự kết hợp giữa hệ lưới Swiss grid và dữ liệu chạy bộ
Các cộng đồng thể thao hiện đại luôn cần những giao diện số vừa đảm bảo tính chính xác về mặt thông tin, vừa giữ được tinh thần vận động mạnh mẽ. Đối với Pace Züri – một câu lạc bộ chạy bộ tại Zurich, designer Sophie Kondratenko đã tạo ra một thiết kế web đầy năng lượng, đưa nhịp điệu của những bước chạy đường phố vào một bố cục tương tác chỉn chu. Bằng việc kết hợp giữa phong cách thiết kế Thụy Sĩ (Swiss graphic design) và văn hóa thể thao hiện đại, giao diện này đã biến hoạt động chạy bộ đô thị từ một thói quen cá nhân thành một trải nghiệm tập thể có định hướng thiết kế rõ ràng.
Cấu trúc lưới modular và chỉ số thể thao trong thiết kế web
Khung hình trực quan được xây dựng trên hệ lưới modular 6 cột dành cho màn hình desktop 1920px với phần lề hai bên rộng 80px. Điểm tựa cấu trúc của thiết kế là biểu tượng monogram dạng hình học lấy cảm hứng từ kiến trúc sân vận động và đường chạy bộ: một đường ruy-băng liên tục trải dài trên hệ lưới 8px, đi kèm các đường gióng mảnh và các điểm nút màu cam sắc nét. Sophie Kondratenko kết hợp phần nhận diện này với một hệ thống phân cấp chữ mạch lạc. Font chữ sans-serif Inter đảm nhận phần nội dung và thanh điều hướng, đồng thời có thể phóng to lên kích thước 384px cho các tiêu đề lớn, cân bằng lại với font Bebas Neue dạng cô đọng (condensed) dành cho các thông số kỹ thuật và thẻ theo dõi.
Bảng màu được lựa chọn để thể hiện nguồn năng lượng vận động thông qua 4 tông màu tương phản cao: đen charcoal (#000000), trắng tinh (#FFFFFF), xám trung tính (#9A9898) và màu cam thể thao (#FE4602) lấy cảm hứng từ bề mặt đường chạy nhân tạo. Các thẻ tuyến đường tương tác cho các cung đường như Lake loop, City loop và Züri hills lồng ghép đường dẫn vector thể hiện chính xác khoảng cách, tốc độ trung bình (pace) và thời gian chạy ngay trên các bức ảnh chụp thực tế. Một banner typographic ở trung tâm cắt cụm từ “RUN THE CITY” trực tiếp bằng một đường vector bản đồ đường phố màu trắng, biến việc điều hướng không gian thành một điểm nhấn thị giác.
Giao diện linh hoạt trên các thiết bị di động với dạng thẻ vuốt ngang, giúp sắp xếp thông tin về các pacer trong cộng đồng – từ các buổi chạy thả lỏng đến các buổi chạy tempo tốc độ – cùng lịch trình hàng tuần và phần giải đáp thắc mắc (FAQ), giữ được sự rõ ràng và tiện dụng trên mọi màn hình.
Xem trọn bộ dự án của www.behance.net/gallery/255043323/Pace-Zueri-Running-Club-Web-design-UIUX-Landing trên Behance.
