ไม่มีพื้นฐาน Design แต่อยากออกแบบให้สวย ต้องทำยังไง

ไม่มีพื้นฐาน Design แต่อยากออกแบบให้สวย ต้องทำยังไง

ไม่มีพื้นฐาน Design แต่อยากออกแบบให้สวย ต้องทำยังไง

ก็ต้องไปเรียนพื้นฐานสิคะ 555555 เพราะก่อนจะ Break เราต้องรู้ Rule ก่อน วันนี้เจ้านายก็เลยส่งไปเรียน Design for non Designer ของ คุณโบว์ ลินดา ไกรวนิช ซึ่งจัดขึ้นที่ Hubba เอกมัยซอย 4

มาดูกันว่าที่เรียนมาทั้งวัน เราสามารถสรุปอะไรออกมาได้บ้าง

Basic Design Principle

สิ่งแรกที่เราได้เรียนในคลาสนี้ คือ พื้นฐาน ที่เป็นพื้นฐานสุด ๆ นั่นก็คือการจัดการข้อมูลให้เข้าใจง่ายและสวยงามมากขึ้นภายใน 4 ขั้นตอน

  1. Proximity คือการ Group สิ่งที่เกี่ยวข้องไว้ด้วยกัน และเหลือพื้นที่ว่างไว้บ้างก็ไม่เป็นไร เพราะ White Space is good.
  2. Alignment คือการจัดข้อมูลให้ Connect กัน โดยมี Grid เป็นตัวสร้างพลัง จะจัดชิดซ้ายหรือขวาก็ได้ โดยมือใหม่อย่างเรา 1 Align ต่อหน้าก็พอ (Align กลางเหมาะสำหรับงานออกแบบประเภท Cards หรือ Quote ที่ใช้ตัวหนังสือใหญ่ ๆ)
  3. Repetition คือการ Repeat ชิ้นงาน เพื่อให้ทุกอย่าง Relate กัน เราสามารถ Repeat ได้ทุกอย่างเลย ไม่ว่าจะเป็นตัวอักษร สี การจัดวาง และอื่น ๆ ซึ่งการ Repeat หรือขั้นตอนการ Repetition นี้ จะช่วยให้ผู้บริโภคจดจำงานของเราได้ง่ายขึ้น แต่ก็ระวังการ Repeat เยอะ ๆ จนรกและน่ารำคาญนะคะ
  4. Contrast คือการทำสิ่งที่จะเน้นให้แตกต่างนั้นโดดเด่นอย่างเห็นได้ชัด ชัดแบบไม่ต้องสังเกต เพื่อดึงดูดความสนใจ โดยสามารถทำได้ง่าย ๆ โดยเริ่มจากการปรับสี และขนาดตัวอักษร ซึ่งจะปรับ Contrast ทั้งที ก็ต้องไปให้สุด

Color Matters

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

เรียนรู้ ความหมายของสี เพราะเราจะได้เลือกใช้สีได้สอดคล้องกับความสามารถในการสื่ออารมณ์ของสีนั้น ๆ หลังจากนั้นค่อยเลือกสีให้เหมาะกับชิ้นงาน เช่น เลือกให้เหมาะกับเพศหรือวัยของกลุ่มเป้าหมายของเรา

การเลือกใช้สีมีกฎอยู่ 3 ข้อ คือ ถ้าต้องการเน้นให้คนอ่าน ก็ต้องเลือกสีให้อ่านออก อย่าลืม Corporate Identity ของแบรนด์หรือชิ้นงานด้วย สุดท้ายคือ ในงานหนึ่งชิ้นไม่ควรใช้เกิน 3-4 สี

เคล็ดลับดีไซเนอร์ ไม่ใช้สีดำ 100% เพราะจะทำให้ดวงตาของผู้อ่านล้าง่าย ดังนั้น ดีไซเนอร์ส่วนใหญ่จะเลือกใช้ค่าสีดำประมาณ 93-95%

สามารถเช็ค Contrast ของสีที่เราเลือกได้ที่  เว็บไซต์ Contrastchecker

Basic Typography

ช่วงบ่ายเรามาต่อกันที่เรื่องของตัวอักษร โดยเริ่มจาก The Anatomy of a Typeface เบสิคสำหรับ Designer ซึ่ง Non – Designer อย่างเรา รู้ไว้บ้างก็ดี

