# data[].attributes.headline
ชิ้นที่1  Exit Ticket (ตั๋วตรวจความรู้)

# data[].attributes.subject
ชิ้นที่1  Exit Ticket (ตั๋วตรวจความรู้)

# data[].attributes.body
หลังจากที่ได้เรียนรู้ในบทเรียนนี้ไปแล้ว ขอให้ผู้เรียนเขียนสะท้อนสิ่งที่ได้จากการเรียนรู้

# data[].attributes.headline
นางสาว ภาณุมาศ เกริกชัยวัน

# data[].attributes.subject
นางสาว ภาณุมาศ เกริกชัยวัน

# data[].attributes.attachment_link.title
Pink Blob Organic Stationary A4 Document

# data[].attributes.headline
นางสาวบุปผา ยีดำ

# data[].attributes.subject
นางสาวบุปผา ยีดำ

# data[].attributes.headline
น.ส ภาณุมาศ เกริกชัยวัน

# data[].attributes.subject
น.ส ภาณุมาศ เกริกชัยวัน

# data[].attributes.headline
ชิ้นที่2 ค้นหาตัวอย่างงานกราฟิก

# data[].attributes.subject
ชิ้นที่2 ค้นหาตัวอย่างงานกราฟิก

# data[].attributes.body
ให้นักศึกษาหาตัวอย่างงานกราฟิกที่มีการจัดวางองค์ประกอบศิลป์ที่ไม่เหมาะสม คนละ 1 ตัวอย่าง พร้อมให้ข้อเสนอแนะว่าควรปรับปรุงแก้ไขอย่างไรให้งานกราฟิกนั้นมีการจัดวางองค์ประกอบศิลป์ที่เหมาะสม

# data[].attributes.headline
นางสาวบุปผา ยีดำ

# data[].attributes.subject
นางสาวบุปผา ยีดำ

# data[].attributes.headline
ชิ้นที่3 กระบวนการในการออกแบบกราฟิก

# data[].attributes.subject
ชิ้นที่3 กระบวนการในการออกแบบกราฟิก

# data[].attributes.body
หากต้องการออกแบบงานกราฟิก 1 ชิ้น ท่านจะมีกระบวนการในการออกแบบกราฟิกอย่างไร จงอธิบาย

# data[].attributes.body
ออกแบบอินโฟกราฟิก 1ชิ้น ขนาด A4 ไม่จำกัดโปรแกรมในการออกแบบ

# data[].attributes.body
https://youtu.be/VRzH_U-cgNY

https://youtu.be/k4G14I9urjo

# data[].attributes.body
https://youtu.be/5NOIUAV8jFs

https://youtu.be/0YeJvXefOPE

https://youtu.be/dVwHYtqVpS4

https://youtu.be/n-ilQolqsJs

# data[].attributes.body
https://youtu.be/K9jf755tlP4

# data[].attributes.body
https://youtu.be/T360kkC6y8E https://youtu.be/DfIucWChmz0 https://youtu.be/B4x4GXDn_F0 https://youtu.be/uG5DyoiHpGc

# data[].attributes.body
https://youtu.be/eRgcpquByaE

https://youtu.be/ZFajpI4KRhI

https://youtu.be/DoAQX3ICz_U

https://youtu.be/YNGQJkwMAxg

https://youtu.be/JpXVIKlbF0I

# data[].attributes.body
https://youtu.be/6XFbQwwGA8s

https://youtu.be/xB0A3pUFq6E

https://youtu.be/litVUAK9pX0

https://youtu.be/Gscnl3r1QPM

https://youtu.be/kqoUg10o2po

https://youtu.be/suGRAk8Ptr8

https://youtu.be/SECCdK2Defg

https://youtu.be/SyziZcK1O6o

# data[].attributes.attachment_link.title
[SWU017] บทที่ 4.1 ความหมายและองค์ประกอบของอินโฟกราฟิก

# data[].attributes.body
https://youtu.be/__y37dPG2tw

https://youtu.be/NJ4PlIoLC3A

https://youtu.be/dktBtQ7JRpM

https://youtu.be/zpOlHcon8u0

https://youtu.be/U767T-LsIGQ

https://youtu.be/m3khe3BDh8w

https://youtu.be/pmbVs3U4yBc

# data[].attributes.attachment_link.title
[SWU017] บทที่ 5.1 ความหมายและความสำคัญของสื่อสิ่งพิมพ์

# data[].attributes.body
https://youtu.be/3qDy-MISojA

https://youtu.be/bJHdIfBNG58

https://youtu.be/JUpu0Hi4UE4

