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

Spotify

ห้องควบคุมตู้เพลงกลางคืน

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

รูปแบบการจัดวางแบบสองคอลัมน์คงที่ ประกอบด้วยแถบด้านข้างซ้าย ("คลังเพลงของคุณ") และพื้นที่เนื้อหาหลักที่ตอบสนองต่อขนาดหน้าจอ แถบด้านบนเป็นแถบสีดำเต็มความกว้าง โดยมีปุ่มค้นหาอยู่ทางซ้ายและปุ่มดำเนินการบัญชีอยู่ทางขวา เนื้อหาหลักจะเลื่อนในแนวตั้ง โดยมีแถบเลื่อนแนวนอนแสดงการ์ดต่างๆ ได้แก่ เพลงยอดนิยมในตารางสี่เหลี่ยม 5 คอลัมน์ ศิลปินยอดนิยมในตารางวงกลม 5 คอลัมน์ และอัลบั้ม/ซิงเกิลยอดนิยมในรูปแบบเดียวกัน ระยะห่างระหว่างส่วนต่างๆ นั้นกระชับ (32 ซม.) แบนเนอร์โฆษณาด้านล่างจะตรึงอยู่ด้านล่างสุดของหน้าจอ การนำทางทำได้เฉพาะผ่านแถบด้านบนและแถบด้านข้างเท่านั้น ไม่มีเมนูขนาดใหญ่หรือเส้นทางนำทาง รูปแบบการแสดงผลจะสลับกัน: การ์ดสี่เหลี่ยม → การ์ดวงกลม → การ์ดสี่เหลี่ยม สร้างความแตกต่างทางเรขาคณิตระหว่างส่วนต่างๆ

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

จานสี

ยี่ห้อ

  • Spotify Green #1ed760 — สีเขียวใช้เป็นสีเสริมสำหรับรายละเอียดตกแต่งและเพื่อเน้นคำค้นหาที่ใช้ไม่บ่อยนัก ไม่ควรใช้เป็นสีหลักสำหรับข้อความกระตุ้นการกระทำ

เป็นกลาง

  • Pure White #ffffff — พื้นผิวรองรับสีอ่อนสำหรับสร้างพื้นหลังที่ไม่โดดเด่นและแบ่งส่วนต่างๆ ไม่ควรใช้เป็นสีหลักสำหรับข้อความกระตุ้นการกระทำ
  • Signal Red #b85850 — สีแดงใช้เป็นสีเสริมเพื่อเน้นรายละเอียดการตกแต่งและขับเน้นสีที่ไม่ค่อยพบเห็น ควรใช้เป็นสีเสริม ไม่ใช่สีที่แสดงถึงสถานะทางสังคม
  • Void Black #000000 — พื้นหลังของหน้าเว็บ, แถบนำทางด้านบน, ชั้นพื้นผิวที่ลึกที่สุด
  • Carbon #121212 — พื้นผิวทำจากกระดาษแข็ง แผงด้านข้าง ชั้นผิวรองทับบนผ้าใบ
  • Graphite #1f1f1f — พื้นผิวที่ยกสูงขึ้น - สถานะการวางเมาส์เหนือองค์ประกอบ, ช่องป้อนข้อมูล, องค์ประกอบการนำทางที่เลือก
  • Smoke #292929 — พื้นหลังการนำทางแบบแอคทีฟ พร้อมเอฟเฟกต์แสงพื้นหลังเล็กน้อย

การจัดพิมพ์

จาก 11 เป็น 24 พิกเซล · 4 ขั้นตอน

  • SpotifyMixUI — ทดแทน: Inter · โครงร่าง 400, 600, 700 · เนื้อหาหลัก การนำทาง ปุ่ม ข้อมูลเมตา คำบรรยายภาพขนาดเล็ก—การออกแบบที่กะทัดรัดและอุดมไปด้วยข้อมูล ซึ่งออกแบบมาให้ดูเรียบง่าย เพื่อให้องค์ประกอบทางศิลปะโดดเด่นขึ้นมา
  • SpotifyMixUITitle — ทดแทน: Inter weight 700 · โครงร่าง 700 · หัวข้อส่วนต่างๆ ("เพลงยอดนิยม", "ศิลปินยอดนิยม") - ใช้แบบอักษรตัวหนาขนาดปานกลาง ทำให้หัวข้อโดดเด่นโดยไม่ทำให้ตารางการ์ดดูรกเกินไป

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

