Superhuman
ban biên tập giờ vàng
Superhuman nằm ở giao điểm giữa nhiếp ảnh biên tập và giao diện người dùng phần mềm—một nền màu ấm áp, giống như giấy da (không bao giờ là màu trắng tinh) làm nổi bật các yếu tố thương hiệu màu đỏ sẫm và điểm nhấn màu tím rực rỡ. Tiêu đề, được đặt bằng phông chữ 460, nhẹ nhàng thay vì ồn ào, cho phép những bức ảnh điện ảnh toàn trang đảm nhiệm phần chính, trong khi các thẻ giao diện sản phẩm trong suốt như thủy tinh nổi lên trên hình ảnh. Bảng màu nhìn chung vẫn trầm và mang tính biên tập: bề mặt màu kem, văn bản màu than chì, đường viền màu xám ấm tinh tế và khoảng cách rộng rãi giữa các yếu tố, với màu sắc được dành riêng cho những điểm nhấn thương hiệu có chủ đích—một lời kêu gọi hành động màu đỏ sẫm duy nhất, các liên kết màu tím, một nút bổ sung màu tím nhạt. Hệ thống cố tình tránh các bóng đổ mạnh và hiệu ứng chuyển màu trên bề mặt giao diện người dùng; chiều sâu được tạo ra thông qua các lớp ảnh và hiệu ứng làm mờ nền tinh tế trong tiêu đề, chứ không phải thông qua hiệu ứng xếp chồng.
Yếu tố chính là một bức ảnh toàn chiều rộng với tiêu đề được căn giữa (48-64px/460) và một lời kêu gọi hành động duy nhất được lấp đầy bằng hình ảnh chai rượu vang, với các thẻ giao diện sản phẩm mờ nổi được phủ lên trên các cạnh trái và phải. Bên dưới yếu tố chính là một dải logo màu trắng (6 ô mỗi hàng, chiều rộng tối đa bị giới hạn), sau đó là một phần tab với các bề mặt thẻ màu trắng trên nền giấy da. Một dải màu xanh ngọc đậm phá vỡ nhịp điệu ở khoảng hai phần ba trang – toàn chiều rộng, hai cột (hình ảnh bên trái, văn bản bên phải) – tạo ra sự tương phản tông màu duy nhất khi bạn cuộn. Tiếp theo là một dải màu chuyển sắc tạo hiệu ứng không gian. Khoảng cách dọc giữa các phần là 64-96px. Chiều rộng nội dung tối đa là ~1200px được căn giữa, với yếu tố chính và dải màu tối trải rộng toàn bộ chiều rộng của khung nhìn. Thanh điều hướng là một tiêu đề cố định duy nhất với nền mờ; không có thanh bên, không có menu lớn. Chân trang là một trang màu đỏ tía toàn chiều rộng với bố cục nhiều cột của các liên kết. Nhịp điệu tổng thể là: khung chính → nội dung màu trắng/kem nhẹ nhàng → dải màu tối với hình ảnh chính → hiệu ứng chuyển màu ấn tượng → chân trang màu đỏ tía, xen kẽ các dải màu sáng và tối để tạo nhịp điệu biên tập.
Yếu tố hình ảnh chính là nhiếp ảnh điện ảnh: một bức chân dung toàn màn hình với nền trời rộng mở đóng vai trò là điểm nhấn, cùng với một dải màu khí quyển thứ hai được đặt thấp hơn ở phía dưới trang. Hình ảnh có tông màu ấm áp, được làm dịu nhẹ và chụp nghiêng, gợi nhớ đến "giờ vàng", tạo cảm giác mang tính biên tập hơn là doanh nghiệp. Một dải màu tối với các hình chữ nhật hình học trong suốt và các dòng chữ viết tay được chồng lên bức ảnh một người đàn ông đang trầm tư – một sự kết hợp của các bề mặt chứ không phải là một hình ảnh duy nhất. Giao diện người dùng được trình bày dưới dạng các thẻ kính nổi được chồng trực tiếp lên bức ảnh, thay vì các ảnh chụp màn hình riêng biệt. Không có hình minh họa có sẵn, không có hình ảnh 3D và không có hình thức trang trí trừu tượng, ngoại trừ dải màu khí quyển chuyển sắc. Các biểu tượng là các biểu tượng đường nét đơn sắc tối giản, rộng khoảng 16-20px, với một chiều rộng duy nhất tương ứng với độ đậm của văn bản 460 điểm.
Bảng màu
Thương hiệu
- Midnight Wine
#421d24— Các nút hành động chính, banner quảng cáo và chân trang có màu đỏ tía ấm áp, gần như đen, trông giống mực hơn là màu đỏ, tạo điểm nhấn cho bảng màu mà không gây cảm giác quá áp đảo. - Royal Violet
#714cb6— Màu tím được dùng để làm nổi bật các liên kết, thẻ và cụm từ ngắn. Không nên sử dụng màu tím làm màu chủ đạo cho các lời kêu gọi hành động.
Trung lập
- Lilac Mist
#d4c7ff— Các chi tiết như lớp phủ bề mặt phụ, biểu tượng ánh sáng và nền nút mờ đều có màu tím trầm, gợi lên phong cách thương hiệu mà không gây sự chú ý quá mức. - Deep Lagoon
#0c4243— Phần nền tối của dải truyện tranh, được sử dụng như yếu tố kể chuyện chính, là bề mặt tối duy nhất trong toàn bộ hệ thống, kết hợp với một họa tiết hình học được phủ lên trên. - Warm Parchment
#f2f0eb— Bề mặt làm việc của trang là yếu tố chủ đạo; màu kem ấm áp thay thế màu trắng làm nền, mang lại cho toàn bộ hệ thống một vẻ ấm áp đậm chất biên tập. - Soft Mist
#e3e3e2— Các đường viền tinh tế, đường bao thẻ, đường phân chia—một màu xám nhạt ấm áp hòa quyện với giấy da nhưng vẫn làm nổi bật rõ ràng các cạnh. - Ink Charcoal
#292827— Văn bản chính, tiêu đề, đường viền biểu tượng - một màu ấm, gần như đen với đủ sắc nâu để tạo cảm giác như mực trên giấy, không bao giờ lạnh lẽo #000 - Stone Gray
#666666— Văn bản phụ, văn bản hỗ trợ, mô tả kín đáo - một màu xám trung bình duy nhất, được sử dụng tiết kiệm để không bao giờ cạnh tranh với văn bản chính.
Kiểu chữ
Từ 12 đến 64px · 8 bước
- Super Sans VF — thay thế: Inter (closest open equivalent for variable weight range) · phác thảo 460, 500, 540, 600, 700 · Chỉ một phông chữ duy nhất trong toàn bộ hệ thống. Các biến trục trải dài từ 460 (phông chữ đặc trưng, được cắt bớt một chút cho tất cả các tiêu đề lớn) đến 540 (văn bản chính được nhấn mạnh) và 700 (chú thích nhỏ, in đậm). Một VF được thiết kế đặc biệt làm cho các tiêu đề có độ dày 460 trông có chủ đích hơn là ngẫu nhiên—ở kích thước 48-64px với khoảng cách chữ hẹp, hiệu ứng "được cắt bớt một chút" được cảm nhận là tự tin hơn là mỏng manh.
Khoảng cách và hình thức
| Mục đích | Nghĩa |
|---|---|
| Tỉ trọng | dày đặc |
| Bước cơ bản | 8px |
| Bán kính nút | 16px |
| Bán kính thẻ | 16px |
| Bóng tối | không - viền thay vì bóng |
| Giữa các phần | 64-96px |
| Chiều rộng trang | 1200px |
AI sẽ xây dựng trang web của bạn theo phong cách Superhuman 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ự
- AI for Business — Phòng trưng bày theo phong cách kiến trúc thô mộc với tông màu xám ấm áp.
- Jeton — Bài xã luận về công nghệ tài chính trên Warm Marble
- Airtable — Một buổi hội thảo ấm cúng với các chương được đánh dấu bằng các màu khác nhau.
- Osmo — Bảo tàng của các nhà phát triển trên nền bê tông xám
- Linktr — Các áp phích biên tập được xếp chồng lên nhau như kẹo. Trang web được thiết kế theo khối màu, với tiêu đề màu xanh lá cây tươi sáng nổi bật trên nền xanh coban, và các yếu tố điều hướng hình viên thuốc màu trắng nổi trên nền màu đỏ tía.
- Outsource Consultants — Bản vẽ kiến trúc khổ lớn trên giấy xương. Một phong cách đơn sắc, trong đó một mảng màu chàm tươi sáng duy nhất phá vỡ bố cục lưới ấm áp, đậm chất typography.
- Streamtime — Bảng ý tưởng sáng tạo xúc giác - Bàn làm album ảnh của nhà thiết kế
- Switch-Lit — Bảng kẻ biên tập được in bằng mực trên giấy màu kem.
- HubSpot — Giấy màu kem ấm áp với điểm nhấn màu cam duy nhất. HubSpot trông giống như một tạp chí thiết kế được in trên giấy dày – tiêu đề chữ có chân, trang giấy màu kem ấm áp và một điểm nhấn màu cam rực rỡ làm nổi bật những điểm quan trọng nhất.
- Granola — Những ghi chép thực địa trên giấy da ấm áp—Granola giống như một cuốn sổ Moleskine đã cũ được mở ra trên bàn làm việc ngập nắng: tiêu đề có chân chữ tạo cảm giác chắc chắn, điểm nhấn màu xanh lá cây tự nhiên như mực làm từ thực vật, và những đường kẻ mảnh ở lề các tấm thẻ giống như những ghi chú viết tay.
- Secure — Một cuộc trò chuyện trong quán cà phê châu Âu dưới ánh sáng dịu nhẹ là một trải nghiệm ấm áp và đầy phong cách khi gọi video, nơi những tiêu đề được viết bằng phông chữ serif trông giống như một bài báo sâu sắc trên tạp chí hơn là một trang giới thiệu sản phẩm công nghệ.
- Mockups made easy — Studio thiết kế biên tập trên giấy trắng.