ผุ้ช่วยศาสตรจารย์ บัญญพนต์ พูลสวัสดิ์, วิทยาลัยครีเอทีฟดีไซน์แอนด์ฺ เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์, หลักการออกแบบ Visual Hierarchy และ Grid system ไปจนถึง Adobe Indesign

1. Visual Hierarchy
And Grid System.
การออกแบบเพื่อ
สร้างแรงบันดาลใจ 3
ผู้ช่วยศาสตราจารย์ บัญญพนต์ พูลสวัสดิ์

2. ภาพนี้ชื่ออะไร?
แล้วหมายถึงอะไร
เกี่ยวอะไรกับการเรียนคลาสนี้

3. ภาพนี้ชื่อ
ฝั่งอเมริกาในยุคสมัยที่อเมริกันชนถวิลหาชีวิตที่
พอเพียงในชนบท ประหนึ่งชุมชม อามิช ศิลปินไส้แห้ง
อย่าง Grant Wood เองก็เป็นหนึ่งในผู้ที่ค้นหาแรง
บันดาลใจของการเฟ้นหาชีวิตที่แสนปกติแบบแนวคิด
American Dream ด้วยช่วงที่ Grant Wood กาลังอยู่
ในช่วงที่ชีวิตตกยาก เขาขับผ่านเมืองเล็กๆ เมืองหนึ่งที่
ใกล้ภูมิลาเนาของเราที่ชื่อว่า Eldon
American Gothic

4. ภาพนี้ชื่อ
ฝั่งอเมริกาในยุคสมัยที่อเมริกันชนถวิลหาชีวิตที่
พอเพียงในชนบท ประหนึ่งชุมชม อามิช ศิลปินไส้แห้ง
อย่าง Grant Wood เองก็เป็นหนึ่งในผู้ที่ค้นหาแรง
บันดาลใจของการเฟ้นหาชีวิตที่แสนปกติแบบแนวคิด
American Dream ด้วยช่วงที่ Grant Wood กาลังอยู่
ในช่วงที่ชีวิตตกยาก เขาขับผ่านเมืองเล็กๆ เมืองหนึ่งที่
ใกล้ภูมิลาเนาของเราที่ชื่อว่า Eldon
American Gothic
1
2
3
4

5. ภาพนี้ชื่อ
ฝั่งอเมริกาในยุคสมัยที่อเมริกันชนถวิลหาชีวิตที่
พอเพียงในชนบท ประหนึ่งชุมชม อามิช ศิลปินไส้แห้ง
อย่าง Grant Wood เองก็เป็นหนึ่งในผู้ที่ค้นหาแรง
บันดาลใจของการเฟ้นหาชีวิตที่แสนปกติแบบแนวคิด
American Dream ด้วยช่วงที่ Grant Wood กาลังอยู่
ในช่วงที่ชีวิตตกยาก เขาขับผ่านเมืองเล็กๆ เมืองหนึ่งที่
ใกล้ภูมิลาเนาของเราที่ชื่อว่า Eldon
American Gothic

6. American Gothic
โดยศิลปิน Grant Wood
American Gothicความหมายของภาพนี้คืออะไร
อันที่จริงแล้วที่มาของภาพนี้นั้นมันแสนธรรมดา
จุดเด่นจริงๆ หรือความตั้งใจของ Grant Wood นั้น
แท้จริงคือบ้านทรงกอธิคที่อยู่ข้างหลังของชาวไร่ผัว
เมียทั้งสองต่างหาก
นั่นเพราะช่วงที่ Grant Wood เดินทางอยู่ที่ Elden
บังเอิญที่เขามองเห็นและรู้สึกชอบใจรูปแบบของ
บ้านสีขาวทรงกอธิคที่ดูหรูหราทรงสง่าที่ปรากฏบน
ชนบทรกร้างไกลืนเที่ยง โดยแว่บแรกที่เห็นเขาได้
ทาการร่างแบบคร่าวๆ ของบ้านหลังนี้ เขาจึงวาด
บ้านหลังนี้ขึ้น ซึ่งภายหลัง Grant Wood กลับไป
ติดต่อเจ้าของบ้าน ครอบครัวตระกูล Jones ซึ่ง
ประกอบด้วย Gideon และ Mary Hart Jones ใน
การขอวาดภาพบ้านหลังนี้อย่างละเอียด

7. American Gothic
The kind of people I fancied
should live in that house.
ที่มาของชาวไร่ผัวเมียที่ปรากฏในภาพด้วยหน้าตา
จริงจังขึงขังที่ภายหลังสร้างเสห่น์ให้กับภาพนี้นั้น
Grant Wood กลับมาวาดใส่เพิ่มเข้าไปภายหลัง
โดยมาจากแนวคิดในหัวของ Grant Wood ที่ว่า

