12 วิธีทำให้ Design ยังไงให้ดูดี

12 วิธีทำให้ Design ยังไงให้ดูดี

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

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


1. มีจุดโฟกัส

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

ตัวอย่าง เราจะเห็นว่าภาพเทมเพลตเป็นส่วนที่เด่นสุดของภาพ ทั้งๆที่ตัวอักษร บริการออกแบบแบนเนอร์ ก็ใหญ่โต
และน่าจะโดดเด่นไม่แพ้กัน แต่ด้วยสีสันที่สดเข้มกว่าส่วนอื่นๆที่เป็นเพียงกราฟฟิคขาว-ดำ เท่านั้นก็เพียงพอแล้วที่มันจะเป็นจุดสนใจของภาพได้

 

2. มีความต่อเนื่อง

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

  • ใข้การทำซ้ำ เรามีวิธีเรียกการซ้ำองค์ประกอบได้หลายอย่างเช่น Pattern , Repeat , Loop ฯลฯ แต่ไม่ว่าจะเรียกมันว่าอะไร การทำซ้ำไม่ได้หมายถึงแค่การก็อปปี้วัตถุออกมาเท่านั้น แต่มันคือการสร้างจังหวะบางอย่างที่มีทิศทางเดียวกันเพื่อให้มันนำไปสู่เรื่องราวหรือทิศทางอื่นได้
  • การแบ่งสัดส่วน คือการแยกองค์ประกอบต่างๆออกจากกันอย่างชัดเจน สังเกตุเห็นได้ชัดโดยไม่ต้องตีความเยอะลักษณะที่เราคุ้นชินคือกริด และ กรอบต่างๆที่เป็นก้อนออกจากกันและมีลำดับการมองจากใหญ่ไปเล็ก ซ้ายไปขวา บนลงล่างก็ว่ากันไป
  • พื้นที่ว่าง ( White Space ) คือส่วนที่ว่างจริงๆ ที่เป็นสีขาวหรือสีพื้นไปเลย เราไม่จำเป็นต้องทำให้ทุกพื้นที่เต็มไปด้วยองค์ประกอบ เพราะพื้นที่ว่างก็เป็นองค์ประกอบหนึ่งที่นำมาใช้ประโยชน์ได้เช่นกัน

Steve Wolf/Dribbble
ตัวอย่าง เราจะเห็นการแบ่งกลุ่มก้อนและการใช้พื้นที่ว่าง ที่จัดวางอย่างลงตัวทั้งระยะห่างและขนาดของตัวหนังสือ/กราฟฟิค

 

3. ความสมดุล

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

Steve Wolf/Dribbble

 

4. typefaces อยู่ด้วยกันอย่างดี

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

Amy Hood for Hoodzpah/Dribbble

 

5. ตัวหนังสืออ่านง่าย

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

  • ขนาด เป็นพื้นฐานที่สุดแล้ว อยากให้อ่านง่ายก็ทำใหญ่ๆสิ แต่การทำใหญ่ทำเล็กก็ควรเป็นไปด้วยนัยยะสำคัญของลำดับขั้นการสื่อสารด้วยนะครับ ด้วยหลักการง่ายๆว่าอะไรสำคัญสุดก็ควรใหญ่สุดก็ถือว่าดีแล้ว

The Prince Ink Co./Dribbble
ตัวอย่าง ชื่อเว็บนี่เด่นหรามาเลย แต่ส่วนอื่นๆก็อ่านได้เช่นกัน แม้ในนามบัตรจะเป็นอะไรที่ควรมีข้อมูลสำคัญมากๆ แต่ก็มีข้อจำกัดในเรื่องพื้นที่ นักออกแบบจึงต้องแก้ปัญหาด้วยขนาดและลำดับความสำคัญเสียใหม่ตามเจตนาของนามบัตรนั่นแหละ
ที่อาจจะอยากให้ไปเข้าเว็บไซต์เยอะๆมากกว่า
 

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

 

6. ความสมดุลของรูปแบบและการใช้งาน

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

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

DKNG/Dribbble
ตัวอย่าง มันฝรั่ง Doritos เราจะเห็นได้ว่าองค์ประกอบภาพที่ใช้ทำรูปภูเขา ก้อนหิน พื้นดิน ที่รถขน Doritos พาขับเคลื่อนไปนั้นมันคือตัวขนมเองที่มีพื้นผิวและสีสันหลากหลายแต่ยังอยู่ในโทน ส้ม-เหลืองและเมื่อนำมาประกอบกับกราฟฟิกที่วาดขึ้นใหม่ในโทนแบบเดียวกัน ก็ดูดีและขายของไปพร้อมๆกันได้เช่นกัน

 

7. มีความตัดกัน ( Contrast )     

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

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

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

 
8. ใช้ประโยขน์จากพื้นที่ว่าง

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

  • ความใกล้กัน คือการวางองค์ประกอบที่เกี่ยวเนื่องกันให้อยู่ใกล้เคียงกัน เว้นระยะห่างพอประมาณพอให้ได้รู้ว่ามีจังหวะบางอย่างอยู่ เพื่อสร้างความต่อเนื่องของการจัดวางให้สมดุลน่าสนใจมากขึ้น
  • พื้นที่สีขาว ( White Space ) คือการจัดสรรค์ที่ว่างโล่งเพื่อปล่อยให้องค์ประกอบเด่นได้เฉิดฉายอย่างเต็มที่ นอกจากนี้พื้นที่ว่างยังช่วยให้ภาพรวมดูสะอาดและสบายใจ เหมาะกับงานออกแบบที่เน้นลุคแบบนี้ได้อย่างดี


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

 

