WebWeCreate.com

ออกแบบ พัฒนา และดูแลเว็บไซต์ ใช้งานง่าย ราคาเป็นกันเอง

Imthongphromfan

เว็บไซต์ประชาสัมพันธ์องค์กรไม่แสวงหากำไร "อิ่มท้อง พร้อมฝัน" โครงการแจกข้าวฟรีที่ดูแลคนไทยกว่า 300,000 ครอบครัว ออกแบบเป็น One-Page WordPress ที่ถ่ายทอดพันธกิจขององค์กรผ่าน Storytelling Design พร้อม Timeline แบบ Custom Code ที่ผู้ใช้สามารถเลื่อนดูกิจกรรมตามปีได้
https://imthongphromfan.com
↓ scroll ดูหน้าเต็ม

ระยะเวลา

1 สัปดาห์

ปีที่ทำ

2024

Client

อิ่มท้อง พร้อมฝัน (Im Thong Phrom Fan)

เกี่ยวกับโปรเจคนี้

“อิ่มท้อง พร้อมฝัน” คือโครงการเพื่อสังคมที่ดำเนินงานมาหลายสิบปี มีพันธกิจในการแจกข้าวฟรีและอาหารราคา 20 บาท ให้แก่เด็ก ผู้สูงอายุ คนพิการ และผู้ที่ต้องการความช่วยเหลือทั่วประเทศ ลูกค้าต้องการเว็บ PR องค์กรแบบ One-Page ที่สื่อสารพันธกิจได้ชัดเจน โดยมี Figma Design และ Canva Design เป็น Reference พร้อม Media Assets และ Wording ที่จัดเตรียมให้ครบ โจทย์หลักคือการสร้างเว็บที่สื่อถึงความอบอุ่น ความหวัง และความน่าเชื่อถือขององค์กร พร้อม Timeline Feature ที่ให้ผู้เข้าชมเลื่อนดูประวัติกิจกรรมขององค์กรตามแต่ละปีได้

เหมาะกับใคร

1. ผู้บริจาคและผู้สนับสนุน — บุคคลหรือองค์กรที่ต้องการร่วมสนับสนุนโครงการ เว็บช่วยสร้างความเชื่อมั่นผ่านตัวเลขผลกระทบจริงและภาพกิจกรรม
2. สื่อมวลชนและ PR — นักข่าวหรือ Content Creator ที่ต้องการข้อมูลองค์กร เว็บให้ข้อมูล About Us, Program และ Featured News ได้ครบในที่เดียว
3. ผู้รับประโยชน์และชุมชน — ประชาชนทั่วไปที่ต้องการทราบว่าโครงการนี้ช่วยเหลือใครได้บ้าง และจะเข้าถึงความช่วยเหลือได้อย่างไร

Screenshots

Home
About us
Program
Contact us

สิ่งที่ทำในโปรเจคนี้

One-Page Anchor Navigation
ผู้เข้าชมเลื่อนหน้าได้ลื่นและกดเมนูไปยัง Section ได้ทันที
ออกแบบเว็บแบบ Single Page ที่เมนูทุกรายการเชื่อมต่อกับ Anchor Link ของ Section ต่างๆ ช่วยให้ผู้เข้าชมทราบโครงสร้างเนื้อหาทั้งหมดตั้งแต่แรก และเข้าถึงส่วนที่ต้องการได้โดยไม่ต้องโหลดหน้าใหม่
Timeline Post System แบบ Custom
ดูกิจกรรมขององค์กรตามปีได้ผ่าน Slider Timeline แบบ Interactive
พัฒนา Timeline Feature ด้วย Custom Code Snippet ที่ดึง Post จาก WordPress มาจัดกลุ่มตาม Category ปี (เช่น 2520, 2540) เมื่อผู้เข้าชมกดเลือกปีบน Timeline Slider เนื้อหาจะเปลี่ยนแบบ Dynamic โดยไม่โหลดหน้าใหม่ รองรับการเพิ่มเนื้อหาย้อนหลังได้โดยลูกค้าเองผ่าน WordPress Backend โดยไม่ต้องแก้โค้ด
Storytelling Design ตาม Figma/Canva Reference
เว็บสื่อถึงพันธกิจองค์กรได้ตั้งแต่วินาทีแรกที่เข้าชม
แปลง Design Reference จาก Figma และ Canva ของลูกค้าให้กลายเป็นเว็บจริงด้วย Elementor Pro โดยรักษา Visual Identity ของแบรนด์ทั้งด้าน Typography (ฟอนต์ไทยแฮนด์ไรติ้ง) สี (Navy Blue + Yellow-Green) และ Mood & Tone ที่สื่อถึงความอบอุ่นและความหวัง
Impact Counter Section
องค์กรสื่อสารผลลัพธ์ 1,000,000 กิโล และ 300,000 ครอบครัว ได้อย่างน่าเชื่อถือ
ออกแบบ Statistics Section ที่เน้นตัวเลขผลกระทบหลักขององค์กรด้วย Counter Widget บน Background รูปภาพ ช่วยสร้าง Credibility และกระตุ้นให้ผู้เข้าชมรับรู้ถึงขนาดของงานที่องค์กรทำจริง
Social Media Footer Integration
ผู้เข้าชมต่อยอดไปยัง Social Media ขององค์กรได้ทันทีจาก Footer
เชื่อมต่อ Social Links (Facebook, Instagram, YouTube, TikTok) ผ่าน Footer ที่ออกแบบให้สะอาดและสอดคล้องกับ Visual Identity ขององค์กร ช่วยขยาย Reach และรักษาการมีส่วนร่วมของผู้ติดตา

