Bpco
Một bản tuyên ngôn về kiểu chữ được làm từ một tấm bê tông. Một bộ tài liệu báo chí đen trắng, trong đó phông chữ Helvetica ngoại cỡ mô phỏng một bức ảnh, và kết cấu duy nhất là một tờ giấy nhàu nát nằm bên dưới kiểu chữ chính.
Bigpicture sử dụng hệ thống chỉnh sửa đơn sắc, xử lý trang web như một bộ tài liệu báo chí được in trên giấy thô. Giao diện hoàn toàn không có màu sắc, chỉ dựa vào mực đen, khoảng trắng, các đường kẻ mảnh và kết cấu đồng nhất của giấy nhàu để tạo nên không khí. Kiểu chữ là sản phẩm: tiêu đề đạt kích thước 274px với phông chữ Helvetica Neue 700 và khoảng cách chữ âm mạnh, khiến văn bản trở thành khối hình ảnh chủ đạo trên mọi màn hình. Chú thích đơn cách ([01-N GIỚI THIỆU], SÁNG TẠO/CƠ QUAN) đóng vai trò như chữ ký theo phong cách in ấn, và các biểu tượng bốn cánh sáng bóng là vật trang trí duy nhất giữa các phần. Bố cục rộng rãi và gợi nhớ đến việc tự xuất bản – khoảng cách 72px giữa các phần, lề ngang 144-250px và các khối hình ảnh toàn chiều rộng với góc 288px cho phép trang web có không gian thoáng đãng như một bức tường trưng bày tranh ảnh hơn là một phần mềm.
Chiều rộng tối đa khoảng 1440px, căn giữa với khoảng đệm ngang từ 40–144px tùy thuộc vào mật độ nội dung của từng phần. Hình ảnh chính là hình ảnh toàn chiều rộng với văn bản phủ lên trên. Bên dưới hình ảnh, nội dung xen kẽ giữa các khối văn bản căn giữa và kiểu chữ trải rộng toàn màn hình. 60% phần dưới cùng của trang là một bản tuyên ngôn dài, có thể cuộn, với kiểu chữ lớn lấp đầy toàn bộ chiều rộng khung nhìn theo từng dòng, được phân tách bởi các hàng đường viền bóng. Thanh điều hướng là một thanh nổi được căn giữa ở đầu khung nhìn, thay vì một bảng điều khiển toàn chiều rộng. Chân trang là một dải đơn với đường viền mỏng.
Hình ảnh chiếm ưu thế trên màn hình chính—những hình ảnh kiến trúc và quảng cáo ngoài trời khổ lớn (biển quảng cáo, mặt tiền tòa nhà, quảng cáo đường phố) được trình bày toàn màn hình với các góc bo tròn. Một lớp phủ họa tiết giấy nhàu nát được phủ lên phần dưới của trang, tạo cảm giác xúc giác và mang lại cho giao diện vẻ ngoài của một tạp chí in. Một biểu tượng quả địa cầu nhỏ, được vẽ bằng các đường nét, là yếu tố minh họa duy nhất. Không có hiệu ứng 3D, không có hiệu ứng chuyển màu trừu tượng, không có hình ảnh mô phỏng sản phẩm—các hình ảnh mang tính chất tài liệu, công nghiệp và dựa trên danh mục quảng cáo ngoài trời của công ty.
Bảng màu
Trung lập
- Press Ink
#121212— Văn bản chính, các đường kẻ mảnh, đường viền phần, đường viền biểu tượng và văn bản chân trang đều sử dụng một tông màu tối duy nhất, chiếm đến 95% tổng lượng thông tin hiển thị. - Paper White
#ffffff— Trang in, bề mặt bìa cứng, nền thanh điều hướng, bề mặt có khung tiêu đề. - Newsprint
#f1f1f1— Lớp phủ bề mặt tinh tế, đường viền mềm mại, các đường phân cách mỏng, sắc thái ẩn sau kết cấu của giấy nhàu nát. - Foil Gray
#e1e1e1— Khung viền sáng, điểm nhấn dưới dạng đường viền biểu tượng, các đường phân cách bổ sung. - Mute Gray
#c5c5c5— Văn bản phụ, tình trạng khuyết tật, đường nét bề mặt có độ tương phản thấp
Kiểu chữ
Từ 13 đến 274px · 6 bước
- Helvetica Neue — thay thế: Inter · phác thảo 400, 500, 700 · Một công cụ đa năng - văn bản chính có kích thước 17px/1.29, tiêu đề hiển thị có kích thước 75–274px với khoảng cách chữ -0.04em ở kích thước lớn nhất, nhãn điều hướng có kích thước 15px.
- PPSupplyMono — thay thế: JetBrains Mono · phác thảo 400 · Các thẻ meta và nhãn trong ngoặc đơn như [01-N GIỚI THIỆU], cũng như các thẻ phần (QUẢNG CÁO, SÁNG TẠO/CÔNG TY, TIẾP THỊ NGOẠI TUYẾN) là những điểm nhấn kiểu chữ duy nhất phá vỡ sự đơn điệu của phông chữ Helvetica.
- PPSupplySans — thay thế: Inter · phác thảo 400 · Thanh điều hướng phụ và văn bản nhỏ ở chân trang khi cần sử dụng phông chữ sans-serif khác.
Khoảng cách và hình thức
| Mục đích | Nghĩa |
|---|---|
| Tỉ trọng | trung bình |
| Bước cơ bản | 50px |
| Bán kính nút | 8px |
| Bán kính thẻ | 20px |
| Bóng tối | không - viền thay vì bóng |
| Giữa các phần | 72px |
| Chiều rộng trang | 1440px |
AI sẽ xây dựng trang web của bạn theo phong cách Bpco 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ự
- Steep — Phân tích phông chữ Serif trên giấy ấm
- Newformcap — Tờ báo xã luận trong phòng thay đồ
- Claude — Một hiện vật được in trên giấy da ấm áp—mực trên giấy xương, đất sét là điểm nhấn màu sắc duy nhất.
- 11x– Digital workers — Một khung cảnh biên tập điện ảnh hoang tàn—những bức ảnh toàn cảnh phong cảnh được đặt cạnh những tiêu đề in chữ in hoa hoành tráng, trông giống như trang bìa của một tạp chí sang trọng.
- Revolut — Một tác phẩm biên tập đơn sắc dựa trên bức ảnh chụp những đám mây—mực trắng, cúc áo kiểu hộp thuốc, một vệt màu xanh duy nhất trong một thế giới toàn màu xám.
- Scheduling — Mực in biên tập trên giấy màu kem
- Titan — kho lưu trữ đơn sắc tông ấm
- Programa — Một xưởng thiết kế Thụy Sĩ vào giữa trưa. Bức tường trưng bày màu trắng được chiếu sáng bởi một chiếc đèn bàn màu vàng duy nhất—mọi thứ đều mang sắc thái xám cho đến khi một nút bấm, biểu tượng hoặc điểm nhấn nào đó thu hút sự chú ý, và rồi điểm nhấn màu vàng duy nhất đó định hình toàn bộ căn phòng.
- Sana Agents — Ánh nhũ xanh lá cây trên nền trắng trong bài viết biên tập
- Visual — Ấn phẩm samizdat ấm áp. Giấy màu kem, áp phích chữ có chân, ghi chú bên lề đen trắng, một bút dạ vàng.
- Midday — Tờ rơi biên tập trên giấy da - Tiêu đề chân chữ 72px trên nền màu đá ấm, nội dung chính không chân chữ có khoảng cách, các nút điều khiển hình viên thuốc, không có bóng
- Chat for impact — Một phòng khám màu xanh lá cây rừng với các phòng được sơn màu pastel.