ต่อจากนั้นก็เป็นเรื่องของ Kerning คือการปรับ Space ระหว่างตัวอักษร หรือ Hierarchy คือการตั้งค่าของ Typo แต่ละจุดไว้ก่อน ซึ่งก็เป็นเรื่องของ Designer ที่เรารู้ไว้บ้างก็ดีอีกเหมือนกัน

มะ! มาในส่วนที่เราควรจะรู้จริง ๆ บ้าง นั่นก็คือเรื่องของ Reading คือการเลือกใช้ตัวอักษรให้เหมาะกับการอ่าน จำง่าย ๆ คือ Headline เด่น ตัวใหญ่ จะหนาหรือบางก็ได้ แต่ต้องไปให้สุด ส่วน Body เน้นตัวอักษรที่อ่านง่าย สบายตา และทั้ง Headline และ Body ควรมีความแตกต่างกัน โดยเฉพาะพวก Headline ที่ 2-3

ประเภทตัวอักษร แบ่งออกเป็น 3 แบบทั้งอักษรภาษาไทยและภาษาอังกฤษ นั่นก็คือ แบบมีหัว ที่เหมาะสำหรับการอ่าน แบบไม่มีหัว ที่เหมาะสำหรับเป็น Headline และแบบลายมือ ที่ดูหรูหรา เป็นทางการ

Font ที่เราเลือกใช้ ทั้งภาษาไทย และภาษาอังกฤษ ในงานชิ้นเดียวกัน ควรเป็น Font ตัวเดียวกัน โดยเราสามารถโหลดได้จาก dafont.com สำหรับภาษาอังกฤษ และ f0nt.com สำหรับภาษาไทย

เคล็ดลับดีไซเนอร์ ไม่ใช้ Headline แบบ Regular เพราะขยายใหญ่แล้วไม่สวย

8 ขั้นตอนการทำงาน Design

นอกจากเรื่องของพื้นฐานการออกแบบแล้ว คุณโบว์ยังแถมเรื่องขั้นตอนการวางแผนงาน Design ก่อนลงมือออกแบบจริง หรือเพื่อให้ง่ายต่อการส่งต่องานให้กับ Designer ด้วย

  1. ระบุเป้าหมาย ว่าเราจะทำอะไร และงานชิ้นนี้เราทำเพื่ออะไร
  2. กลุ่มเป้าหมายของเราเป็นใคร
  3. รายละเอียดเฉพาะของชิ้นงาน เช่น ภาพโปรโมท Facebook ควรมีตัวอักษรไม่เกิน 20% เป็นต้น
  4. Keyword อธิบายงานชิ้นนั้น เช่น สวย หรู ดูแพง
  5. Feeling ของกลุ่มเป้าหมายที่เราอยากให้เขาเป็น
  6. หา Reference
  7. เลือกสีและตัวอักษร
  8. ขึ้นงาน

เครื่องมือที่จะช่วยให้ Non Designer ทำงานง่ายขึ้น

ท้ายสุด คุณโบว์ยังแถมเครื่องมือที่จะช่วยอำนวยความสะดวกให้ Non – Designer อย่างเราทำงานได้ง่ายขึ้น ไม่ว่าจะเป็น

  1. Canva เว็บไซต์ที่มี Template ชิ้นงานให้เราเลือกใช้เยอะมาก Element ต่าง ๆ ก็เยอะ เยอะจนเลือกไม่ถูกเชียวแหละ
  2. Coolors เว็บไซต์สำหรับเลือก Combination สี ถ้าใครยังคิดไม่ออกว่าจะใช้สีอะไรคู่ไหนดี ลองไปหาไอเดียที่เว็บนี้ได้
  3. Flaticon เว็บนี้เมย์ใช้บ่อย เป็นเว็บดาว์นโหลด icon ต่าง ๆ มีให้เลือกเยอะมาก อยากได้อะไรก็ Search หาได้เลย
  4. Free Stock Photos เช่น Unsplash ที่มีรูปภาพสวย ๆ ให้เราเลือกใช้
  5. Small PDF เว็บย่อขนาดไฟล์ PDF โดยเฉพาะพวกไฟล์ใหญ่ ๆ รูปเยอะ ๆ นอกจากนั้นยังสามารถแปลงไฟล์ PDF ให้เป็น JPG ไฟล์ Word และอื่น ๆ ได้ด้วย

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

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