วัตถุประสงค์ความหมาย
ความหนาแน่นหนาแน่น
ขั้นตอนพื้นฐาน8-12px
รัศมีปุ่ม9999px
รัศมีการ์ด6px
เงาน้อยที่สุด
ระหว่างส่วนต่างๆ32-48px

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

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

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

  • Resend — กำมะหยี่สีดำผสมสีม่วงนีออน
  • Neon — ห้องเซิร์ฟเวอร์หลังมืดค่ำ มืดสนิท มีเพียงแสงสว่างจากข้อมูลและการโต้ตอบของผู้ใช้งานเท่านั้น
  • Discord — โลกในเกมถูกซ่อนอยู่หลังหน้าต่างแชทแบบป๊อปอัพ แต่ละส่วนเป็นสภาพแวดล้อมที่แยกเป็นอิสระ มีแสงสว่างและตัวละครเป็นของตัวเอง
  • Idle Finance — พื้นที่ซื้อขายที่ประดับประดาด้วยแสงนีออนของท่าเทียบเรือน้ำลึกเป็นท่าเรือทหารเรือที่มืดมิด มีเพียงแสงสีฟ้าเพียงดวงเดียวที่ส่องทะลุความมืดนั้น
  • Midjourney — สถานีเรืองแสงในมหาสมุทรลึก โลกใต้ทะเลลึกที่ซึ่งสติปัญญาถูกสร้างขึ้นมาด้วยภาพในรูปแบบ ASCII และปุ่มควบคุมจะปรากฏเป็นลวดลายเรืองแสงจางๆ
  • Netflix — ชั้นวางดิจิทัลไร้ขีดจำกัด ประสบการณ์การรับชมภาพยนตร์ที่นำเสนอคลังเนื้อหาอันไม่มีที่สิ้นสุดบนฉากหลังสีดำสนิทแบบโรงละคร
  • Wope — Wope คืออินเทอร์เฟซขอบฟ้าสีม่วง ลองนึกภาพโต๊ะสังเกตการณ์สีเข้มที่มีแสงสีม่วงส่องประกายออกมาจากใต้กระจก
  • basement — เครื่องพิมพ์ว่างเปล่าเวลาตี 3 – ตัวอักษรขนาดใหญ่บีบอัดกระจายอยู่บนพื้นหลังสีดำสนิท มีเพียงแสงสีส้มริบหรี่บนแถบนำทาง ทุกสิ่งทุกอย่างรอบข้างเป็นสีขาวหรือสีเทาจางๆ
  • Ori — ห้องเซิร์ฟเวอร์ตอนเที่ยงคืนนั้นมืดสนิท มีเพียงแสงสีขาว และสวิตช์ไฟเพียงตัวเดียวที่เปิดอยู่
  • Amaterasu — สถานที่ศักดิ์สิทธิ์สีเทอร์ควอยซ์สวรรค์
  • Stink Studios — สตูดิโอถ่ายทำภาพยนตร์ยามเที่ยงคืน - เสียงเครื่องฉายดังหึ่งๆ ห้องมืดสนิท มีเพียงฟิล์มเท่านั้นที่ส่องสว่าง
  • Obsidian — คลังความรู้อันล้ำลึก พื้นที่ดิจิทัลที่ชัดเจนและหลากหลาย ออกแบบมาเพื่อความชัดเจนและการโฟกัส พร้อมด้วยเส้นใยสีม่วงเรืองรองที่เชื่อมโยงการปฏิสัมพันธ์