
Glossier
การถ่ายภาพท่ามกลางแสงแดด - กระดาษสีขาว หมึกสีดำ และจุดเด่นสีเหลืองสดใสหนึ่งจุด
Glossier ทำงานเหมือนนิตยสารความงามดิจิทัล: พื้นหลังเกือบจะเป็นสีขาวดำ ตัดด้วยสีเหลืองสดใสเพียงสีเดียว ซึ่งทำหน้าที่เป็นทั้งโลโก้ของแบรนด์และปุ่มกระตุ้นการซื้อ ระบบนี้มีความเรียบง่ายในเชิงบรรณาธิการ—พาดหัวข่าวขนาดใหญ่จาก Apercu พื้นที่ข้อความกว้างขวาง ภาพถ่ายไลฟ์สไตล์เต็มหน้าที่ถ่ายทอดอารมณ์ความรู้สึกเป็นหลัก—และใช้งานได้จริง: การ์ดผลิตภัณฑ์แบบเรียบ ขอบบาง และไม่มีการตกแต่งใดๆ สีเหลืองไม่ใช่สีรองของแบรนด์ แต่เป็นสีหลักของแบรนด์ ใช้ในปริมาณที่พอเหมาะ เพื่อให้ทุกครั้งที่ปรากฏรู้สึกเหมือนแสงแฟลชจากกล้อง ทุกอย่างอื่นถูกออกแบบมาให้จางหายไปในพื้นหลัง: สีกลางเป็นสีเทาอบอุ่นที่มีโทนสีชมพูอ่อนๆ ขอบบาง และตัวอักษรหนาแน่นและกระชับ ผลลัพธ์ที่ได้คือหน้าร้านที่ดูมั่นใจ เรียบง่าย และทันสมัยอย่างไม่ลดละ
หน้าเว็บนี้ประกอบด้วยส่วนต่างๆ ที่จัดเรียงในแนวตั้งแบบเต็มหน้าจอ โดยแต่ละส่วนออกแบบมาให้เป็นหน้าคู่ที่สมบูรณ์ในตัวเอง ส่วนหลักเป็นภาพถ่ายเต็มความกว้างพร้อมพื้นหลังสีขาวลอยตัว (ด้านบนซ้าย) และโลโก้สีเหลืองขนาดใหญ่ที่กินพื้นที่ด้านล่างทั้งหมดของหน้า ด้านล่างส่วนหลัก ส่วนต่างๆ จะสลับกันระหว่างภาพเต็มหน้าจอและตารางการ์ดแต่ละรายการ การแบ่งหมวดหมู่ (ผลิตภัณฑ์ดูแลผิว/เครื่องสำอาง) ออกเป็นสองคอลัมน์โดยมีอัตราส่วนภาพเท่ากัน (50/50) เกิดขึ้นโดยไม่มีเส้นขอบที่มองเห็นได้ มีเพียงเส้นที่เชื่อมภาพเท่านั้นที่แยกภาพออกจากกัน แคตตาล็อกผลิตภัณฑ์ใช้ตารางการ์ดสี่เหลี่ยมสี่คอลัมน์บนพื้นที่ทำงาน #f7f7f7 การนำทางเป็นแถบด้านบนแบบเรียบง่ายพร้อมแถบโฆษณาเสริมอยู่ด้านบน ช่องว่างระหว่างส่วนต่างๆ ค่อนข้างกว้าง (64 พิกเซล) แต่การเปลี่ยนระหว่างส่วนต่างๆ นั้นราบรื่น โดยไม่มีตัวแบ่งหรือสีพื้นหลังที่สลับกัน ยกเว้นส่วนท้ายที่อบอุ่น จังหวะโดยรวมคือ: ภาพถ่าย ข้อความ ภาพถ่าย ตาราง ภาพถ่าย – เหมือนกับการพลิกดูนิตยสารแฟชั่น
การถ่ายภาพเป็นภาษาภาพที่โดดเด่น พื้นที่แสดงผลทั้งหมดเต็มไปด้วยภาพไลฟ์สไตล์และภาพบุคคล—แสงสีทองอบอุ่นยามเย็น ภาพโคลสอัพผิวที่นุ่มนวล มือที่ถือขวดผลิตภัณฑ์โดยมีฉากหลังเป็นแสงแดดจ้า โทนสีในภาพถ่ายอบอุ่นและไม่ฉูดฉาด: ท้องฟ้าสีพีช โทนสีผิวสีดินเผา สีน้ำเงินเข้มของมหาสมุทร ภาพจะครอบคลุมพื้นที่หน้ากระดาษทั้งหมดโดยไม่มีมุมโค้งมน กรอบ หรือภาพซ้อนทับ ยกเว้นการ์ดข้อความสีขาวหรือโลโก้สีเหลือง ภาพผลิตภัณฑ์บนการ์ดแคตตาล็อกถ่ายโดยใช้พื้นหลังสีขาวบริสุทธิ์ไร้รอยต่อและแสงที่สม่ำเสมอ อัตราส่วนภาพต่อข้อความอยู่ที่ประมาณ 70/30—ภาพสื่อถึงอารมณ์ ข้อความสื่อถึงฟังก์ชัน ไม่มีภาพประกอบ ไม่มีกราฟิกนามธรรม ไม่มีภาพเรนเดอร์ 3 มิติ
จานสี
ยี่ห้อ
- Glossier Yellow
#fff116— สีเหลืองใช้เป็นสีเสริมสำหรับรายละเอียดตกแต่งและเพื่อเน้นคำค้นหาที่ใช้ไม่บ่อยนัก ไม่ควรใช้เป็นสีหลักสำหรับข้อความกระตุ้นการกระทำ
เป็นกลาง
- Ink
#000000— เนื้อหาหลัก, ลิงก์นำทาง, ข้อความหลัก, ข้อความส่วนท้าย, โครงร่างไอคอน, เส้นขอบบางๆ; สีเด่นสำหรับการจัดวางตัวอักษรและโครงสร้าง - Paper
#ffffff— พื้นผิวการ์ดผลิตภัณฑ์ พื้นที่เติมเต็ม แผงนูน ระดับพื้นผิวที่สว่างที่สุดในกอง - Fog
#f7f7f7— พื้นที่แสดงผลของหน้าเว็บ พื้นหลังของแต่ละส่วน การเปลี่ยนภาพระหว่างรูปภาพบนหน้าเว็บ พื้นผิวหลักที่รองรับเว็บไซต์ทั้งหมด - Blush
#faf2f4— พื้นหลังส่วนท้ายกระดาษ เส้นแบ่งส่วนสีโทนอบอุ่นนุ่มนวล สีขาวอมชมพูอ่อนๆ ช่วยเพิ่มความอบอุ่นให้กับส่วนล่างของหน้ากระดาษ - Mist
#f0f0f0— พื้นผิวรองรับสีอ่อนสำหรับสร้างพื้นหลังที่ไม่โดดเด่นและแบ่งส่วนต่างๆ ไม่ควรใช้เป็นสีหลักสำหรับข้อความกระตุ้นการกระทำ - Ash
#e8e8e8— เส้นขอบช่องป้อนข้อมูล พื้นหลังไอคอน เส้นแบ่งบางๆ สีเส้นขอบโครงสร้างสำหรับบัตรและองค์ประกอบแบบฟอร์ม
การจัดพิมพ์
จาก 12 เป็น 32 พิกเซล · 5 ขั้นตอน
- Apercu — ทดแทน: Inter · โครงร่าง 400, 500, 700 · แบบอักษรหลักถูกใช้ทั่วทั้งส่วนติดต่อผู้ใช้—ข้อความหลักขนาด 16px/400, การนำทางและคำบรรยายขนาด 12–14px/500, หัวข้อย่อยขนาด 20px/500 และหัวข้อข่าวขนาด 32px/700 การออกแบบเชิงเรขาคณิตและมนุษยนิยมของ Apercu ทำให้แบรนด์มีสไตล์ที่กระชับและทันสมัย ระยะห่างระหว่างตัวอักษรที่เกือบเป็นศูนย์ (0.002–0.003em) ทำให้แบบอักษรดูแน่นและเหมือนนิตยสารมากกว่าที่จะดูโปร่งหรือเป็นมิตร แบบอักษรขนาด 700 สงวนไว้สำหรับองค์ประกอบแสดงผลในบทความ ไม่ใช่สำหรับองค์ประกอบ UI
- Apercu Mono — ทดแทน: JetBrains Mono or IBM Plex Mono · โครงร่าง 400 · รูปแบบตัวอักษรขนาดเล็กที่ใช้งานได้จริงสำหรับข้อมูลเมตาของคำสั่งซื้อ หมายเลขติดตาม และป้ายกำกับข้างรหัส โดยแบบตัวอักษรคงที่สร้างพื้นผิวทางเทคนิคที่ตัดกับตัวอักษรหลักที่มีสัดส่วนสม่ำเสมอ
- GTStandard-M — ทดแทน: Inter · โครงร่าง 400 · GTStandard-M - พบในข้อมูลที่ดึงมาได้ แต่ไม่ได้ถูกอธิบายโดย AI
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | เฉลี่ย |
| ขั้นตอนพื้นฐาน | 8px |
| รัศมีปุ่ม | 0px |
| รัศมีการ์ด | 0px |
| เงา | ไม่ - ใช้เส้นขอบแทนเงา |
| ระหว่างส่วนต่างๆ | 64px |
| ความกว้างของหน้า | 1440px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Glossier และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- Lightship — ภาพจำลองเส้นทางบนท้องถนนที่งดงามราวกับภาพยนตร์ ผนังแกลเลอรี่สีครีมอบอุ่นประดับด้วยภาพถ่ายทิวทัศน์ขนาดใหญ่ที่ติดตั้งในระยะห่างพอประมาณ ตัวอักษรสีดำบางๆ แทบมองไม่เห็นบนกรอบภาพ และมีสีส้มสดใสเพียงสีเดียวที่ตัดกับสีขาวดำราวกับกองไฟในทุ่งหญ้า
- Faire ES — แคตตาล็อกขายส่งครีมบำรุงผิวอุ่น
- Adanola — ภาพแฟชั่นบนกระดาษสีขาว การถ่ายภาพแฟชั่นที่เน้นการจัดวางตัวอักษรและภาพถ่ายบนพื้นผิวสีขาวสะอาดตา โดยใช้หมึกสีดำสำหรับตัวอักษร และแบบอักษร sans-serif อันเป็นเอกลักษณ์ (Favorit) ที่สะท้อนถึงสไตล์โดยรวมของแบรนด์
- Oura Ring — ห้องทำข้าวโอ๊ตแสนอบอุ่นที่อาบไปด้วยแสงแดดอ่อนๆ
- Stykka — เวิร์คช็อปสไตล์สแกนดิเนเวียภายใต้แสงสีขาว – โชว์รูมเงียบสงบที่จัดแสดงงานฝีมือ โดยมีเพียงเสียงของภาพถ่ายเท่านั้นที่ดังก้องอยู่
- DJI — ผืนผ้าใบสีดำด้านอวกาศพร้อมไฮไลท์สีฟ้าสดใสเพียงจุดเดียว
- Altitude Beverages — หน้านิตยสารขาวดำ ลองนึกภาพหน้านิตยสารแฟชั่นที่ปราศจากสีสันใดๆ ยกเว้นภาพนิ่ง ข้อความและพื้นที่ว่างสีขาวบอกเล่าเรื่องราวทั้งหมด
- AATHER — ฝ่ามือที่เปิดออก เปลวไฟเพียงหนึ่งเดียว – ความหรูหราอันเงียบสงบที่แฝงอยู่ในความนิ่งงัน
- Cowboy — แกลเลอรี่จักรยานสัญชาติเบลเยียมในบรรยากาศเครื่องลายครามสีขาวบริสุทธิ์ โชว์รูมที่พื้นผิวแบบด้าน ตัวอักษรขนาดใหญ่ที่ใช้ในสื่อสิ่งพิมพ์ และการตกแต่งที่แทบจะไม่มีเลย ช่วยดึงดูดสายตาไปที่จักรยานและสิ่งของภายใน
- Refero — การจัดวางหน้าบทความบนพื้นหลังหินอ่อนสีขาว - หน้าสินค้าที่สร้างสรรค์โดยนักออกแบบตัวอักษร โดยที่หัวข้อแบบมีเชิงเป็นเอกลักษณ์ของแบรนด์ และองค์ประกอบอื่นๆ นั้นดูเรียบง่ายไม่โดดเด่น
- Face Formula — ภาพถ่ายบุคคลสไตล์สแกนดิเนเวีย ภาพที่สงบนิ่งราวกับอยู่ในนิตยสาร โดยสายตาของนางแบบและหัวข้อข่าวที่เขียนด้วยตัวอักษรแบบมีเชิงแคบๆ นั้นสื่อความหมายได้ด้วยตัวเอง บนฉากหลังที่ดูเย็นชาและมีหมอกจางๆ
- Shupatto — ตู้จัดแสดงในพิพิธภัณฑ์บนฐานหินอ่อนสีขาว