# data[].attributes.attachment_link.title
[SWU017] บทที่ 6.1 กราฟิกสำหรับสื่ออิเล็กทรอนิกส์และงานมัลติมีเดีย

# data[].attributes.headline
นางสาวอธิตยา หว่างรักษาวงษ์

# data[].attributes.subject
นางสาวอธิตยา หว่างรักษาวงษ์

# data[].attributes.headline
ชิ้นที่5 สร้างชิ้นงานกราฟิกสำหรับสื่อสิ่งพิมพ์

# data[].attributes.subject
ชิ้นที่5 สร้างชิ้นงานกราฟิกสำหรับสื่อสิ่งพิมพ์

# data[].attributes.body
ให้ทุกท่านออกแบบโปสเตอร์เพื่อการศึกษา ขนาด A3 ด้วยโปรแกรมคอมพิวเตอร์กราฟิก แล้วบันทึกเป็นไฟล์ .JPG

# data[].attributes.headline
น.ส ภาณุมาศ เกริกชัยวัน

# data[].attributes.subject
น.ส ภาณุมาศ เกริกชัยวัน

# data[].attributes.attachment_link.title
สีชมพู สีเบจ น่ารัก ภาพประกอบ พื้นหลัง กรอบใบงาน ขอบกระดาษ ขนาด A4

# data[].attributes.headline
นางสาวอธิตยา หว่างรักษาวงษ์

# data[].attributes.subject
นางสาวอธิตยา หว่างรักษาวงษ์

# data[].attributes.attachment_link.title
Green Yellow and Pink Playful Cute School Classroom Newsletter

# data[].attributes.headline
น.ส ภาณุมาศ เกริกชัยวัน 

# data[].attributes.subject
น.ส ภาณุมาศ เกริกชัยวัน 

# data[].attributes.headline
น.ส ภาณุมาศ เกริกชัยวัน

# data[].attributes.subject
น.ส ภาณุมาศ เกริกชัยวัน

# data[].attributes.headline
เบญจวรรณ เพ็ชระ

# data[].attributes.subject
เบญจวรรณ เพ็ชระ

# data[].attributes.headline
ชิ้นที่6 ค้นหาตัวอย่างของการออกแบบกราฟิกสำหรับเว็บไซต์ที่ดี

# data[].attributes.subject
ชิ้นที่6 ค้นหาตัวอย่างของการออกแบบกราฟิกสำหรับเว็บไซต์ที่ดี

# data[].attributes.body
ให้ทุกท่านค้นหาตัวอย่างของการออกแบบกราฟิกสำหรับเว็บไซต์ที่ดีมาคนละ 1 ตัวอย่าง โดย Capture หน้าจอเว็บไซตน์นั้นมา และระบุ URL ของเว็บไซต์นั้น พร้อมอธิบายลักษณะของการออกแบบกราฟิกที่ดีของเว็บไซต์นั้นประกอบ

# data[].attributes.headline
นางสาวบุปผา ยีดำ

# data[].attributes.subject
นางสาวบุปผา ยีดำ

# data[].attributes.headline
นางสาวบุปผา ยีดำ

# data[].attributes.subject
นางสาวบุปผา ยีดำ

# data[].attributes.headline
นางสาวอธิตยา หว่างรักษาวงษ์

# data[].attributes.subject
นางสาวอธิตยา หว่างรักษาวงษ์

# data[].attributes.headline
น.ส ภาณุมาศ เกริกชัยวัน 

# data[].attributes.subject
น.ส ภาณุมาศ เกริกชัยวัน 

# data[].attributes.headline
เบญจวรรณ เพ็ชระ

# data[].attributes.subject
เบญจวรรณ เพ็ชระ

# data[].attributes.headline
นางสาวอธิตยา หว่างรักษาวงษ์

# data[].attributes.subject
นางสาวอธิตยา หว่างรักษาวงษ์

# data[].attributes.headline
เบญจวรรณ  เพ็ชระ

# data[].attributes.subject
เบญจวรรณ  เพ็ชระ

# data[].attributes.attachment_link.title
ชิ้นงานที่5งานกราฟิก

# data[].attributes.headline
เบญจวรรณ เพ็ชระ

# data[].attributes.subject
เบญจวรรณ เพ็ชระ

# data[].attributes.headline
น.ส.พิมพ์ภรณ์ ลิมปนิติกุล

# data[].attributes.subject
น.ส.พิมพ์ภรณ์ ลิมปนิติกุล

# data[].attributes.attachment_caption
น.ส.พิมพ์ภรณ์ ลิมปนิติกุล