8. American Gothic
Lucky!
ภาพวาด American Gothic นั้น Grant Wood ได้ส่งรูปนี้เข้าร่วมงานประกวด
ศิลปะของสถาบัน The Art Institute of Chicago ในปี 1930 ชนะรางวัลเหรียญ
ทองแดงพร้อมได้รับเงินรางวัล 300 เหรียญสหรัฐฯ อาจจะดูไม่มากมาย
ชื่อเสียงของ Grant Wood คือ
รางวัลยิ่งใหญ่สาหรับเขา เพียง
เวลาคืนเดียว สถาบันThe Art
Institute of Chicago ได้ซื้อ
ผลงาน American Gothic ของ
เขามาอยู่คอลเล็กชั่นของ
พิพิธภัณฑ์

9. สาหรับปริศนาของภาพนี้ที่เป็นเสน่ห์อันน่าขนลุก นั่นคือสีหน้า
และแววตาของชายหญิงที่ปรากฏในภาพ ว่านั่นคือการเยอะเย้ย
ถากถาง ความฝันของอเมริกัน หรือแท้จริงแล้วมันคือแววตา
มุ่งมั่นเพื่อบอกถึงชาวอเมริกันว่าในความยากพวกเราสามารถ
ต่อสู้และฝ่าฟันมันไปได้ ซึ่งนั่นก็กลายเป็นเป็นปริศนาของภาพที่
ชวนขนลุก หรือ สวยงามของ American Gothic

10. ทุกวันนี้ ภาพวาดชิ้นนี้ถูกยกยกให้กลายเป็น Mime ล้อเลียน และมี
การแต่งตัวไปยืนล้อเล่น แบบจริงจังมากมายโดยชาวอเมริกันเองซึ่งก็
กลายเป็นสีสัน? ทาให้ภาพ American Gothic ของ Grant Wood นี้
กลายเป็นตานานไปโดยปริยาย

11. ภาพนี้ชื่อ
ฝั่งอเมริกาในยุคสมัยที่อเมริกันชนถวิลหาชีวิตที่
พอเพียงในชนบท ประหนึ่งชุมชม อามิช ศิลปินไส้แห้ง
อย่าง Grant Wood เองก็เป็นหนึ่งในผู้ที่ค้นหาแรง
บันดาลใจของการเฟ้นหาชีวิตที่แสนปกติแบบแนวคิด
American Dream ด้วยช่วงที่ Grant Wood กาลังอยู่
ในช่วงที่ชีวิตตกยาก เขาขับผ่านเมืองเล็กๆ เมืองหนึ่งที่
ใกล้ภูมิลาเนาของเราที่ชื่อว่า Eldon
American Gothic
1
2
3
4

12. Visual Hierarchy
สาหรับงานออกแบบ และ การออกแบบ UX/UI
ในเชิงการออกแบบ User Experience และ User Interface
ใช้เพื่อการจัดลาดับความสาคัญของการเข้าถึง ข้อมูล
(Information) ผ่านการมองเห็นโครงสร้าง (Structure) และ
เนื้อหา (Content) ตามบริบท (Context) ของผู้ใช้งาน (User)
โดยมีพื้นฐานมาจากธรรมชาติการรับรู้ผ่านสายตาของมนุษย์
และการประมวลผลของสมอง
ตัวอย่างในบทเรียนของเพจ Design Stack24

13. Visual Hierarchy
สาหรับงานออกแบบ และ การออกแบบ UX/UI

14. Visual Hierarchy
สาหรับงานออกแบบ และ การออกแบบ UX/UI

15. Visual Hierarchy
สาหรับงานออกแบบ และ การออกแบบ UX/UI การวาง Space
และ Size เป็นเรื่อง
ที่ ต้ อ ง ใ ห้
ความสาคัญ

16. Visual Hierarchy
สาหรับงานออกแบบ และ การออกแบบ UX/UI
การวาง Space และ Size เป็น
เรื่องที่ต้องให้ความสาคัญ
Size การกาหนด Size จะมีผลต่อการดึงความ
สนใจของผู้ใช้ อย่าง หนังสือพิมพ์ในส่วนของหัว
ข่าวจะใช้ตัวหนังสือตัวใหญ่ ใช้เพื่อดึงความ
สนใจของผู้อ่าน และเป็นเนื้อหาสาคัญที่ผู้อ่าน
ควรจะรู้
คุณจะอ่านตรงนี้
แล้วค่อยมาอ่านตรงนี้
หลังจากนั้นจะมาอ่านตรงนี้
แล้วสุดท้ายก็จะมาอ่านตรงนี้

17. Visual Hierarchy
สาหรับงานออกแบบ และ การออกแบบ UX/UI
Color - สีก็เป็นส่วนนึงของการดึงความ
ใจจากผู้ใช้ และยังรวมถึงการใช้สีใน
การสื่อความหมายของผลิตภัณฑ์และ
โปรดัค
คุณจะอ่านตรงนี้
แล้วพวกมึงก็จะเลิกอ่านตั้งแต่ตรงนี้
ถ้ามังอ่านได้ถึงตรงนี้แปลว่ามึงพยายามมาก
ไปพยายามเร่องอื่นนะไอ้ฟาย

