FRANKY'S
Một quầy chơi game kiểu cổ điển trên quầy của một cửa hàng ván trượt.
Ngôn ngữ hình ảnh của Franky là sự kết hợp giữa phong cách game thùng cổ điển và cửa hàng ván trượt: một nền màu kem ấm áp (#f3e5df) được đóng khung bởi các đường viền pixel cứng cáp, họa tiết bàn cờ đen trắng phổ biến và một phông chữ pixel duy nhất, Arcade, được sử dụng cho mọi từ trên trang web. Bảng màu được cố ý tối giản—chỉ còn lại hai màu sắc chủ đạo (màu cam tín hiệu #faa21f cho biển hiệu và màu xanh lá cây đậm #128e44 cho nút mua hàng), với toàn bộ thứ bậc được thể hiện bằng cách tăng độ đậm của phông chữ Arcade từ 400 lên 700 và sử dụng màu đen trên nền kem. Các bề mặt vẫn phẳng và nguyên khối; chiều sâu chỉ đạt được thông qua đường kẻ màu kem 1px được chèn trên các nút và sự tương phản về sắc độ của họa tiết bàn cờ. Các thành phần gợi nhớ đến các hình ảnh cửa hàng thập niên 1990: đường viền đen dày, bán kính đường viền hẹp 6-12px, khoảng đệm nhỏ gọn 4-8px và các nút chuyển đổi 3D/AR trông giống như các biểu tượng pixel hơn là các yếu tố mạ crôm. Các trang mới được thiết kế để duy trì bầu không khí giống như trò chơi điện tử: không có hiệu ứng chuyển màu nào khác ngoài dòng chữ cuộn màu cam, không có bóng mờ, không có kiểu chữ trang trí—chỉ có giấy màu kem, các đường kẻ pixel màu đen và một màu cam ấm áp duy nhất.
Trên máy tính để bàn, trang sản phẩm hiển thị bố cục toàn chiều rộng, căn giữa với chiều rộng tối đa 1200px. Nhịp điệu từ trên xuống dưới là: văn bản cuộn màu cam → tiêu đề màu kem với đường kẻ đen → chia thành hai cột (55% bàn cờ trên trang chủ / 45% lưới hai cột của các thẻ sản phẩm) → dải màu kem ở chân trang. Trên thiết bị di động, trang chủ thu nhỏ thành bàn cờ toàn chiều rộng, và lưới trở thành bố cục một cột. Các thẻ được phân bố đều trong lưới hai cột với các đường phân cách màu xám Pixel (#e5e7eb) giữa chúng. Khoảng cách giữa các phần là tối thiểu (43–61px), và giao diện không bao giờ sử dụng các dải màu tối trải dài toàn bộ chiều rộng của trang — nền màu kem được hiển thị liền mạch.
Ảnh chụp những chiếc mũ lưỡi trai trên nền kem sạch sẽ, được căn giữa và cắt xén sát mép, với một bóng mờ màu đen than mềm mại bên dưới. Không có hình ảnh đời sống, không có người mẫu, không có bối cảnh—chiếc mũ là nhân vật chính. Họa tiết bàn cờ phía sau yếu tố chính đóng vai trò là bề mặt đồ họa. Không có hình minh họa, không có hình ảnh 3D ngoại trừ nút chuyển đổi thực tế tăng cường, không có biểu tượng trang trí ngoại trừ hình chữ thập pixel trong logo.
Bảng màu
Thương hiệu
- Marquee Orange
#faa21f— Thanh thông báo ở đầu màn hình, các yếu tố nhấn mạnh, nhận diện thương hiệu. - Buy Green
#128e44— Nút "THÊM VÀO GIỎ HÀNG" đã được tô màu - đây là thao tác mua hàng duy nhất được đánh dấu màu xanh lá cây.
Trung lập
- Arcade Cream
#f3e5df— Hình nền trang, bề mặt thẻ sản phẩm, các nút chèn. - Ink Black
#000000— Văn bản chính, bố cục bàn cờ, tất cả các đường viền giao diện người dùng, đường viền thẻ, đường viền biểu tượng. - Pixel Gray
#e5e7eb— Viền mỏng, vách ngăn thẻ, các quy tắc cấu trúc giữa các ô lưới. - Charcoal
#333333— Màu sắc bề mặt thứ cấp, các ô vuông bóng đổ kiểu bàn cờ, màu bóng - Carbon
#151515— Những gam màu trung tính đậm đà thích hợp để tô điểm cho tranh minh họa và những ô vuông caro dày đặc nhất. - Muted Gray
#737373— Văn bản bị vô hiệu hóa/tắt tiếng trên các nút và trong nội dung văn bản
Kiểu chữ
Từ 10 đến 18px · 4 bước
- Arcade — thay thế: VT323 · phác thảo 400, 700 · Toàn bộ giao diện chỉ sử dụng một phông chữ duy nhất—tất cả tiêu đề, nhãn, giá cả, nút bấm, văn bản chính và biểu tượng đều dùng phông Arcade. Việc chuyển đổi từ phông 400 sang 700 là công cụ duy nhất để tạo sự phân cấp; sử dụng phông chữ thứ hai sẽ phá vỡ ảo giác về một ki-ốt.
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 | 4-8px |
| Bán kính nút | 6px |
| Bán kính thẻ | 12px |
| Bóng tối | không - viền thay vì bóng |
| Giữa các phần | 43-61px |
| Chiều rộng trang | 1200px |
AI sẽ xây dựng trang web của bạn theo phong cách FRANKY'S 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ự
- 099 SUPPLY — Một bức tường trưng bày đầy những vật thể đen trắng.
- teenage engineering — Danh mục sản phẩm công nghiệp về đèn chiếu sáng studio - sản phẩm là đối tượng duy nhất nổi bật trên trang, và mọi thứ khác đều được thảo luận xung quanh nó.
- Custo — Một phòng trưng bày màu xám kim loại với phông chữ nguyên khối. Một không gian trưng bày tông màu xám xanh trầm, nơi một vật thể tối màu duy nhất và phông chữ 57px tự nói lên tất cả.
- Walden — Sự tĩnh lặng của nền rừng - mỗi sản phẩm là một viên đá, mỗi pixel là rêu và sự im lặng.
- Fiverr — Điểm nhấn của khu chợ kỹ thuật số là một luồng sáng xanh rực rỡ trên nền sân khấu tối màu. Một chấm xanh neon duy nhất đóng vai trò là điểm neo cho logo; phần còn lại là đơn sắc, được thiết kế để làm nổi bật sức hấp dẫn của các dịch vụ được cung cấp.
- Peloton — Một ngọn hải đăng đỏ rực trên nền đen tuyền. Một phòng trưng bày thiết bị thể dục nơi một biển báo CTA màu đỏ tươi duy nhất xuyên suốt không gian triển lãm rộng lớn, tối tăm và dẫn đến các phòng trưng bày sản phẩm sạch sẽ, màu trắng.
- HOUSEPLANT — một hiệu sách với các loại hạt trên giấy lanh
- Adam Lippes — Một studio biên tập đơn sắc trên giấy màu kem – một trang tạp chí Vogue mà điểm nhấn duy nhất là bố cục lưới, chứ không phải bảng màu.
- Elektron — Bảng điều khiển thiết bị vào lúc nửa đêm gần như là một bức tranh đen kịt, nơi những bức ảnh sản phẩm tỏa sáng trong khi giao diện gần như vô hình.
- Sigmaphoto — Phòng trưng bày Monochrome Gallery of Precision Instruments là một căn phòng trắng yên tĩnh, nơi màu sắc duy nhất quan trọng là màu sắc thôi thúc bạn hành động.
- Channel Studio — Một phòng lab ảnh studio với một chụp đèn màu san hô.
- Specht Studio — Một bức tường trưng bày đầy những điều kỳ thú một cách tinh tế. Lớp mạ crôm do chính studio tạo ra có bề mặt màu trắng với chữ màu đen; sự rực rỡ về mặt thị giác hoàn toàn tập trung vào phần ốp lát của dự án.