# data[].attributes.headline
น.ส.พิมพ์ภรณ์ ลิมปนิติกุล

# data[].attributes.subject
น.ส.พิมพ์ภรณ์ ลิมปนิติกุล

# data[].attributes.headline
นางสาว ธณัฐชา เอี่ยมประมูล

# data[].attributes.subject
นางสาว ธณัฐชา เอี่ยมประมูล

# data[].attributes.headline
นางสาว ธณัฐชา เอี่ยมประมูล

# data[].attributes.subject
นางสาว ธณัฐชา เอี่ยมประมูล

# data[].attributes.attachment_caption
น.ส.พิมพ์ภรณ์ ลิมปนิติกุล

# data[].attributes.headline
น.ส.พิมพ์ภรณ์ ลิมปนิติกุล

# data[].attributes.subject
น.ส.พิมพ์ภรณ์ ลิมปนิติกุล

# data[].attributes.headline
เบญจวรรณ  เพ็ชระ

# data[].attributes.subject
เบญจวรรณ  เพ็ชระ

# data[].attributes.headline
ชินวัฒน์ สืบเสนาะ

# data[].attributes.subject
ชินวัฒน์ สืบเสนาะ

# data[].attributes.headline
นางสาวรัตนาภรณ์ โชระเวก

# data[].attributes.subject
นางสาวรัตนาภรณ์ โชระเวก

# data[].attributes.headline
น.ส.พิมพ์ภรณ์ ลิมปนิติกุล

# data[].attributes.subject
น.ส.พิมพ์ภรณ์ ลิมปนิติกุล

# data[].attributes.headline
นางสาว ธณัฐชา เอี่ยมประมูล

# data[].attributes.subject
นางสาว ธณัฐชา เอี่ยมประมูล

# data[].attributes.headline
น.ส.พิมพ์ภรณ์ ลิมปนิติกุล

# data[].attributes.subject
น.ส.พิมพ์ภรณ์ ลิมปนิติกุล

# data[].attributes.headline
ชินวัฒน์ สืบเสนาะ

# data[].attributes.subject
ชินวัฒน์ สืบเสนาะ

# data[].attributes.headline
นาย ชินวัฒน์ สืบเสนาะ

# data[].attributes.subject
นาย ชินวัฒน์ สืบเสนาะ

# data[].attributes.attachment_link.title
วิชาการสร้างเว็บไซต์.ชินวัฒน์

# data[].attributes.headline
ชินวัฒน์ สืบเสนาะ

# data[].attributes.subject
ชินวัฒน์ สืบเสนาะ

# data[].attributes.headline
นาย ชินวัฒน์ สืบเสนาะ

# data[].attributes.subject
นาย ชินวัฒน์ สืบเสนาะ

# data[].attributes.headline
ชินวัฒน์ สืบเสนาะ

# data[].attributes.subject
ชินวัฒน์ สืบเสนาะ

# data[].attributes.headline
นางสาว ธณัฐชา เอี่ยมประมูล

# data[].attributes.subject
นางสาว ธณัฐชา เอี่ยมประมูล

# data[].attributes.headline
นางสาวบุปผา ยีดำ

# data[].attributes.subject
นางสาวบุปผา ยีดำ

# data[].attributes.attachment_caption
น.ส.พิมพ์ภรณ์ ลิมปนิติกุล

# data[].attributes.headline
น.ส.พิมพ์ภรณ์ ลิมปนิติกุล

# data[].attributes.subject
น.ส.พิมพ์ภรณ์ ลิมปนิติกุล

# data[].attributes.headline
นางสาวอธิตยา หว่างรักษาวงษ์

# data[].attributes.subject
นางสาวอธิตยา หว่างรักษาวงษ์

# data[].attributes.headline
นางสาวบุปผา ยีดำ

# data[].attributes.subject
นางสาวบุปผา ยีดำ

# data[].attributes.headline
นางสาว ธณัฐชา เอี่ยมประมูล

# data[].attributes.subject
นางสาว ธณัฐชา เอี่ยมประมูล

# data[].attributes.headline
นางสาวอธิตยา หว่างรักษาวงษ์

# data[].attributes.subject
นางสาวอธิตยา หว่างรักษาวงษ์

# data[].attributes.attachment_link.title
ส้ม เหลือง น่ารัก ขอบกระดาษ เอกสารขนาด A4

# data[].attributes.headline
นางสาวรัตนาภรณ์ โชระเวก

# data[].attributes.subject
นางสาวรัตนาภรณ์ โชระเวก