18. Visual Hierarchy
สาหรับงานออกแบบ และ การออกแบบ UX/UI
Contrast - Contrast จะช่วยแยกความ
แตกต่างของ element ในแต่ละส่วน
ของการดีไซน์

19. Visual Hierarchy
สาหรับงานออกแบบ และ การออกแบบ UX/UI

20. Visual Hierarchy
สาหรับงานออกแบบ และ การออกแบบ UX/UI
Alignment - ใช้ในการเรียงลาดับ
ความสาคัญของเนื้อหาในดีไซน์
เช่น หน้าล็อกอิน ต้องมีช่องที่ใส่
Username ใส่ password และ
ปุ่มล็อกอิน ช่วยให้ผู้ใช้เข้าใจได้ว่า
เขาต้องทาอะไรก่อน
ตัวอย่าง F และ Z

21. Visual Hierarchy
สาหรับงานออกแบบ และ การออกแบบ UX/UI
Repetition การRepeat
style ช่วยให้ผู้ใช้รู้และ
เข้าใจได้ว่าคอนเทนต์นี้
มีความเกี่ยวข้องกัน

22. Visual Hierarchy
สาหรับงานออกแบบ และ การออกแบบ UX/UI
Proximity - ความสอดคล้องการ
ของดีไซน์ เช่น Header ต้องมี
Subheader ด้วย

23. Visual Hierarchy
สาหรับงานออกแบบ และ การออกแบบ UX/UI
Whitespace
การเพิ่มช่องว่าง
ระหว่าง Element
ช่วยให้ผู้เข้าใจได้ว่า
Element นี้มีความ
แตกต่างกัน

24. Visual Hierarchy
สาหรับงานออกแบบ และ การออกแบบ UX/UI
Texture and Style
การใช้ Texture and Style นอกจาก
ช่วยในเรื่องของการเรียงลาดับ
ความสาคัญของ Content แล้ว
นอกจากนี้ การใช้ Font บอกได้ถึง
Mood & tone ของ Design อีกด้วย

25. Grid System
สาหรับงานออกแบบ

26. Grid System
สาหรับงานออกแบบ

27. Grid System
สาหรับงานออกแบบ

28. Grid System
สาหรับงานออกแบบ

29. Grid System
สาหรับงานออกแบบ

30. เปิดโปรแกรม Adobe Indesign

31. สื่อการสอนการใช้โปรแกรม Adobe Indesign
ฝึกปฏิบัติส่งงาน ในสัปดาห์
Tutorial 1 ให้ทาเหมือนแบบที่ผมออกแบบไว้ .pdf
Tutorial 2-5 ปรับตามความต้องการ
DOWNLOAD: https://drive.google.com/drive/folders/0B08PZSOd4UmOfldFcUI4Y0FiO
WJrM2dtbU5ITVM0QXRiaFBNZ08yeEtZeFRmd1VxMEJoc1k

32. Mini
Project
Re-Magazine
1. จับกลุ่มจานวน 4 คน (ขาดปัดขึ้น)
2. วางตาแหน่ง บรรณาธิการ, Art Director, Design
3. สร้าง Formstorming Concept นิตยสารที่
ต้องการจะทา แบบ E-Magazine
4. ในนิตยสารต้องมีทั้งหมด 5 คอลัมภ์
5. เนื้อหาในนิตยสารสามารถนาจากในอินเตอร์เน็ต
หรือจะเป็น Content เขียนใหม่ถ่ายภาพใหม่ก็ได้
แต่ต้องอ้างอิงที่มาของแหล่งข้อมูล
6. ออกแบบหน้าปก, รองปก รายชื่อสานักพิมพ์
สมมติ, คานาบรรณาธิการ, สารบัญ,ปกหลัง
7. ใส่โฆษณาลงไปในนิตยสาร จานวน 2 โฆษณา
หน้าไหนก็ได้
8. ระยะเวลา 15 วันในการส่งใช้หลัก Grid System
และองค์ประกอบศิลปะทั้งหมดใช้ให้เป็ น
ประโยชน์ (คะแนนรวม 2 สัปดาห์ ของ 3-4)
9. อย่าโหลด Template Indesign มาส่งมันกดดูก็รู้
ถ้าแค่นี้ยังโหลดมาขอแนะนา ยาฆ่าหญ้าดื่มง่ง่าย
*หมายเหตุ: ใช้ Photoshop แต่งภาพ, illustrator ทา Art แต่จะไม่มีคาถามที่ไม่ฉลาดว่า ใช้โปรแกรมอื่น
จัดหน้าทาได้ไหม ปรากฏขึ้นใน comment และ facebook messenger ใครถามหัก -5

33. อย่าลืมจัดกลุ่มเตรียมจุลนิพนธ์ และแนวคิด
References พื้นฐานว่าจะทาอะไรเป็น Project จบ