PUNYAI Diary : Week 1 (5/08/2017)

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

ปันใหญ่เป็นหลักสูตรฝึกอบรมเพื่อปลุกปั้นและพัฒนา UI Designer ที่ไม่คิดค่าใช้จ่ายใด ๆ นำทีมโดยพี่หมูใหญ่ Khomsun Chaiwong, Graphic Designer เจ้าของโครงการ จากบริษัท 20Scoops CNX โดยมีพี่มิ้น Sansern Wutthirat และพี่เติ้ล Hanii เป็นผู้ช่วยสอน

โครงการปันใหญ่ได้ทำการประกาศรับสมัครและคัดเลือกผู้ที่มีความสนใจและตั้งใจอยากเรียนเป็น UI Designer ผ่านโจทย์การทำ User Interface แอปพลิเคชันรวมร้านอาหาร ได้ทำการคัดเลือกจากผลงานทั้งหมด เหลือเพียงห้าคนเพื่อรวมโครงการ โดยนัดหมายการเรียนในช่วงวันหยุดสุดสัปดาห์ เพื่อเอื้ออำนวยความสะดวกให้กับผู้ร่วมโครงการ

บทความนี้ ผู้เขียนบล็อกตั้งใจเขียนขึ้นมา เพื่อจดบันทึกเนื้อหาและข้อมูลที่น่าสนใจ สำหรับย้ำเตือนให้ผู้เขียนบล็อกเอง ได้กลับมาศึกษาทบทวนความรู้เป็นวัตถุประสงค์หลัก และเพื่อแบ่งปันความรู้ให้หลาย ๆ คนที่มีความใฝ่ฝันอยากเป็น UI Designer เช่นกันแต่ไม่มีโอกาสได้มาร่วมโครงการปันใหญ่ โดยหัวข้อเนื้อหาที่ได้เรียนกันในวันนี้สอนโดยพี่หมูใหญ่ ในเรื่อง Visual Hierarchy, Font และ Grid ไปดูกันเลยค่าาา 👇🏻

Visual Hierarchy

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

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

พี่หมูใหญ่ได้แนะนำหลักการง่าย ๆ อยู่ 6 ข้อ ที่สามารถช่วยนักออกแบบอย่างเรา ๆ ในการจัดการเรื่อง Visual Hierarchy ได้

(1) Page scanning patterns

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

Credit: https://public-media.interaction-design.org/images/uploads/d9c889f11d5bc5ada45fd52af515ab71.jpg

(2) Go big

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

from https://images-na.ssl-images-amazon.com/images/I/51z0LmYvFSL.jpg

(3) Space & texture

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

Credit: https://s-media-cache-ak0.pinimg.com/originals/e0/d6/38/e0d6385793c91cae55a995ac3ba228ac.jpg

(4) Typeface weight & pairing

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

(5) Color & tint

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

Credit: http://intours-dmc.com

(6) Direction

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

Credit: http://wcownews.typepad.com/.a/6a00d83451e32769e201b7c77aa99d970b-500wi

เราสามารถนำหลักเกณฑ์การให้คะแนน มาเป็นตัวช่วยในการดู Visual Hierarchy โดยมีวิธีการคือ หาตัวอักษรขนาดปกติให้เจอ ให้คะแนนเป็น 0 จากนั้นหาตัวอักษรที่มีขนาดใหญ่กว่าตัวอักษรปกติให้คะแนน +1 ใหญ่กว่าขึ้นไปอีก +2, +3 ตามลำดับ จากนั้น เหล่าตัวหนา, ตัวอักษรมีสีต่างออกไป, ตัวพิมพ์ใหญ่, ตัวเอียง, ขีดเส้นใต้ และ Highlight ให้บวกคะแนนไปอย่างละ 1 คะแนน เมื่อให้คะแนนทุกแบบเสร็จ ให้ทำการรวมคะแนนของแต่ละแบบอักษร คะแนนจากมากไปน้อย จะแสดงให้เห็นถึงความสำคัญจากหลักไปรอง ในหน้าบทความนั้น ๆ ที่นักออกแบบต้องการสื่อ ซึ่งเรานำไปประยุกต์ใช้ในงานของตัวเองได้ เพื่อดูว่าเราได้ออกแบบการนำเสนอเนื้อหา สัมพันธ์กับการจัดลำดับความสำคัญที่ต้องการแล้วหรือยัง

Credit: https://www.pinterest.com/pin/373939575284230109/ เป็นการใส่คะแนนให้กับตัวอักษร โดยเริ่มจากให้คะแนนตัวอักษรปกติเป็น 0 และอื่น ๆ ตามเกณฑ์ข้างต้น

Font

เหมือนที่ใครเคยว่าไว้ เลือกอักษร “ใช่ ” มีชัยไปกว่าครึ่ง

