Telegram, WhatsApp+380637610482
วาเลรี ดานยุก
วาเลรี ดานยุกนักพัฒนาพัฒนาเครื่องมือ AI สำหรับธุรกิจ คุณภาพสูง ราคาไม่แพงติดต่อผ่าน Telegram
ElevenLabs — ตัวอย่างเว็บไซต์ในรูปแบบนี้

ElevenLabs

ภาพถ่ายเชิงสารคดีในโทนสีครีมอบอุ่น พร้อมหัวข้อข่าวที่ไม่ฉูดฉาด สมุดบันทึกสไตล์เบาเฮาส์—กระดาษสีเปลือกไข่ หมึกสีดำ และสีม่วงและสีส้มเพียงเล็กน้อยสำหรับตกแต่งเพื่อแสดงสินค้า

ElevenLabs ใช้สไตล์มินิมอลโทนสีขาวอบอุ่น: พื้นหลังสีเปลือกไข่ (#fdfcfc) พร้อมตัวอักษรสีดำและพื้นผิวสีเทาอมน้ำตาลอบอุ่นชั้นเดียว (#f5f3f1) เอกลักษณ์ของแบรนด์นั้นเงียบสงบและมั่นใจ—แบบอักษร Waldenburg 300 ที่แทบแยกไม่ออกเน้นหัวข้อด้วยความชัดเจนอย่างยิ่ง (-0.02em) ในขณะที่ Inter 400/500 ให้ความรู้สึกเป็นกลางที่สงบแก่ทุกสิ่งอื่นๆ สีเน้นสองสี—สีม่วงสดใส #0447ff และสีส้มสดใส #ff4704—โดดเด่นเฉพาะในองค์ประกอบภาพของผลิตภัณฑ์ (audiospheres, ไอคอนผลิตภัณฑ์) เท่านั้น ไม่ใช่สีโครเมียมใน UI ส่วนประกอบต่างๆ ยังคงแบนราบหรือนูนขึ้นเล็กน้อยด้วยขอบบาง 1px รัศมีกว้าง 20px บนการ์ด และปุ่มขนาด 9999px ที่เติมเต็มทั้งหมด ระบบนี้ชวนให้นึกถึงสตูดิโอ Bauhaus บนกระดาษสีครีม: เรียบง่าย เป็นทางการ และแม่นยำทางเทคนิค

ส่วนต่างๆ ที่มีความกว้างเต็มหน้าจอจะถูกจัดเรียงในแนวตั้งในคอลัมน์กลางเดียวที่มีความกว้างสูงสุด โดยมีช่องว่างด้านนอกขนาด 1280 พิกเซล ส่วนหลักนั้นไม่สมมาตร: หัวข้อจัดชิดซ้ายที่ระดับ Waldenburg 48 พิกเซล ข้อความอธิบายจัดชิดขวา และมีปุ่มรูปทรงแคปซูลสองปุ่มอยู่ด้านล่างหัวข้อ ด้านล่างส่วนหลักเป็นแถบนำทางแบบแท็บขนาดใหญ่ที่ครอบคลุมความกว้างของเนื้อหาทั้งหมด ส่วนต่างๆ สลับกันระหว่างพื้นหลังสีขาวนวลและสีเทาอมน้ำตาล โดยมีช่องว่างแนวตั้งขนาด 96–125 พิกเซล ส่วนท้ายเป็นแถบเดียวขนาดกะทัดรัด การนำทางเป็นแถบด้านบนแบบเรียบง่าย—ไม่มีพฤติกรรมคงที่ ไม่มีเมนูขนาดใหญ่ จังหวะของเนื้อหาสอดคล้องกับสไตล์การเขียนบรรณาธิการ: มีพื้นที่ว่างสีขาวมาก มีองค์ประกอบภาพหลักหนึ่งอย่างต่อส่วน และไม่มีตารางการ์ดใต้ส่วน "ความไว้วางใจ"

การออกแบบภาพเน้นโทนสีเป็นหลัก: การไล่ระดับสีขนาดใหญ่ในรูปแบบของทรงกลมเสียงนุ่มนวล (วงกลมขนาด 200 พิกเซลขึ้นไปที่มีการเปลี่ยนสีแบบรัศมีจากสีม่วงเป็นสีส้มและสีชมพู) ทำหน้าที่เป็นองค์ประกอบกราฟิกหลัก โลโก้ในส่วน "ความน่าเชื่อถือ" นำเสนอในโทนสีเทาที่มีความคมชัดต่ำบนพื้นหลังผ้าใบด้าน การถ่ายภาพมีน้อยมาก—ไม่มีภาพไลฟ์สไตล์หรือภาพผลิตภัณฑ์ ไอคอนมีน้อยและเป็นแบบขาวดำ (ไอคอนเส้นขอบสีดำหรือไอคอนที่เติมสี ไม่มีไอคอนสีสันสดใส) ระบบภาพนี้ชวนให้นึกถึงสิ่งพิมพ์ด้านการออกแบบมากกว่าแคตตาล็อกผลิตภัณฑ์—ความเรียบง่ายเชิงบรรณาธิการมีความสำคัญมากกว่าผลกระทบทางการตลาด

จานสี

ยี่ห้อ

  • Violet Spark #0447ff — การเน้นภาพลักษณ์ของผลิตภัณฑ์ - ปรากฏเฉพาะในภาพประกอบเกี่ยวกับเสียงและไอคอนตกแต่งผลิตภัณฑ์เท่านั้น ไม่เคยใช้กับองค์ประกอบส่วนติดต่อผู้ใช้

เป็นกลาง

  • Eggshell #fdfcfc — พื้นผิวของหน้าเว็บ ปุ่ม และการ์ด มีโทนสีอบอุ่น ออกโทนครีมเล็กน้อย แทนที่จะเป็นสีขาวโพล่ง เพื่อหลีกเลี่ยงแสงสะท้อนจากหน้าจอดิจิทัล และให้ความรู้สึกสงบเหมือนกระดาษแก่เว็บไซต์
  • Warm Taupe #f5f3f1 — แถบแบ่งช่อง การ์ดตกแต่ง และพื้นผิวอีกระดับหนึ่ง ซึ่งลึกกว่าพื้นผิวด้านหนึ่งระดับ ช่วยสร้างการแบ่งแยกที่เรียบง่ายและไร้ขอบเขต
  • Stone #ebe8e4 — เส้นขอบบางๆ เส้นแบ่ง และพื้นหลังไอคอนเป็นสีเทาโทนอบอุ่นที่อยู่ระหว่างสีเทาอมน้ำตาลและสีเทากลาง โดยไม่ให้ความรู้สึกเย็นชา
  • Ink #000000 — ไม่ว่าจะเป็นข้อความหลัก ปุ่มที่เติมสี การนำทาง หรือลิงก์ สีดำสนิททำหน้าที่เป็นพื้นฐานสำหรับโทนสีอบอุ่น และสร้างความแตกต่างที่คมชัดเพียงอย่างเดียวในระบบ
  • Graphite #44403b — เนื้อหาหลักและหัวข้อต่างๆ - ใช้สีเทาเข้มโทนอบอุ่นที่ดูนุ่มนวลสำหรับข้อความที่ต้องการความโดดเด่นโดยไม่ดูแข็งกระด้างเหมือนสีดำ
  • Smoke #777169 — ข้อความหลัก คำอธิบายโดยละเอียด และคำบรรยายภาพใช้สีเทาโทนกลางถึงอบอุ่น ซึ่งเป็นรูปแบบที่โดดเด่น อ่านง่าย แต่สงบของไพ่และข้อความตามธีม

การจัดพิมพ์

จาก 10 เป็น 48 พิกเซล · 8 ขั้นตอน

  • Waldenburg — ทดแทน: Inter (300) or Söhne Light · โครงร่าง 300 · ใช้สำหรับหัวข้อและองค์ประกอบการออกแบบเท่านั้น ใช้ในรูปแบบ 48/36/32 พิกเซล ด้วยน้ำหนักตัวอักษร 300 – ตัวอักษรที่บางมากนี้ไม่ค่อยพบเห็นทั่วไป เว็บไซต์ส่วนใหญ่ใช้ตัวอักษร 600-700 ตัวอักษรที่ดูเรียบง่ายนี้สื่อถึงความน่าเชื่อถือผ่านความสง่างาม ระยะห่างระหว่างตัวอักษรที่แคบเพียง -0.02em ทำให้ตัวอักษรดูชิดกันมากขึ้นในขนาดที่ใหญ่ขึ้น ทางเลือกอื่น: "Inter" ในน้ำหนัก 300 หรือ "Söhne" ในน้ำหนักเบาเป็นทางเลือกระดับพรีเมียม
  • Inter — ทดแทน: Inter or system-ui · โครงร่าง 400, 500 · ทุกอย่างที่อยู่นอกหน้าจอ: ข้อความหลัก, การนำทาง, ปุ่ม, ลิงก์, ป้ายกำกับ, ช่องป้อนข้อมูล, การ์ด ความหนาตัวอักษรเริ่มต้นคือ 400; 500 สงวนไว้สำหรับปุ่มและลิงก์ที่ไฮไลต์ ขนาดตัวอักษรมีตั้งแต่ 10 ถึง 10 โดยมีระยะห่างระหว่างบรรทัดลดลง (1.47–1.6) ทำให้ย่อหน้ามีพื้นที่หายใจ ระยะห่างระหว่างตัวอักษรเล็กน้อย +1 (2) ในขนาดตั้งแต่ 14 ถึง 3 ช่วยปรับปรุงความชัดเจนในการอ่านในขนาดเล็ก
  • Geist Mono — ทดแทน: JetBrains Mono or IBM Plex Mono · โครงร่าง 400 · ข้อความขนาดเล็กที่อยู่ถัดจากโค้ดหรือข้อความทางเทคนิค วางตำแหน่งที่ 13 พิกเซล—ไม่ค่อยได้ใช้ (ความถี่ = 28) สำหรับป้ายกำกับทางเทคนิคหรือเมตาเดตา เลเยอร์เดียว ความสูงของบรรทัดสูง 1.69

ช่วงเวลาและรูปแบบ

วัตถุประสงค์ความหมาย
ความหนาแน่นหนาแน่น
ขั้นตอนพื้นฐาน8-16px
รัศมีปุ่ม9999px
รัศมีการ์ด20px
เงาไม่ - ใช้เส้นขอบแทนเงา
ระหว่างส่วนต่างๆ96-125px
ความกว้างของหน้า1280px

AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ ElevenLabs และเติมข้อมูลลงไป

  • ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
  • ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
  • ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
  • การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม

สไตล์ที่คล้ายกัน

  • Awesomic — แผ่นตาข่ายสังกะสีสำหรับงานบรรณาธิการ พร้อมเครื่องหมายวรรคตอนสีส้มที่ชวนให้นึกถึงกระดาษโปรย
  • Monad — บทบรรณาธิการวารสารทางเทคนิคเกี่ยวกับกระดาษหนังอุ่น
  • Dub — แผงควบคุมกระดาษข้าวแบบด้านของ Link
  • Seline Analytics — โต๊ะวิเคราะห์ที่เงียบสงบ บนกระดาษอุ่นๆ
  • Notion — สมุดบันทึกกระดาษอุ่นๆ ท่ามกลางแสงแดดกลางวัน
  • Anthropic — วารสารภาคสนามทางวิทยาศาสตร์บนกระดาษหนังลูกวัวสีอบอุ่น—พื้นผิวสีงาช้างเรียบลื่น หัวข้อบรรณาธิการแบบมีเชิง และรายละเอียดสีดินเหนียวเพียงจุดเดียวที่ปรากฏขึ้นเฉพาะเมื่อจำเป็นต้องมีการดำเนินการ
  • Calendly — หมึกสีน้ำเงินเข้มบนหินอ่อนเย็น
  • Augen Pro — การตกแต่งสีขาวของ Apple โดดเด่นด้วยสีฟ้าสดใสที่ดูสะอาดตาและไร้น้ำหนัก เป็นเพียงสีเดียวที่ใช้เป็นจุดเด่นในพื้นที่สีขาวดำ
  • Antimetal — บันทึกบรรณาธิการบนกระดาษสีครีม—เช้าอันเงียบสงบในวารสารวิทยาศาสตร์ ที่ซึ่งความยับยั้งชั่งใจสื่อถึงความมั่นใจ และตัวอักษรแบบมีเชิงช่วยเน้นความสำคัญ
  • Perk — มะนาวไฟฟ้าบนกระดาษไขอุ่น
  • Ditto — ห้องทำงานที่สว่างไสวด้วยแสงแดด กำลังสร้างสรรค์ตัวอย่างดอกไม้ป่า พื้นผิวสีครีมอบอุ่น สีเหลืองสดใสเป็นสีพื้นฐาน หมึกสีน้ำเงินเข้ม รูปทรงสีสันแบบธรรมชาติเบ่งบานอยู่ด้านหลังชิ้นงาน
  • Officevibe — นิตยสารบทความบนกระดาษสีครีมโทนอบอุ่น ลองนึกภาพบทความเชิงลึกเกี่ยวกับการบริหารทรัพยากรบุคคล ที่นำเสนอในรูปแบบของผลิตภัณฑ์—ตัวอักษรเขียนหวัดแบบมีเชิงที่กระซิบเบาๆ บนพื้นหลังสีฟ้าทันสมัย