FRANKY'S
ตู้เกมย้อนยุคตั้งอยู่บนเคาน์เตอร์ร้านขายอุปกรณ์สเก็ตบอร์ด
ภาษาภาพของ Franky เป็นการผสมผสานระหว่างเกมอาร์เคดย้อนยุคและร้านขายสเก็ตบอร์ด: พื้นหลังสีครีมโทนอบอุ่น (#f3e5df) ล้อมรอบด้วยเส้นขอบพิกเซลที่คมชัด ลวดลายตารางหมากรุกขาวดำที่พบเห็นได้ทั่วไป และฟอนต์พิกเซลเดียวชื่อ Arcade ที่ใช้กับทุกคำบนเว็บไซต์ โทนสีนั้นเรียบง่ายอย่างจงใจ—มีเพียงสองสีหลักเท่านั้น (สีส้มสดใส #faa21f สำหรับป้าย และสีเขียวเข้ม #128e44 สำหรับปุ่มซื้อ) โดยลำดับความสำคัญทั้งหมดแสดงออกผ่านการเพิ่มน้ำหนักของฟอนต์ Arcade จาก 400 เป็น 700 และการใช้สีดำตัดกับพื้นหลังสีครีม พื้นผิวดูเรียบและเป็นเนื้อเดียวกัน ความลึกเกิดขึ้นจากเส้นสีครีมขนาด 1 พิกเซลที่แทรกอยู่บนปุ่ม และการเล่นโทนสีของตารางหมากรุกเท่านั้น องค์ประกอบต่างๆ ชวนให้นึกถึงภาพกราฟิกหน้าร้านในยุค 1990: เส้นขอบสีดำหนา รัศมีขอบแคบๆ 6-12 พิกเซล ระยะห่างภายในกะทัดรัด 4-8 พิกเซล และปุ่มสลับ 3D/AR ที่ดูเหมือนไอคอนพิกเซลมากกว่าองค์ประกอบโครเมียม หน้าเว็บใหม่นี้ตั้งใจที่จะคงบรรยากาศแบบเกมอาร์เคดเอาไว้: ไม่มีสีไล่ระดับนอกจากข้อความเลื่อนสีส้ม ไม่มีเงาอ่อนๆ ไม่มีตัวอักษรตกแต่ง—มีเพียงกระดาษสีครีม เส้นพิกเซลสีดำ และสีส้มโทนอบอุ่นเพียงสีเดียว
บนเดสก์ท็อป หน้าสินค้าจะแสดงผลแบบเต็มความกว้าง จัดวางอยู่ตรงกลาง โดยมีความกว้างสูงสุด 1200 พิกเซล ลำดับการแสดงผลจากบนลงล่างคือ: ข้อความเลื่อนสีส้ม → ส่วนหัวสีครีมที่มีเส้นสีดำ → แบ่งเป็นสองคอลัมน์ (55% เป็นลายตารางหมากรุกบนหน้าแรก / 45% เป็นตารางสองคอลัมน์แสดงสินค้า) → แถบสีครีมในส่วนท้าย บนมือถือ หน้าแรกจะยุบลงเป็นลายตารางหมากรุกแบบเต็มความกว้าง และตารางจะกลายเป็นแบบคอลัมน์เดียว สินค้าจะถูกจัดเรียงอย่างสม่ำเสมอในตารางสองคอลัมน์ โดยมีเส้นแบ่งสีเทา (#e5e7eb) คั่นอยู่ระหว่างกัน ระยะห่างระหว่างส่วนต่างๆ มีน้อยมาก (43–61 พิกเซล) และอินเทอร์เฟซจะไม่ใช้แถบสีเข้มที่พาดผ่านความกว้างทั้งหมดของหน้าเว็บ—พื้นหลังสีครีมจะแสดงผลอย่างต่อเนื่องโดยไม่มีการขัดจังหวะ
ภาพถ่ายหมวกแก๊ปหลายใบวางอยู่บนพื้นหลังสีครีมสะอาดตา จัดวางอยู่ตรงกลางและตัดขอบอย่างกระชับ โดยมีเงาสีดำคล้ำจางๆ อยู่ด้านล่าง ไม่มีไลฟ์สไตล์ ไม่มีนางแบบ ไม่มีบริบทใดๆ หมวกแก๊ปคือจุดเด่น ลวดลายตารางหมากรุกด้านหลังองค์ประกอบหลักทำหน้าที่เป็นพื้นผิวภาพกราฟิก ไม่มีภาพประกอบ ไม่มีภาพเรนเดอร์ 3 มิติ ยกเว้นปุ่มสลับใช้งานเทคโนโลยีความเป็นจริงเสริม ไม่มีไอคอนตกแต่งใดๆ ยกเว้นกากบาทแบบพิกเซลในโลโก้
จานสี
ยี่ห้อ
- Marquee Orange
#faa21f— แถบแจ้งเตือนที่ด้านบนของหน้าจอ องค์ประกอบตกแต่ง การสร้างแบรนด์ - Buy Green
#128e44— ปุ่ม "เพิ่มลงในตะกร้า" ถูกกรอกข้อมูลไว้แล้ว ซึ่งเป็นการดำเนินการซื้อเพียงอย่างเดียวที่ถูกทำเครื่องหมายด้วยสีเขียว
เป็นกลาง
- Arcade Cream
#f3e5df— พื้นหลังของหน้ากระดาษ พื้นผิวของการ์ดผลิตภัณฑ์ แผ่นแทรกปุ่มกด - Ink Black
#000000— ข้อความหลัก, รูปแบบตารางหมากรุก, ขอบ UI ทั้งหมด, เส้นขอบการ์ด, ขอบไอคอน - Pixel Gray
#e5e7eb— ขอบบางๆ ตัวแบ่งการ์ด กฎโครงสร้างระหว่างช่องตาราง - Charcoal
#333333— โทนสีพื้นผิวรอง, เงาสี่เหลี่ยมลายตารางหมากรุก, สีเงา - Carbon
#151515— โทนสีกลางที่ดูหรูหรา เหมาะสำหรับใช้เติมสีสันในภาพประกอบและลวดลายตารางหมากรุกที่หนาแน่นที่สุด - Muted Gray
#737373— ข้อความที่ถูกปิดใช้งาน/ปิดเสียงบนปุ่มและในข้อความหลัก
การจัดพิมพ์
จาก 10 เป็น 18 พิกเซล · 4 ขั้นตอน
- Arcade — ทดแทน: VT323 · โครงร่าง 400, 700 · อินเทอร์เฟซทั้งหมดใช้ฟอนต์เดียว ไม่ว่าจะเป็นหัวข้อ ป้ายกำกับ ราคา ปุ่ม ข้อความ และไอคอน การเปลี่ยนจากขนาด 400 ไปเป็น 700 เป็นเพียงเครื่องมือเดียวที่ใช้สร้างลำดับชั้น การใช้ฟอนต์ที่สองจะทำลายภาพลวงตาของตู้แสดงสินค้า
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | หนาแน่น |
| ขั้นตอนพื้นฐาน | 4-8px |
| รัศมีปุ่ม | 6px |
| รัศมีการ์ด | 12px |
| เงา | ไม่ - ใช้เส้นขอบแทนเงา |
| ระหว่างส่วนต่างๆ | 43-61px |
| ความกว้างของหน้า | 1200px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ FRANKY'S และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- 099 SUPPLY — ผนังแกลเลอรี่ที่เต็มไปด้วยวัตถุสีดำและสีขาว
- teenage engineering — แคตตาล็อกสินค้าอุตสาหกรรมด้านไฟสตูดิโอ - ตัวผลิตภัณฑ์เป็นสิ่งเดียวที่มีความสำคัญบนหน้าเว็บ ส่วนสิ่งอื่นๆ นั้นถูกกล่าวถึงโดยรอบ
- Custo — แกลเลอรี่สีเทาเข้มพร้อมตัวอักษรแบบโมโนลิธ โชว์รูมโทนสีเทาอมเขียวที่ดูเรียบง่าย ซึ่งมีเพียงวัตถุสีเข้มชิ้นเดียวและตัวอักษรขนาด 57 พิกเซลที่สื่อความหมายได้ด้วยตัวเอง
- Walden — ความเงียบสงัดของพื้นป่า - ทุกสิ่งเป็นดั่งหิน ทุกพิกเซลคือมอสและความเงียบงัน
- Fiverr — จุดเด่นของตลาดดิจิทัลแห่งนี้คือแสงสีเขียวสดใสที่ตัดกับฉากหลังสีเข้ม จุดสีเขียวนีออนเพียงจุดเดียวทำหน้าที่เป็นจุดยึดสำหรับโลโก้ ส่วนที่เหลือเป็นสีขาวดำ ออกแบบมาเพื่อเน้นความน่าสนใจของบริการที่นำเสนอ
- Peloton — สัญญาณไฟสีแดงบนรันเวย์สีดำสนิท โชว์รูมฟิตเนสที่มีป้าย CTA สีแดงสดใสเพียงป้ายเดียวตัดผ่านพื้นที่จัดแสดงขนาดใหญ่และมืดมิด นำไปสู่ห้องผลิตภัณฑ์สีขาวสะอาดตา
- HOUSEPLANT — ร้านหนังสือที่มีถั่ววางอยู่บนกระดาษลินิน
- Adam Lippes — ภาพถ่ายขาวดำในสตูดิโอถ่ายภาพบนกระดาษสีครีม – ภาพจากนิตยสาร Vogue ที่มีเพียงตารางจัดวางเป็นองค์ประกอบตกแต่ง ไม่ใช่โทนสี
- Elektron — แผงควบคุมอุปกรณ์ในเวลาเที่ยงคืนนั้นแทบจะเป็นผืนผ้าใบสีดำสนิท ทำให้ภาพถ่ายผลิตภัณฑ์ดูโดดเด่น ในขณะที่ส่วนติดต่อผู้ใช้แทบจะมองไม่เห็น
- Sigmaphoto — ห้องแสดงเครื่องมือวัดความแม่นยำแบบขาวดำ เป็นห้องสีขาวเงียบสงบ ที่ซึ่งสีเดียวที่มีความสำคัญคือสีที่กระตุ้นให้คุณลงมือทำ
- Channel Studio — ห้องแล็บถ่ายภาพสตูดิโอที่มีโคมไฟสีปะการังหนึ่งดวง
- Specht Studio — ผนังแกลเลอรี่ที่เต็มไปด้วยความน่าสนใจอย่างแนบเนียน พื้นผิวโครเมียมของสตูดิโอเป็นสีขาวและตัวอักษรสีดำ ความสวยงามตระการตาถูกเน้นไปที่งานกระเบื้องของโครงการทั้งหมด