รวมงานที่ทำไว้ ทั้งแบบเว็บไซต์
พรีเซนเทชัน ตัวอย่างโพสต์ และภาพรีทัช
กดที่ภาพเพื่อเปิดดูงานแต่ละชิ้น
สรุปงานทั้งหมด
งานที่ทำไว้แบ่งเป็น 7 ส่วน
01 / SELECTED WORK
งานเดิมย้ายมาเปิดดูได้ที่นี่
เลือกดูในหน้านี้ หรือเปิดเต็มหน้าก็ได้
ภาพรวมเว็บไซต์และบริการของ SLF, จุดเด่นที่เสนอให้ใช้สื่อสาร, แนวทาง CI และ Mood & Tone, ตัวอย่างเว็บและโซเชียล, งานภาพ และลำดับการดำเนินงาน
เมนูเลือกหัวข้อ ปุ่มก่อนหน้า–ถัดไป โหมดนำเสนอ และบันทึกสำหรับผู้นำเสนอ พร้อมลิงก์เปิดเว็บเดโมและตัวอย่างสื่อ
วาง Header และเมนู ตามด้วย Hero, ข้อมูลความน่าเชื่อถือ, ขั้นตอนประสานงาน 4 ขั้น, รายละเอียดบริการ, ภาพฝูงบิน และหน้าตาแบบฟอร์มติดต่อ
เปลี่ยน Navy / White, สลับ Video / Images, ควบคุมสไลด์, จดจำตัวเลือกในเบราว์เซอร์ และปรับเมนูสำหรับมือถือ มี Layout เดิมสำหรับเปรียบเทียบกับแบบใหม่
วางฟีด 9 โพสต์ มีภาพเครื่องบิน งานแพทย์ งานซ่อมบำรุง ทีมงาน และความน่าเชื่อถือขององค์กร พร้อมข้อความตัวอย่างในแต่ละโพสต์
กดเลือกโพสต์เพื่อดูรายละเอียดและพรีวิวแบบ Instagram ได้ มีปุ่มคัดลอก Caption สำหรับนำไปปรับใช้
จัดหน้าเทียบภาพก่อนและหลัง 6 คู่ มีแถบเลื่อนให้ดูความแตกต่างในตำแหน่งเดียวกัน พร้อมข้อความประกอบแต่ละภาพ
6 คู่ในหน้า Showcase เป็นชุดตัวอย่างเดิม จึงไม่บวกเพิ่มเข้าไปในยอด 57 ภาพของคลังล่าสุด เพราะอาจมีภาพที่อยู่ในทั้งสองชุด
เว็บข้อเสนอและเอกสาร PDF ภาษาไทย–อังกฤษ ระบุภาพรวมโครงการ โครงสร้างเว็บ ขอบเขตออกแบบและพัฒนา ระยะเวลา เงื่อนไขชำระเงิน และภาพตัวอย่างบนจอขนาดต่าง ๆ
แยกงานหน้าเว็บกับงานระบบหลังบ้านไว้ในข้อเสนอ เพื่อให้เห็นว่าแต่ละตัวเลือกครอบคลุมอะไร และมีข้อมูลใดที่ต้องเตรียมก่อนเริ่มขั้นถัดไป
E Wing 11 ภาพ, M Wing 10 ภาพ และ Maintenance 36 ภาพ รวม 57 ภาพ โดยคัดภาพซ้ำและภาพมุมใกล้เคียงออกตามหมายเหตุของชุดงาน
เลือกหมวด ค้นหาจากชื่อไฟล์ เปิดภาพขยาย เลื่อนดูภาพต่อเนื่อง และเปิดไฟล์ต้นทางใน Drive ได้ตามสิทธิ์เดิม
แบบ 1 · ภาพหลักและช่องทางติดต่อ ↗
แบบ 2 · ภาพหลักและภาพบริการ ↗
แบบ 3 · รายละเอียดบริการ ↗
แบบ 4 · ภาพหลักและพื้นที่โลโก้ ↗ทดลองโทนภาพเครื่องบินและงานบริการให้กลมกลืนกัน ปรับตำแหน่งภาพหลักและพื้นที่ข้อความ จัดน้ำหนักโลโก้กับปุ่มติดต่อ และลดข้อความให้เหมาะกับแบนเนอร์แนวยาว
ทดลองจัดภาพบริการเป็นชุด 3:2 สำหรับวางร่วมกับ Hero ทั้งภาพทีมบริการ งานตรวจเครื่องบิน และห้องนักบิน พร้อมพื้นที่โลโก้ มีการเปลี่ยนภาพซ้ำและปรับองค์ประกอบหลายรอบ
แสดงงานระหว่างออกแบบ ยังไม่ระบุเป็นแบบอนุมัติหรือผลงานที่เผยแพร่แล้ว
02 / VISUAL DIRECTION
เลือกโทนสี วางข้อความ และจัดภาพ
ให้เหมาะกับเนื้อหาของแต่ละหน้า
เริ่มจากบริการของ SLF แล้วค่อยอธิบายความพร้อม ขั้นตอนประสานงาน และช่องทางติดต่อ เพื่อให้ผู้อ่านตามเนื้อหาได้เป็นลำดับ
Navy ทำให้ภาพและข้อความเด่นบนพื้นเข้ม ส่วน White ให้หน้าดูโปร่ง ใช้ขนาดตัวอักษรและสีเน้นแยกหัวข้อ เนื้อหา และปุ่มติดต่อ
ใช้ภาพเครื่องบิน ทีมงาน และงานบริการประกอบเนื้อหาแต่ละส่วน ปรับการครอปให้มีพื้นที่วางข้อความ และจัดโทนภาพในฟีดให้ไปด้วยกัน
เว็บเดโมมีทั้งวิดีโอและภาพนิ่งให้เทียบความรู้สึก ส่วนหน้าสรุปนี้ใช้ GSAP ให้ภาพและข้อความทยอยปรากฏ และรองรับการตั้งค่าลดภาพเคลื่อนไหว
03 / STATUS & PAYMENT
ข้อมูลการเผยแพร่และการรับชำระ
พักการเผยแพร่ลิงก์เดิมเพื่อทบทวนข้อตกลงการทำงาน โดยยังเก็บตัวงานและพรีวิวไว้
ปัจจุบันนำงานเดิมมารวมไว้ในหน้านี้แล้ว ทั้งพรีเซนเทชัน เว็บไซต์เดโม ตัวอย่างโซเชียล และหน้ารีทัช
การพักลิงก์รีวิวไม่ได้กระทบเว็บไซต์องค์กรจริงของ SLF
PAYMENT RECEIVED
ชำระแล้ว
5,400 บาท
วันที่ 7 กันยายน 2569
04 / WEB ARCHITECTURE
สำหรับผู้ที่ต้องการดูโค้ด การจัดข้อมูล และส่วนที่ต้องพัฒนาต่อ
เครื่องมือที่ใช้ต่างกันตามชิ้นงาน เว็บไซต์เดโมใช้ HTML, CSS และ JavaScript ส่วนเว็บข้อเสนอใช้ React
IMPLEMENTED / ส่วนที่พัฒนาแล้ว
แยกหน้าเว็บเป็นส่วนเมนู ภาพเปิดเว็บ เนื้อหาบริการ แกลเลอรี และแบบฟอร์ม ใช้ JavaScript ควบคุมการกดใช้งาน ส่วนเว็บข้อเสนอใช้ React จัดองค์ประกอบและสลับภาษาไทย–อังกฤษ
IMPLEMENTED / ส่วนที่พัฒนาแล้ว
ใช้ CSS กำหนดสี ขนาดตัวอักษร ระยะห่าง และสัดส่วนภาพ ใช้ Grid กับ Flexbox จัดวางเนื้อหา และกำหนดขนาดจอที่ต้องเปลี่ยน Layout ด้วย Media Queries
IMPLEMENTED / ส่วนที่พัฒนาแล้ว
เก็บรายการภาพและตำแหน่งใช้งานไว้ในไฟล์ JSON เช่น ภาพ Hero, Fleet, คู่ภาพรีทัช และคลังภาพล่าสุด จากนั้นให้ JavaScript อ่านรายการมาแสดง เวลาเปลี่ยนชุดภาพจึงไม่ต้องเขียนหน้าเว็บใหม่ทั้งหมด
DELIVERY LAYER / ส่วนที่ใช้อยู่
เว็บนี้เปิดจาก Cloudflare Pages โดยมี Worker ดูแลเงื่อนไขการเรียกหน้าเว็บและ Header ส่วนนี้ทำไว้สำหรับให้เปิดดูผลงานและไฟล์ประกอบ
ระบบแก้ไขเนื้อหาหลังบ้าน ฐานข้อมูล บัญชีผู้ใช้ สิทธิ์แก้ไข และ API รับ–บันทึกข้อมูล อยู่ในขอบเขตที่เสนอไว้ ต้นแบบที่เปิดดูตอนนี้ยังไม่ได้เชื่อมระบบเหล่านี้ครบชุด
