LUNCH
แท่นกำมะหยี่บนกระดาษปาร์ชเมนต์อุ่นๆ
แนวคิดของ LUNCH CONCEPT ดูเหมือนนิตยสารแฟชั่นที่พิมพ์ออกมาแล้วนำมาปรับใช้บนเว็บ: องค์ประกอบหลักเป็นภาพถ่ายขนาดเต็มหน้าจอสีเข้ม โดยมีโลโก้แบรนด์เป็นตัวอักษร 3 มิติขนาดใหญ่พร้อมเน้นด้วยโครเมียม ตามด้วยแกลเลอรีสินค้าที่ดูสงบเหมือนแคตตาล็อกบนพื้นหลังสีครีมโทนอบอุ่น หน้าเว็บสลับไปมาระหว่างการเผชิญหน้าแบบภาพยนตร์และความสงบนิ่ง—องค์ประกอบหลักดูดุดัน ส่วนอื่นๆ ดูนุ่มนวล สีม่วงอ่อนๆ เพียงสีเดียวปรากฏเฉพาะในบรรทัดโฆษณา ในสถานะ "สินค้าหมด" และในส่วนท้ายของหน้าเว็บ ทำหน้าที่เป็นคำกล่าวของแบรนด์มากกว่าการตะโกน ฟอนต์ sans-serif อันเป็นเอกลักษณ์ (Good Sans) ถูกใช้เป็นหลักในขนาดที่พอเหมาะ และโลโก้หลักเป็นเพียงส่วนเดียวที่โดดเด่นทางด้านการพิมพ์ การโต้ตอบเกิดขึ้นผ่านลิงก์ข้อความเท่านั้น: ไม่มีปุ่มที่เติมสี ไม่มีไล่ระดับสี ไม่มีโครเมียมตกแต่ง ยกเว้นโลโก้ 3 มิติขององค์ประกอบหลัก
ความกว้างสูงสุดประมาณ 1280 พิกเซล สำหรับส่วนเนื้อหาที่อยู่ตรงกลาง; ชื่อหน้าจะครอบคลุมความกว้างของหน้าทั้งหมดจากขอบถึงขอบ จังหวะของหน้า: ชื่อหน้าสีเข้มครอบคลุมความกว้างของหน้าทั้งหมด (ความสูงของวิวพอร์ต) → ข้อความแนะนำที่อยู่ตรงกลางบนพื้นหลังสีเข้ม → ตารางสินค้า 4-5 คอลัมน์บนพื้นหลังเดียวกัน → แถบส่วนท้ายสีม่วงอ่อน การนำทางจะอยู่เป็นแถบข้อความบางๆ เหนือชื่อหน้า (ข้อความสีอ่อนบนพื้นหลังสีเข้ม) และเหนือข้อความแนะนำ (ข้อความสีเข้มบนพื้นหลังสีอ่อน) ตารางสินค้ามีเลย์เอาต์ที่หนาแน่นพร้อมการจัดเรียงภายใน โดยไม่มีการเยื้องระหว่างรูปภาพหรือการแยกภาพ ข้อความแนะนำเป็นคอลัมน์แคบๆ ที่อยู่ตรงกลาง (~600-700 พิกเซล) โดยมีพื้นที่ว่างแนวตั้งกว้างขวาง (60-80 พิกเซล) ด้านบนและด้านล่าง ความหนาแน่นโดยรวม: กว้างขวางในส่วนบทความ บีบอัดในตารางสินค้า
ภาพถ่ายแฟชั่นเชิงบรรณาธิการเป็นองค์ประกอบหลักของการออกแบบ: ภาพหลักเป็นภาพนางแบบที่มีโทนสีเข้มและคอนทราสต์สูง (แสงไฟในสตูดิโอที่ดูหม่นหมอง สไตล์การแต่งตัวแบบล้ำสมัย—เสื้อรัดรูปหนังสีแดง ลายตารางหมากรุก ท่าโพสที่โดดเด่น) ในขณะที่ภาพในตารางเป็นภาพสินค้า/ลุคบุ๊กที่คมชัดบนพื้นหลังเรียบๆ ที่เป็นกลาง (นางแบบและสินค้าถูกถ่ายบนพื้นหลังสีเทาอ่อน/ขาว โดยไม่มีบริบทของไลฟ์สไตล์) ภาพมีขอบคมชัด รัศมีเป็นศูนย์ และจัดเรียงอย่างแน่นหนากับภาพที่อยู่ติดกันในตาราง ภาพหลักครอบคลุมขอบทั้งสี่ด้านของพื้นที่แสดงผล และโลโก้โครเมียม 3 มิติซ้อนทับอยู่บนภาพ ภาพสินค้าในตารางรักษาอัตราส่วนความสูงต่อความกว้างที่สม่ำเสมอทั่วทั้งแถว ไม่มีภาพประกอบหรือไอคอนใดๆ นอกจากการนำทางด้วยข้อความเพียงเล็กน้อย ภาษาภาพคือ: ถ่ายภาพให้ดี ตัดภาพให้คมชัด และให้ภาพถ่ายเป็นหน้าตาของแบรนด์
จานสี
ยี่ห้อ
- Lilac Veil
#b8aad0— ใช้สีม่วงเป็นสีพื้นหลังสำหรับเน้นรายละเอียด สร้างลายเส้นตกแต่ง และเป็นสีเน้นอ่อนๆ ด้านหลังเนื้อหา
เป็นกลาง
- Ink Black
#000000— ข้อความหลักทั้งหมด ข้อความนำทาง ขอบลิงก์ ขอบการ์ด และขอบไอคอน ล้วนเป็นโครงสร้างหลักของส่วนติดต่อผู้ใช้ทั้งหมด - Warm Parchment
#f4f1e4— พื้นหลังของหน้าเว็บและส่วนต่างๆ ในพื้นที่บทความ/ผลิตภัณฑ์ เป็นพื้นหลังที่ดูสงบ โดยมีภาพถ่ายผลิตภัณฑ์เป็นฉากหลัง - Ivory Mist
#fcfaf1— สีของข้อความนำทางที่อยู่ด้านบนขององค์ประกอบหลักสีเข้ม โทนสีพื้นผิวที่ละเอียดอ่อน และเส้นขอบที่ดูเรียบง่าย ช่วยสร้างบรรยากาศที่อบอุ่นกว่าสีขาวล้วนสำหรับส่วนติดต่อผู้ใช้ในแถบสีเข้ม
การจัดพิมพ์
จาก 12 เป็น 72 พิกเซล · 5 ขั้นตอน
- Good Sans — ทดแทน: Söhne · โครงร่าง 400, 700 · แบบอักษรที่ใช้ได้กับทุกการใช้งาน ไม่ว่าจะเป็นการนำทาง เนื้อหาหลัก ข้อมูลผลิตภัณฑ์ ลิงก์ และข้อความ UI ทั้งหมด ระบบความหนาตัวอักษรสองระดับ (ปกติ 400 สำหรับเนื้อหาหลัก/หัวข้อ ตัวหนา 700 สำหรับชื่อแบรนด์ ราคา และไฮไลต์) สร้างลำดับชั้นโดยไม่ต้องเพิ่มขนาดตัวอักษร ระยะห่างระหว่างตัวอักษรที่น้อยมากทำให้ดูเป็นแบบบรรณาธิการมากกว่าแบบเรขาคณิต
- Redaction — ทดแทน: GT Sectra Display Bold · โครงร่าง 700 · สำหรับข้อความหลักเท่านั้น—นี่คือแบบอักษรที่กำหนดเองสำหรับข้อความขนาดใหญ่ "LUNCH" ซึ่งใช้เป็นพื้นฐานสำหรับข้อความหลักแบบเต็มหน้าจอ แบบอักษรนี้จะถูกใช้เพียงครั้งเดียวต่อหน้า เป็นเอกลักษณ์ทางด้านการพิมพ์ ไม่ใช่ส่วนประกอบที่สามารถนำกลับมาใช้ซ้ำได้
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | หนาแน่น |
| ขั้นตอนพื้นฐาน | 20-30px |
| รัศมีปุ่ม | 0px |
| รัศมีการ์ด | 0px |
| เงา | ไม่ - ใช้เส้นขอบแทนเงา |
| ระหว่างส่วนต่างๆ | 60-80px |
| ความกว้างของหน้า | 1280px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ LUNCH และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- MindMarket — หนังสือนิทานแสนอบอุ่นบนกระดาษสีครีม – พื้นที่บรรณาธิการที่เป็นมิตรซึ่งพาดหัวข่าวขนาดใหญ่ของ Inter และตัวการ์ตูนกระดาษที่ตัดออกมาอยู่ร่วมกันบนพื้นผิวที่นุ่มนวลราวกับสติ๊กเกอร์ที่อาบแสงแดด
- Lamborghini — รถสีดำในโชว์รูม ใต้แสงไฟสปอตไลท์ มีรถสีเหลืองคันหนึ่งจอดอยู่
- amp — สีส้มโทนอบอุ่นตัดกับพื้นหลังสีขาวโทนเย็น การออกแบบนี้ชวนให้นึกถึงผลิตภัณฑ์ออกกำลังกายระดับพรีเมียมที่ถ่ายภาพในห้องใต้หลังคาที่แสงแดดส่องถึง: หนึ่งชิ้น หนึ่งองค์ประกอบ และแบบอักษรที่ดูมั่นใจเพียงแบบเดียวที่สื่อความหมายได้ครบถ้วน
- IKEA — โชว์รูมเฟอร์นิเจอร์สวีเดนที่อาบแสงแดดในรูปแบบที่แยกชิ้นส่วน
- Microsoft — แคตตาล็อกสินค้าปลีกใช้สีน้ำเงินเป็นเอกลักษณ์ ลองนึกภาพโลโก้รูปสี่เหลี่ยมบนพื้นโชว์รูมสีขาว ที่องค์ประกอบการออกแบบทุกอย่างเป็นสีน้ำเงิน
- Vibrants — ร้านขายยา Skyborne บนพื้นหินอ่อนสีขาว - หมึกสีน้ำเงินเข้มคือปูน และสเปกตรัมสีรุ้งคือตัวยา
- Isla Beauty — โทนสีครีมสไตล์ร้านขายยาโบราณ ผสานสีแดงสดใสราวกับสีแดงทางการแพทย์ ลองนึกภาพผนังกระดาษปาร์ชเมนต์สีอบอุ่น ขวดสีอำพัน และตราประทับสีแดงเพียงดวงเดียวบนฉลากทุกชิ้น
- Swap — แกลเลอรี่ภาพบรรณาธิการของ Mint: โทนสีเขียวอ่อนในห้องที่มีการตกแต่งด้วยสีเขียวมะนาวสดใสและตัวอักษรแบบมีเชิงที่ดูเรียบง่าย
- Cursor — ห้องทำงานเขียนบนกระดาษหนังที่อบอุ่น สว่างไสวด้วยแสงจากถ่านที่กำลังคุอยู่
- Structured — หอศิลป์ยุคเรเนซองส์บนกระดาษคล้ายดินน้ำมัน
- Apple (España) — ห้องแสดงงานศิลปะของพิพิธภัณฑ์ ภายใต้แสงแดดอ่อนๆ เป็นพื้นที่สีขาวโล่งกว้างที่ดึงดูดใจและไร้น้ำหนัก โดยแต่ละชิ้นงานจัดแสดงจะถูกส่องสว่างด้วยไฟสปอตไลท์ที่ส่องไปยังผนังสีอ่อนๆ
- Amplemarket — สถานที่ทำงานที่อาบไปด้วยแสงแดดและโปรยปรายด้วยกระดาษสีสันสดใส