Telegram, WhatsApp+380637610482
Valery Danyuk
Valery Danyuknhà phát triểnPhát triển các công cụ trí tuệ nhân tạo cho doanh nghiệp. Chất lượng cao. Giá cả phải chăng.Nhắn tin qua Telegram
Zellerfeld — bản xem trước của một trang web theo phong cách này

Zellerfeld

Xưởng điêu khắc trên đá cẩm thạch trắng—những bề mặt nguyên khối của bệ đỡ, một tia sáng coban duy nhất, những chữ cái viết thường thì thầm từ sàn đến trần nhà.

Zellerfeld mang đến cảm giác như một phòng trưng bày các tác phẩm điêu khắc kỹ thuật số trên đá cẩm thạch trắng – một thị trường dành cho giày in 3D, nơi các bề mặt đơn sắc, khoảng trắng rộng rãi và kiểu chữ thường lớn cho phép mỗi sản phẩm hoạt động như một hiện vật trưng bày trong bảo tàng. Giao diện cực kỳ tối giản: một nền không màu với một màu xanh coban điện duy nhất (#000aff) dành riêng cho những khoảnh khắc quan trọng – các biểu tượng, thanh điều hướng "Mua sắm" đang hoạt động và trạng thái slide hiện tại. Các thẻ nổi trên nền xám ngọc trai ấm áp, thay vì màu trắng tinh khiết, tạo cho lưới bố cục cảm giác như được đúc bằng thạch cao. Kiểu chữ vẫn là một kiểu sans-serif tùy chỉnh duy nhất (Roobert) với khoảng cách chữ hẹp, và Space Mono chỉ được sử dụng cho giá cả, danh sách sản phẩm và siêu dữ liệu kỹ thuật. Kết quả là, trang sản phẩm mang cảm giác giống một trang web báo chí thiết kế hơn là một trang thanh toán bán lẻ – các sản phẩm được chụp ảnh, chứ không phải được bán.

Trang này trải rộng toàn bộ chiều ngang và có dải nội dung rộng 1440px. Yếu tố chính là banner ảnh toàn màn hình với lớp phủ giao diện người dùng nổi. Các phần sản phẩm sử dụng lưới 4 cột, thu gọn thành 2 cột trên máy tính bảng và 1 cột trên thiết bị di động. Trình tự các phần là: mô tả sản phẩm lớn → lưới đánh giá biên tập → lưới sản phẩm mới ra mắt → bảng thông tin liên hệ báo chí. Mỗi phần sản phẩm căn giữa nội dung trong dải nội dung và sử dụng khoảng cách dọc 80px giữa các phần. Thanh điều hướng là thanh trên cùng cố định nằm trên một hàng duy nhất với một dải quảng cáo mỏng phía trên. Thẻ sản phẩm được căn chỉnh theo một lưới nghiêm ngặt — khu vực hình ảnh luôn được căn giữa vào hình bóng giày với khoảng đệm trên/dưới 40px bên trong thẻ, và cụm siêu dữ liệu được neo vào góc dưới bên trái với logo thương hiệu 40x40.

Ảnh sản phẩm là yếu tố hình ảnh chủ đạo—mỗi đôi giày được chụp trên bề mặt trắng tinh hoặc thạch cao ở góc ba phần tư, lấp đầy toàn bộ tấm ảnh mà không có bối cảnh, người mẫu hay môi trường xung quanh. Yếu tố chính là một bức ảnh đời sống thực thụ: những bức ảnh cận cảnh bàn chân và giày trên cát hoặc bê tông, luôn ở tỷ lệ người thật, không bao giờ đạt chất lượng studio hoàn hảo. Nguyên tắc "chủ thể là yếu tố chính" được áp dụng—giày chiếm 40% diện tích hiển thị của khung hình, ngay cả trong yếu tố biên tập chính. Không sử dụng bất kỳ yếu tố đồ họa trang trí, họa tiết trừu tượng hoặc hình minh họa nào. Các biểu tượng là dạng đường thẳng, được viền đen, không bao giờ được tô đầy, không bao giờ được tô màu.

Bảng màu

Thương hiệu

  • Electric Cobalt #000aff — Các biểu tượng mới, thanh điều hướng hoạt động, chỉ báo slide hiện tại, khoảnh khắc kích hoạt — tín hiệu màu sắc duy nhất trong hệ thống, được sử dụng một cách tiết kiệm để được cảm nhận như một sự kích hoạt hơn là trang trí.

Trung lập

  • Pale Iris #e5e7ff — Màu sắc mới cho huy hiệu, hiệu ứng làm nổi bật nhẹ nhàng và bề mặt có màu sắc cho các tùy chọn ghi nhãn—một sắc xanh coban dịu nhẹ, gợi ý màu sắc mà không phá vỡ bảng màu đơn sắc.
  • Ink Black #111111 — Màu sắc chủ đạo cho tiêu đề, danh sách và liên kết bao gồm: màu nền cho văn bản chính, đường viền mặc định, đường viền biểu tượng, đường phân cách mỏng.
  • Pure White #ffffff — Nên sử dụng các trạng thái biểu mẫu trung lập, văn bản biểu tượng và phản hồi giao diện người dùng tinh tế khi màu sắc được giữ ở mức nhẹ nhàng. Tránh sử dụng nó làm màu chủ đạo cho các lời kêu gọi hành động.
  • Plaster #ecedee — Bề mặt phụ cho thẻ sản phẩm, nền thanh điều hướng, lớp nâng cao mịn màng phía trên khung vẽ.
  • Slate #a1a4aa — Màu nền khung thẻ, màu nền nút trung tính và màu nền viền nút dịu nhẹ đều là các sắc xám giúp làm nổi bật các cạnh của thẻ mà không làm tối chúng.
  • Fog #d7d7d7 — Khung thẻ sáng màu, đường phân chia, tô màu bề mặt không hoạt động.

Kiểu chữ

Từ 13 đến 128px · 7 bước

  • Roobert — thay thế: Inter · phác thảo 400, 500, 600, 700 · Phông chữ thương hiệu chính được sử dụng cho mọi thứ, từ nội dung chính đến tiêu đề. Khoảng cách dòng nhất quán trên tất cả các kích cỡ, cho phép các chữ cái viết thường trong logo có một khối lượng dày đặc, mang tính điêu khắc. Độ đậm của phông chữ tăng lên tùy thuộc vào ngữ cảnh: 400 cho nội dung chính và giao diện người dùng, 500 cho các tiêu đề nổi bật, 600 cho tên sản phẩm và 700 cho các tiêu đề lớn.
  • Space Mono — thay thế: JetBrains Mono · phác thảo 400, 600 · Siêu dữ liệu kỹ thuật—giá cả (€189.00), giá trị số cho 10 vị trí hàng đầu, mã chứng khoán và tên cửa hàng—được thêm vào khi trang này cần được hiểu là thông số kỹ thuật chứ không phải là văn bản quảng cáo.
  • Arial — thay thế: Inter · phác thảo 400 · Arial - Được tìm thấy trong dữ liệu đã trích xuất nhưng không được AI mô tả.

Khoảng cách và hình thức

Mục đíchNghĩa
Tỉ trọngtrung bình
Bước cơ bản16px
Bán kính nút10px
Bán kính thẻ10px
Bóng tốitối thiểu
Giữa các phần80px
Chiều rộng trang1440px

AI sẽ xây dựng trang web của bạn theo phong cách Zellerfeld và điền đầy đủ thông tin vào đó.

  • Đăng tải sản phẩm và bài viết qua các liên kết sau: Instagram, TikTok, Facebook.
  • Chuyển nội dung từ trang web cũ của bạn—chỉ cần chỉ định địa chỉ.
  • Thiết kế hiện đại trên nền tảng tốt nhất: React ( Next.js) với khả năng render phía máy chủ và tối ưu hóa SEO ngay từ đầu.
  • Tối ưu hóa SEO hoàn toàn tự động cho kết quả tìm kiếm và đề xuất dựa trên mạng thần kinh.

Phong cách tương tự

  • Airbnb — Một bức tường trưng bày màu trắng tĩnh lặng với một chiếc bookmark màu đỏ san hô duy nhất.
  • Apple (España) — tủ trưng bày màu trắng
  • Silencio — Một căn phòng trắng với những hiện vật lơ lửng. Một không gian trưng bày được làm từ giấy màu ấm, nơi mỗi yếu tố chiếm vị trí riêng của nó trên nền âm bản, và sự tĩnh lặng là một quyết định thiết kế có chủ ý.
  • Oakâme — Một xưởng làm việc ở vùng Provence ngập tràn ánh nắng, được chạm khắc từ những phiến đá ấm áp.
  • Nike — Một phòng trưng bày đơn sắc về những thành tích thể thao – những bức tường trắng, sản phẩm như một tác phẩm nghệ thuật, lớp mạ crôm hòa quyện vào nền.
  • Arc — phòng trưng bày màu trắng công nghiệp trên mặt nước lúc nửa đêm
  • Rivian — Một khối kiến trúc điện khổng lồ trên bức tường bê tông của phòng trưng bày. Rivian trình bày mỗi chiếc xe như một tác phẩm điêu khắc trên nền không gian trắng rộng lớn, với kiểu chữ lớn đến mức trở thành một yếu tố kiến trúc, và một màu vàng ấm áp duy nhất phá vỡ bầu không khí đơn sắc, giống như ánh nắng mặt trời trên một bề mặt mờ.
  • Analogue — Tủ trưng bày màu đen – hàng hóa lơ lửng trong không trung.
  • ddna — tủ trưng bày bảo tàng ấm áp trên vải lanh chưa qua xử lý
  • UY Studio — Hành lang đá của tu viện là một không gian yên tĩnh với những bức tường bê tông, nơi những lọ nước hoa được đặt trên bệ trắng, chiếu sáng bởi một đèn 400 watt và bốn bóng đèn màu xám ấm áp.
  • Basic.Space — phòng trưng bày trên đá cẩm thạch trắng.
  • COS — một phòng trưng bày hợp thời trang với những bức tường trắng.