เบื้องหลังการทำงาน

“อิ่มท้อง พร้อมฝัน” คือโครงการเพื่อสังคมที่ดำเนินงานมาหลายสิบปี ด้วยความเชื่อว่า “ก่อนจะไปถึงฝัน ต้องไม่ปล่อยให้ใครอด” ลูกค้าต้องการเว็บไซต์ที่ถ่ายทอดพันธกิจขององค์กรออกมาได้อย่างตรงใจ โดยมาพร้อม Figma Design, Canva Reference, Media Assets และ Wording ที่เตรียมมาครบ ทำให้ขอบเขตงานชัดเจนตั้งแต่ต้น

WebWeCreate รับโจทย์ในการสร้าง One-Page WordPress + Elementor Pro ที่เมนูทุกรายการเชื่อมต่อกับ Anchor Link ของแต่ละ Section เพื่อให้การเลื่อนหน้าลื่นไหลไม่สะดุด งานหลักคือการแปลง Visual Design ให้กลายเป็นเว็บจริงที่รักษา Brand Identity ของแบรนด์ ทั้งฟอนต์ไทยแฮนด์ไรติ้ง โทนสี Navy Blue และ Mood ที่สื่อถึงความอบอุ่น

ความท้าทายหลักของโปรเจกต์นี้คือ Timeline Feature ที่ลูกค้าต้องการให้ผู้เข้าชมสามารถเลือกดูกิจกรรมขององค์กรย้อนหลังตามปีได้ WebWeCreate แก้โจทย์นี้ด้วยการพัฒนา Custom Code Snippet ที่ดึง WordPress Post มาจัดกลุ่มตาม Post Category ที่ตั้งชื่อเป็นปี (พ.ศ.) เมื่อผู้เข้าชมกดเลขปีบน Timeline Slider ระบบจะแสดง Post ของปีนั้นผ่าน Post Slider แบบ Dynamic โดยไม่โหลดหน้าใหม่ และลูกค้าสามารถเพิ่มเนื้อหาย้อนหลังได้เองผ่าน WordPress Backend

ผลลัพธ์ที่ได้คือเว็บ PR องค์กรที่ถ่ายทอดพันธกิจ “ให้ทุกคนมีข้าวกิน” ออกมาได้อย่างทรงพลังผ่าน Storytelling Design ที่ไหลลื่น ตั้งแต่ Hero Section ที่โดดเด่น Impact Counter ที่แสดงตัวเลขจริง ไปจนถึง Timeline ที่บอกเล่าประวัติศาสตร์ขององค์กร โครงสร้างเว็บเสร็จสมบูรณ์และส่งมอบพร้อม Demo Content ให้ลูกค้าอัปเดตเนื้อหาต่อได้ทันที

เครื่องมือที่ใช้พัฒนา

Tags

ผลงานที่เกี่ยวข้อง

AI Assistant
ออนไลน์อยู่ พร้อมช่วยเหลือ
สวัสดีค่ะ! มีอะไรให้ช่วยไหมคะ?
กำลังโหลด...