# data[].attributes.headline
นางสาวรัตนาภรณ์ โชระเวก 

# data[].attributes.subject
นางสาวรัตนาภรณ์ โชระเวก 

# data[].attributes.body
การออกแบบอินโนกราฟฟิก เรื่อง วิธีป้องกันโรคลมแดด

# data[].attributes.attachment_link.title
นางสาวรัตนาภรณ์ โชระเวก ปวส.2 คอมพิวเตอร์ธุรกิจ

# data[].attributes.headline
ธณัฐชา เอี่ยมประมูล

# data[].attributes.subject
ธณัฐชา เอี่ยมประมูล

# data[].attributes.headline
นายธนกฤษณ์ ตานี

# data[].attributes.subject
นายธนกฤษณ์ ตานี

# data[].attributes.headline
นางสาวรัตนาภรณ์ โชระเวก

# data[].attributes.subject
นางสาวรัตนาภรณ์ โชระเวก

# data[].attributes.headline
น.ส.สุทธิดา นิกาเจ การ

# data[].attributes.body
น.ส.สุทธิดา นิกาเจ การออกแบบอินโฟกราฟฟิก 4 วิธีการทำงานดีขึ้น

# data[].attributes.headline
นางสาวอภิญญา สีลากุล ปวส.2 คอมพิวเตอร์

# data[].attributes.subject
นางสาวอภิญญา สีลากุล ปวส.2 คอมพิวเตอร์

# data[].attributes.headline
เบญจวรรณ  เพ็ชระ

# data[].attributes.subject
เบญจวรรณ  เพ็ชระ

# data[].attributes.headline
นางสาวรัตนาภรณ์ โชระเวก 

# data[].attributes.subject
นางสาวรัตนาภรณ์ โชระเวก 

# data[].attributes.attachment_link.title
Poster A3 ข้อมูล รีไซเคิล แยกขยะ รักษ์โลก เรียบง่าย น่ารัก ภาพประกอบ สีเขียว สีเหลือง

# data[].attributes.headline
นางสาวรัตนาภรณ์ โชระเวก

# data[].attributes.subject
นางสาวรัตนาภรณ์ โชระเวก

# data[].attributes.headline
น.ส. สุทธิดา นิกาเจ

# data[].attributes.subject
น.ส. สุทธิดา นิกาเจ

# data[].attributes.headline
นางสาวอภิญญา สีลากุล ปวส.2 คอมพิวเตอร์

# data[].attributes.subject
นางสาวอภิญญา สีลากุล ปวส.2 คอมพิวเตอร์

# data[].attributes.headline
นายธนกฤษณ์ ตานี

# data[].attributes.subject
นายธนกฤษณ์ ตานี

# data[].attributes.headline
นายธนกฤษณ์ ตานี

# data[].attributes.subject
นายธนกฤษณ์ ตานี

# data[].attributes.headline
นายธนกฤษณ์ ตานี

# data[].attributes.subject
นายธนกฤษณ์ ตานี

# data[].attributes.headline
นายธนกฤษณ์ ตานี

# data[].attributes.subject
นายธนกฤษณ์ ตานี

# data[].attributes.headline
นายธนกฤษณ์ ตานี

# data[].attributes.subject
นายธนกฤษณ์ ตานี

# data[].attributes.headline
นางสาวอภิญญา มาลากุล ปวส.2 คอมพิวเตอร์

# data[].attributes.subject
นางสาวอภิญญา มาลากุล ปวส.2 คอมพิวเตอร์

# data[].attributes.headline
นางสาวอภิญญา สีลากุล ปวส.2 คอมพิวเตอร์

# data[].attributes.subject
นางสาวอภิญญา สีลากุล ปวส.2 คอมพิวเตอร์

# data[].attributes.headline
นางสาวอภิญญา สีลากูล ปวส.2 คอมพิวเตอร์

# data[].attributes.subject
นางสาวอภิญญา สีลากูล ปวส.2 คอมพิวเตอร์

# data[].attributes.headline
นางสาวอภิญญา สีลากุล ปวส.2 คอมพิวเตอร์ 

# data[].attributes.subject
นางสาวอภิญญา สีลากุล ปวส.2 คอมพิวเตอร์ 

# data[].attributes.body
ด้านบนคือ ภาพตัวอย่าง หนึ่งของเว็บไซต์ที่มีการออกแบบกราฟิกดีเยี่ยมในสไตล์มินิมอล (Minimalist Website Design) ที่นำมาจากแหล่งรวมเว็บไซต์ดีไซน์ยอดเยี่ยม Pixpa

