PANEL 01 · ACCEPTED
HUSH wordmark cover
ใช้แนวทางพื้นที่ว่างและ uppercase เดิม
header / #top
Inter Bold และ live HTML; ภาพไม่ใช่ logo master
OPTIONAL LAB / 60–90 MINUTES
หนึ่งภาพ
เก้าการตัดสินใจHUSH × brandkit
เริ่มจากข้อมูลแบรนด์เดิม สร้างภาพรวมทิศทาง แล้วตรวจทีละช่องก่อนส่งต่อไปทำเว็บไซต์
DRAFT · แบรนด์สมมติสำหรับเรียน · ภาพสร้างด้วย AI เป็น concept ไม่ใช่ screenshot ของเว็บไซต์ที่ทำงานจริง
READ THE BOARD / KEEP THE SOURCE
เห็นอะไร รับอะไร ส่งต่ออย่างไร
รับภาพนี้เพื่อสื่อทิศทาง สีและ font ที่ใช้เขียนเว็บยังต้องอ่านจาก source เดิม ส่วน logo grid และ packaging ยังเป็นข้อเสนอ ภาพจริงไม่มี dark Ink panel ตาม preference ใน prompt; บันทึก deviation นี้และรับภาพเพื่อสื่อ HUSH light/lilac direction เท่านั้น
PANEL 02 · GAP
ตารางระยะตัวอักษร
เป็นการศึกษา spacing เท่านั้น
wordmark
ห้ามใช้ grid เป็น clear-space rule ที่อนุมัติแล้ว
PANEL 03 · ADAPTED
Desktop hero concept
ภาพสินค้าขนาดใหญ่และลำดับชั้นชัด
#top
ใช้ HTML/CSS กับภาพ headphones.webp เดิม; mockup ไม่ใช่ screenshot
PANEL 04 · ACCEPTED
HUSH ONE + negative space
ใช้จังหวะเนื้อหาและพื้นที่ว่าง
#story / #listening
ข้อความจริงอิง brief; emotional promise ยังเป็น proposal
PANEL 05 · ADAPTED
แถบสี
รักษาความสัมพันธ์ Cloud / Lilac / Ink
tokens.css
ใช้ HEX จาก source เท่านั้น; raster ยืนยันค่าสีจริงไม่ได้
PANEL 06 · ADAPTED
Aa / HUSH type specimen
ใช้ลำดับขนาดอักษร
heading / body
โหลด Inter และ IBM Plex Sans Thai จริง; bitmap ยืนยัน font metrics ไม่ได้
PANEL 07 · GAP
กล่องสินค้า concept
เก็บเป็นแนวคิดประกอบ
ยังไม่นำเข้า product claims
ยังไม่มีข้อมูลบรรจุภัณฑ์จริงหรือการอนุมัติผลิต
PANEL 08 · ADAPTED
ภาพ crop รายละเอียดหูฟัง
ใช้การ crop ให้เห็นรายละเอียด
#design
ใช้ภาพอ้างอิงเดิมในการพัฒนา; ภาพสร้างใหม่ไม่พิสูจน์โครงสร้างสินค้าจริง
PANEL 09 · ADAPTED
Mobile card และ outline symbols
ใช้แนวคิด card ที่อ่านง่าย
#shop / responsive layout
ไม่รับ icon รูปหัวใจ/บุคคลเป็น feature ใหม่; ใช้ SVG เดิมและทดสอบ 320/390px
FROM IMAGE TO IMPLEMENTATION
นำไปทำเว็บได้ เมื่อแปลงเป็นข้อกำหนด
- เปิด brief, evidence และ tokens ของ HUSH เดิม
- ใช้จังหวะ layout และพื้นที่ว่างจากภาพเป็นแนวทาง
- สร้างข้อความและ CTA ด้วย HTML; ใช้ภาพ/ไอคอนจริงจาก source
- ตรวจ responsive, keyboard, contrast และ API states ใน browser
สัญลักษณ์หัวใจและบุคคลใน panel 9 ไม่ได้เพิ่มฟังก์ชัน favorite/profile ให้เว็บไซต์ และไม่ได้เป็นไฟล์ SVG พร้อมใช้งาน
REPRODUCIBLE WORKED EXAMPLE
ไฟล์สำหรับทำตามและตรวจงาน
สำเนา skill พร้อม MIT License อยู่ใน source ZIP ที่ training-skills/brandkit/ โดย pin revision ที่ตรวจแล้ว