เว็บไซต์องค์กร INTECH

เว็บไซต์ที่เราทำให้ธุรกิจของเราเอง

งานนี้เป็นเว็บไซต์องค์กรของ INTECH ซึ่งออกแบบและพัฒนาเป็นโครงการภายใน ฉบับเดือนกันยายน 2569 รวบรวมแบรนด์ ข้อมูลบริการ และระบบเผยแพร่ผลงานไว้ด้วยกัน เพื่อให้คนที่สนใจรู้จักวิธีคิดและวิธีทำงานของเราก่อนเริ่มคุยเรื่องโปรเจกต์

ภาพหน้าจอในหน้านี้บันทึกจากเวอร์ชันที่ปรับปรุงเมื่อ 20 ตุลาคม 2569 โดยยังคงวันที่ของผลงานไว้เป็นเดือนกันยายน 2569

ใช้แบรนด์ให้ต่อเนื่องทั้งหน้าเว็บ

เราใช้โลโก้ที่มีอยู่เป็นจุดตั้งต้น แล้วนำสีน้ำเงิน พื้นสีเข้ม และสีฟ้าอ่อนมาจัดจังหวะของแต่ละส่วน ตัวอักษรขนาดใหญ่และพื้นที่ว่างช่วยให้ใจความสำคัญอ่านได้ชัด หน้าแรกใช้ตราสัญลักษณ์ INTECH บนแผ่นสีขาว ซ้อนกับแผ่นสีน้ำเงินและฟ้าอ่อน ส่วนเส้นเชื่อม SVG และโมดูลสี่เหลี่ยมช่วยต่อภาพให้เป็นภาษาของแบรนด์เดียวกัน

ข้อความ “Code smart, Not Harder” คงภาษาอังกฤษไว้ทั้งสองฉบับ ส่วนคำอธิบายภาษาไทยเรียบเรียงตามบริบท ไม่แปลตรงตัวทุกคำ และปรับระยะบรรทัดให้เหมาะกับสระและวรรณยุกต์

ให้การเคลื่อนไหวมีหน้าที่

เมื่อเข้าเว็บครั้งแรก หน้ารอโหลดจะแสดงโลโก้ INTECH และโครงร่างเนื้อหาเป็นเวลา 1.4 วินาที ผู้ใช้กดเข้าเว็บได้ทันที และการเปลี่ยนหน้าภายในจะข้ามช่วงแนะนำนี้ ภาพบนหน้าแรกค่อย ๆ ประกอบเข้าที่ แถบบริการเลื่อนวนต่อเนื่อง และเส้นในส่วนขั้นตอนการทำงานเคลื่อนตามการอ่าน

ผู้ใช้หยุดข้อความเลื่อนได้ และผู้ที่ตั้งค่าลดการเคลื่อนไหวจะได้รูปแบบที่นิ่งขึ้น หากสคริปต์แอนิเมชันไม่ทำงาน เนื้อหาหลักและลิงก์ที่จำเป็นยังอ่านและใช้งานได้

เตรียมโครงสร้างไว้สำหรับผลงานชิ้นต่อไป

ข้อมูลผลงานเก็บเป็น Markdown ที่มีฟิลด์ชัดเจน หน้ารวมรองรับการกรองประเภท ค้นหา และแสดงผลงานเพิ่มเติม โดยเก็บตัวกรองไว้ใน URL แต่ละโครงการมีพื้นที่สำหรับโจทย์ แนวทางแก้ไข ขอบเขตงาน ภาพประกอบ ผลลัพธ์ และเทคโนโลยี ส่วนที่ไม่มีข้อมูลจะไม่แสดง

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

โครงสร้างที่คนดูแลต่ออ่านเข้าใจ

Astro สร้างหน้าเว็บไว้ล่วงหน้า ส่วน TypeScript ช่วยกำหนดรูปแบบข้อมูลและขอบเขตของแต่ละส่วน โมดูลในเบราว์เซอร์รับผิดชอบเฉพาะสิ่งที่ต้องโต้ตอบ โครงสร้างหน้าร่วมและการตรวจข้อมูลแยกงานแสดงผลออกจากเนื้อหาและกติกาการเผยแพร่

แบบฟอร์มโปรเจกต์ทำงานบนอุปกรณ์ของผู้ใช้ ตรวจข้อมูลแล้วสร้างไฟล์ข้อความให้ดาวน์โหลด โดยยังไม่ได้ส่งคำขอถึง INTECH เว็บไซต์กำหนด Content Security Policy ไว้ในชุดค่าตั้งสำหรับโฮสติ้ง และโหลดฟอนต์กับภาพแบรนด์จากเว็บไซต์เอง

ตรวจจากเส้นทางที่คนต้องใช้จริง

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