รายละเอียดภาพตัวอย่าง (จาก Pixpa)

เว็บไซต์ของ Daniel Esprito ใช้รูปแบบกริด (minimalist grid pattern) ในการนำเสนอผลงานภาพถ่าย (photography portfolio)

ข้อความมีน้อยมาก (textual elements minimal) เน้นให้ภาพเป็นตัวเล่าเรื่องหลัก

Navigation bar ถูกออกแบบให้เข้าถึงง่าย ช่วยให้การนำทางเว็บไซต์สะดวกและไม่เสียสมาธิ

ตัวอย่างเพิ่มเติมที่แนะนำให้สำรวจ

หากคุณต้องการตัวอย่างเพิ่มเติม เพื่อเปรียบเทียบและเป็นแรงบันดาลใจด้านการออกแบบเว็บไซต์ที่ดี:

Karlie Kloss

ใช้โทนสีขาว–ดำสบายตา พร้อมจุดสีชมพูเล็กน้อยที่ช่วยสร้างความโดดเด่น

มีเอฟเฟกต์ parallax เล็กๆ ที่เพิ่มความรู้สึกทันสมัยโดยไม่เกินเลย (wix.com)

Danny Getz

เปิดหน้าแรกด้วยภาพเดียว แล้วมีภาพอื่นๆ “ตกลงมา” เหมือนพลิกผ่านกลุ่มรูป

เมื่อคลิก “Enter” จะมีเมนู sidebar เลื่อนเข้ามา พร้อมให้เห็นเทคนิค minimalist ในการจัดวางรูปและเมนู (wix.com)

Conqr

ใช้พื้นหลังสีดำเน้นความหรูหรา

เลือกรูปภาพสำคัญมาแสดงเพียงไม่กี่รูปบนหน้า ทำให้แต่ละภาพมีความหมายและโดดเด่นยิ่งขึ้น (wix.com)

Avec Clyde

แอสโทเรียลเว็บไซต์แฟชั่นที่เน้นความเรียบง่าย

ใช้ภาพถ่ายแนวธรรมชาติ, ฟอนต์สะอาด, และโทนสีเรียบแต่สื่อสารได้ชัดเจนถึงแบรนด์ (wix.com)

Annie’s Little Valley

จัดวางผลงานในโมดูลลาร์กริด ที่เว้นช่องว่าง (white space) ชัดเจน

เลือกโทนสีที่เหมาะกับภาพขนมเพื่อให้เกิดสัมผัสที่อบอุ่นและน่าจดจำ (wix.com)

สรุป “ลักษณะของการออกแบบกราฟิกเว็บไซต์ที่ดี”

จากตัวอย่างทั้งหมด เราสรุปแนวทางร่วมที่ทำให้เว็บไซต์มีดีไซน์โดดเด่นและใช้งานดี ดังนี้:

1. กระชับ เรียบง่าย (Minimal & Clean Layout)
ไม่ใช้รายละเอียดหรือองค์ประกอบเกินความจำเป็น เพื่อให้ผู้ชมโฟกัสกับสิ่งสำคัญเท่านั้น (wix.com, Awwwards)

2. เว้น White Space อย่างเหมาะสม
ช่วยให้ดูสะอาดตา และเพิ่ม readability ของเนื้อหาหลัก (wix.com)

3. โทนสีจำกัด (Limited Color Palette)
ใช้สีไม่เกิน 2–3 สีหลัก เพื่อสร้างความสอดคล้องและอารมณ์ที่ต้องการ (wix.com)

4. เน้น Typographic Consistency
ใช้ฟอนต์ที่อ่านง่ายและสื่อถึงแบรนด์ เช่น Sans-serif หรือ Serif ที่เหมาะสมกับกลุ่มเป้าหมาย (wix.com)

5. Navigation ที่ชัดเจน แต่ไม่เกะกะ
เช่น Hamburger menu หรือ sidebar ที่เข้าถึงง่าย แม้ในหน้า minimalist (wix.com, blacksmith.agency)

6. ผสมลูกเล่นเรียบหรูเล็กน้อย (Subtle Effects)
เช่น parallax หรือ hover effect ที่ไม่เบียดบังเนื้อหา แต่เพิ่มความน่าสนใจ (wix.com)

7. ตอบโจทย์การใช้งานเร็ว–ใช้ง่าย
เว็บไซต์โหลดเร็ว เห็นทันทีว่าเป็นเว็บเกี่ยวกับอะไร ใช้งานง่ายบนทุกอุปกรณ์ (wix.com, WebsiteSetup - How to Make a Website)