แบบอักษรที่มีทั้ง Serif(มีเชิง) และ Sans Serif(ไม่มีเชิง) ผู้เขียนจะไม่ขอลงรายละเอียดถึงข้อมูลและความเป็นมา เอาเป็นว่า.. เราควรเลือกแบบอักษรให้ตรงกับงานที่ใช้ เพื่อให้งานออกมาดูดี กลมกลืน เช่น ใช้แบบอักษรหัวกลม มน ในงานโฆษณาแชมพูสระผมสำหรับเด็ก เพื่อให้ดูมีความเป็นเด็ก ไม่อันตราย น่ารักสดใส หลีกเลี่ยงฟอนต์เหลี่ยม หรือมีเชิงแบบ Old Style ที่อาจทำให้งานโฆษณาดูแปลกออกไป ทั้งนี้ขึ้นอยู่กับประสบการณ์ และการพิจารณาของผู้ออกแบบในการเลือกใช้อีกที

แต่ข้อปฏิบัติที่เราควรรู้ไว้ คือ ✨

  • อย่าขยาย / บีบอัดฟอนต์ด้วยตนเอง
  • ระยะเว้นบรรทัด หรือ Line height ควรมีค่าอย่างน้อย 120% ของขนาดอักษรสำหรับการจัดวางข้อความปกติที่ไม่ใช่ Swiss Style หรือการออกแบบพิเศษอื่น ๆ
  • การทำงานกับฟอนต์ที่ปลอดภัยที่สุด คือการพิมพ์ออกมาดูบนกระดาษจริง จะได้เห็นว่าขนาดหรือรูปแบบที่เลือกใช้ สามารถอ่านออกได้ และตรงตามที่เราเห็นในหน้าจอหรือเปล่า
  • ฟอนต์สำหรับการอ่าน สำหรับภาษาไทยไม่ควรให้น้อยกว่า 2 mm และภาษาอังกฤษไม่ควรให้น้อยกว่า 1.8 mm
  • Kerning หรือช่องไฟระหว่างตัวอักษรหรือคำ ควรจัดให้พอดี ไม่ชิดหรือห่างจนเกินไป เคล็ดลับในการตรวจสอบคือ หรี่ตาลง 😑👉🏻 ลองมองให้เห็นข้อความเป็นแถบดำ ๆ จากนั้นดูว่าช่องว่างต่าง ๆ พอดีหรือยัง มีฟันหลอเกิดขึ้นระหว่างประโยคไหนหรือเปล่า ก็เข้าไปปรับให้ระยะห่างพอดี
Credit: PUNYAI Week 1 Presentation by 
Khomsun Chaiwong | ภาพซ้ายที่ถูกวงด้วยวงกลมสีแดง คือฟันหลอที่พบในบทความ

Grid

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

Golden Ratio หรือสัดส่วนทองคำ ที่ถูกคิดค้นขึ้นจากการคำนวนทางคณิตศาสตร์โดย เลโอนาร์โด ฟีโบนัชชี เพื่อทำให้งานออกแบบมีสัดส่วนที่สวยงาม อิงตามสัดส่วนที่เราสามารถพบเห็นได้ตามธรรมชาติ เช่น ในก้นหอย ใบไม้ หรือดอกไม้

Credit: http://doreydesigngroup.com/sites/default/files/twitter-golden-ratio-spiral.jpg

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

Credit: http://ignitecreatives.com/wp-content/uploads/2015/03/unsemantic-grid.png

Grid for layout ที่สามารถพบได้ในงานออกแบบสิ่งพิมพ์ นิตยสาร บทความต่าง ๆ ที่ไม่จำเป็นต้องใช้เส้นตารางรูปแบบเดียวในการจัดวางและนำเสนอข้อมูล แต่สามารถซ้อนทับกันหลาย ๆ Grid เพื่อให้ได้งานสิ่งพิมพ์ที่มีเอกลักษณ์เป็นของตัวเองได้

Credit: https://ivylailt.files.wordpress.com/2012/12/screen-shot-2012-12-13-at-5-38-51-pm.png?w=540&h=384

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


จบแล้วค่ะ☺️ สรุปเนื้อหาแบบย่อ ๆ จากการเรียนและ Workshop สัปดาห์แรกกับพวกเราปันใหญ่ ในนามบ.ทเวนตี้ สกู๊ป ซีเอ็นเอ็กซ์ หนึ่งวันเต็ม ๆ กับความรู้แบบแน่นจัดเต็มกันเลยทีเดียว หวังว่าจะเป็นประโยชน์ต่อผู้ที่มีความสนใจในด้าน UI Design หากมีข้อสงสัยอะไรสามารถไปค้นคว้าเพิ่มเติมเอง.. เอ้ย😂 คอมเมนต์ไว้ใต้บทความเพื่อสอบถามหรือแนะนำได้นะคะ

แล้วพบกันใหม่ใน PUNYAI Diary สัปดาห์ถัด ๆ ไป ขอบคุณค่าาา💛