9. อารมณ์( Mood & Tone ) ไปกันได้

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

Emrich Office/Dribbble
ตัวอย่าง เราจะเห็นว่าทั้งสองงานมีความเหมาะสมเป็นอันหนึ่งอันเดียวกันของกราฟฟิค , ภาพถ่าย , สไตล์เส้นสี และ ตัวอักษรที่ลงตัว มันจึงดูดีมากๆเลย

 

10. โทนสีที่กลมกลืน

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

Szende Brassai, Adline/Dribbble

เป็นเรื่องสำคัญมากในการเลือกใช้สีอย่างเหมาะสม และเรามีเครื่องมือในการเลือกใช้สีมากมาย
เว็บชุดสีที่ตามเทรนด์และมีหลายประเภท –http://goo.gl/fNlbzU
เว็บสร้างชุดสีของ Adobe มีสียอดนิยมอัพเดท –https://goo.gl/3SMWnm
ไม่มีถูกไม่มีผิดแค่มองให้เห็นภาพรวมแล้วหยิบจับมาใช้อย่างตรงตามจุดประสงค์ก็เพียงพอให้ชุดสีเหล่านี้ดูดีได้แล้ว

 
11. มันตรงโจทย์หรือไม่

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

 

12. ผลงานมีคุณภาพสูง

     ไม่ได้หมายถึงผลงานมีรางวัลการันตี หรือว่าเป็นดีไซน์พรีเมียมหรูหราอะไร กำลังพูดถึงไฟล์ที่มีความละเอียดสูงพอ เช่นไฟล์ภาพที่ใช้มีความละเอียดสูงคมชัด การตั้งค่าการทำงานถูกเริ่มต้นอย่างถูกต้อง ไม่ว่าจะเป็นการใช้สกุลสี ( RGB / CMYK / etc. ) ขนาดของตัวงาน หรือแม้แต่นามสกุลของไฟล์เอง มันควรต้องมีคุณภาพที่ดียืดหยุ่นพอจะนำไปใช้งานต่อในสภาพแวดล้อมอื่นๆได้  เพื่อปกป้องผลงานอันดีงามของเรา จึงควรต้องเริ่มต้นจากไฟล์คุณภาพสูงแล้วค่อย downgrade ลงตามการใช้งานจะดีกว่าค่ะ

 

CR. 12 วิธีทำให้ Design ดูดี

โดย :
 13148
ผู้เข้าชม

บทความที่เกี่ยวข้อง

โดยส่วนใหญ่แล้วการพัฒนาเว็บไซต์เป็นอะไรที่ซับซ้อนสำหรับนักพัฒนา เพราะต้องจัดทำอยู่หลายๆส่วนด้วยกัน ไม่ว่าจะเป็นการทำงานของเว็บไซต์ หรือส่วนของการออกแบบ ตกแต่งเว็บ ซึ่งในการออกแบบเว็บไซต์ CSS เป็นส่วนสำคัญในการออกแบบ และอาจจะเสียเวลาในการสร้าง CSS ขึ้นมา โดยวันนี้ขอนำเสนอ CSS Generators เครื่องที่ช่วยสร้าง CSS ให้โดยที่เราไม่จำเป็นต้องเสียเวลาไปกับการสร้าง CSS เลย
ทุกคนที่ทำงานด้านดีไซน์ ไม่ว่าจะเป็นเว็บดีไซเนอร์, UX/UI Designer หรือออกแบบด้านอื่น ๆ ก็ต้องพบกับปัญหา “คิดงานไม่ออก” กันทั้งนั้น ซึ่งดีไซเนอร์เก่ง ๆ เค้าก็จะมีเทคนิคในการหาไอเดียแตกต่างกันไป
ทำไมเว็บไซต์ถึงไม่มีใครเข้ามาดู ทำไมไม่มีลูกค้าติดต่อมาบ้าง หรือทำไมถึงไม่มีผลตอบรับจากเว็บไซต์เลย คำถามเหล่านี้มักจะเกิดขึ้นกับเจ้าของเว็บไซต์ที่มือใหม่ ที่สร้างเว็บไซต์ด้วยตนเอง..

Feature SoGoodWeb

SoGoodWeb มีระบบรับชำระเงินแบบใหม่ผ่าน Pay Solution รองรับทุกธนาคารชั้นนำ ทำให้การจ่ายเงินผ่านช่องทางออนไลน์เป็นเรื่องง่าย ช่วยให้ลูกค้าจ่ายเงินออนไลน์ได้อย่างสะดวก
LINE Notify คือ บริการที่คุณสามารถได้รับข้อความแจ้งเตือนจากเว็บเซอร์วิสต่างๆ ที่คุณสนใจได้ทาง LINE โดยหลังเสร็จสิ้นการเชื่อมต่อกับทางเว็บเซอร์วิสแล้ว คุณจะได้รับการแจ้งเตือนจากบัญชีทางการของ “LINE Notify” ซึ่งให้บริการโดย LINE นั่นเอง
เหมาะสำหรับลูกค้าที่เปิดธุรกิจทัวร์ - ทัวร์ท่องเที่ยว ทั้งที่เป็นเจ้าของเอง หรือเป็นรายย่อย เป็นระบบจองทัวร์ ที่ช่วยทำให้การจัดการธุรกิจทัวร์ - ทัวร์ท่องเที่ยว ให้เป็นเรื่องง่าย
สร้างเว็บไซต์สำเร็จรูปฟรี ร้านค้าออนไลน์