Flat Design คืออะไร? + สอนวิธีทำ

คงไม่มีใครปฏิเสธว่า flat design เป็น design trend ที่มาแรงที่สุดในขณะนี้ คำถามก็คือมันจะเป็นเหมือน design trend อื่นๆ ที่ได้รับความนิยมอยู่เพียงแค่พักเดียว หรือมันจะกลายเป็น best practice ของการ design ไปเลย?

ความเป็นมาของ Flat Design

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

หลังจากที่ Microsoft ได้เปิดตัว Windows Phone 7 และ Windows 8 ผู้คนก็เริ่มรู้จัก flat design มากขึ้น ด้วย UI(User Interface) ที่ดูทันสมัย แปลกตา สีสันสดใส ในขณะเดียวกันก็ดูเรียบง่าย ทำให้ flat design ได้รับความนิยมในเวลาอันรวดเร็วและถูกนำมาใช้อย่างแพร่หลายในงานออกแบบไม่ว่าจะเป็นเว็บไซต์หรือแอปพลิเคชัน เรื่องนี้อาจสะท้อนให้เห็นว่า บางทีคนเราก็ไม่ได้ต้องการ UI ที่หวือหวา น่าตื่นตาตื่นใจเสมอไป ขอแค่ UI ที่เรียบง่าย และสามารถตอบสนองความต้องการได้ก็เพียงพอแล้ว


windows-8-start-menu

A Month With Windows 8 – Week 2 by Jamie Ryan

Flat Design คืออะไร ?

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

flat_design_no_add_effects

Elements ต่างๆ ใน Flat Design จะดูแบนราบ ไม่ลอยออกมาเหมือน Skeuomorphism

หน้าตาของ Flat Design เป็นอย่างไร ?

เรียบง่าย

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

flat_design_simple

การออกแบบหน้า Pricing ที่ดูเรียบง่าย

สีสันสดใส

flat design จะใช้สีที่หลากหลายมากขึ้น ปกติเราอาจจะใช้สีเพียงแค่ 2 – 3 สี แต่ flat design อาจใช้ได้มากถึง 6 – 8 สีเลยทีเดียว โดยสีที่นิยมเลือกมาใช้นั้น มักจะเป็นสีที่สดใส หรือ ฉูดฉาด เนื่องจากการทำให้ทุกอย่างดูแบนราบ อาจทำให้ users จดจำและแยกแยะออกได้ลำบากว่า elements ต่างๆ มีไว้ทำอะไร เราเลยจำเป็นต้องใช้สีเข้ามาช่วย

flat_design_diablo

การใช้สีที่หลากหลายของ Flat Design

ตัวหนังสือใหญ่

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

flat_design_typography

Typography มีส่วนสำคัญอย่างมากใน Flat Design

 

อย่างไรก็ตาม flat design อาจมีหน้าตาที่ต่างกันออกไป ขึ้นอยู่กับความคิดสร้างสรรค์ของ designer แต่ละคน หากเราคิดจะเริ่มทำ flat design สามารถเข้าไปดูตัวอย่างงานออกแบบที่ใช้ flat design เพิ่มเติมได้ที่ “รวมเว็บแจกกราฟฟิก Flat Design สวยๆ + ฟรี

แล้ว Flat Design มันดียังไง ?

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

ใช้งานง่าย

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

สวย

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

Responsive

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

Flat Design ไม่ได้ง่ายอย่างที่คิด !

อย่าลืมว่า “การออกแบบคือการแก้ปัญหา” หากจุดประสงค์ของเว็บไซต์คือการสื่อสารกับผู้ใช้งานแล้วล่ะก็ การออกแบบเว็บไซต์ ก็คือการทำให้การสื่อสารนั้นเป็นไปอย่างราบรื่น และประสบความสำเร็จ

จุดประสงค์ที่แท้จริงของ flat design นั้นไม่ใช่การทำให้ดูแบนราบ แต่เป็นการทำให้ context ดูเรียบง่าย เพื่อทำให้ content ดูเด่นขึ้นต่างหาก ซึ่งสิ่งนี้เอง ที่จะทำให้ users สามารถเข้าใจสิ่งที่เราอยากจะบอกได้ง่ายขึ้น การสื่อสารของเราก็มีโอกาสสำเร็จมากขึ้น และนี้เป็นที่มาว่าทำไม flat design ถึงต้องใช้หลายๆ สี ทำไมต้องใช้สีสดใส ทำไมต้องใช้ typography ตัวใหญ่ๆ หนาๆ เป็นเพราะต้องการจะสร้าง contrast ให้กับเนื้อหานั่นเอง

ถ้าเราคิดว่า flat design นั้น ทำได้ง่ายแล้วล่ะก็ คิดผิดซะแล้ว เพราะมันยากไม่แพ้ skeuomorphism เลย designer หลายๆ คนมักจะบ่นว่า หลังจากเปลี่ยน design จาก skeuomorphism มาเป็น flat design แล้ว users ไม่รู้ว่าอันไหนกดได้บ้าง อันไหนเป็นช่องให้กรอก เนื่องจากมันแบนราบเหมือนกันหมด ที่เป็นเช่นนี้ เพราะว่า designer นั้น สนใจแต่ความสวยงาม โดยที่ไม่ได้แก้ปัญหาที่แท้จริงของการสื่อสารนั่นเอง

flat_design_form

การออกแบบ Form สำหรับ Flat Design

 

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

flat_design_pricing

Flat Design เป็นการวัดความสามารถที่แท้จริงของ Designer

อย่าปล่อยให้ Design Trend มาทำร้ายตัวเอง !

trend ยังไงก็ยังคงเป็น trend วันยังค่ำ ไม่ว่า flat design จะได้รับความนิยมแค่ไหน แต่นั่นก็ไม่ได้หมายความว่ามันจะเหมาะกับงานทุกงาน เรามักจะเห็น flat design ในเว็บที่เกี่ยวกับ startup เว็บแบบ single page หรือเว็บแนว portfolio เว็บแนวนี้จะเน้นการสื่อสารที่กระชับ เพื่อให้ users เข้าใจสิ่งที่จะนำเสนอได้เร็วที่สุด แต่หากเรานำ flat design ไปใช้กับเว็บหน่วยงานราชการ หรือเว็บรีสอร์ทชื่อดังที่มัลดีฟส์ มันจะเข้ากันได้มั้ย ? เราสามารถตาม trend ได้ แต่ต้องแน่ใจว่ามันไม่ได้ไปทำให้เนื้อหาหรือฟังก์ชั่นการใช้งานของเราด้อยลงไป

flat_design_single_page

การใช้ Flat Design กับเว็บแนว Single Page

ตามใจคนอื่นให้มากขึ้น ตามใจตัวเองให้น้อยลง

ความแตกต่างสิ่งหนึ่งระหว่าง designer กับ artist ก็คือ designer จะทำตาม order ส่วน artist นั้นเลือกที่จะแสดงความเป็นตัวเองออกมา เวลาเราออกแบบเว็บไซต์ ให้เราเตือนตัวเองเสมอว่าเราไม่ใช่ artist บางอย่างเราอาจจะชอบ แต่อย่าลืมดูว่าสิ่งนั้น users ชอบด้วยหรือไม่? มันได้ช่วยให้ users ใช้งานได้ง่ายขึ้นหรือเปล่า? เราไม่ได้ทำมาเพื่อให้ตัวเองใช้คนเดียวนะ หากเราคำนึงถึงจุดนี้อยู่เสมอ ไม่ว่าเราจะใช้ skeuomorphism หรือ flat design เราก็ยังคงสามารถสร้างผลงานที่ยอดเยี่ยมได้อยู่ดี

(Visited 35,530 times, 3 visits today)

26 Responses to “Flat Design คืออะไร? + สอนวิธีทำ”

  1. Ryan Ibargame says:

    artist ใส้แห้ง ….| ไป๊ ไปสู้วๆๆๆ

  2. ขอบคุณครับ

  3. Nat Kansuwan says:

    big bold shapes and typography, big bold color, big bold clean design with little or no drop shadows, bevels,
    gradients or other three-dimensional attributes :3

  4. เป็ดน้อย says:

    ขอบคุณที่เขียนบทความดีๆมาให้อ่านค่ะ งมของฝรั่ง หนูเเปลไม่ค่อยออก

  5. Big'Pranod Tunpikul says:

    ขอบคุณบทความดีๆครับ จะติดตามต่อไปเรื่อยๆครับ เป็นประโยชน์มากๆครับ

  6. Birdy says:

    เป็นประโยชน์มากๆเลยครับ ขอบคุรีสำหรับบทความดีๆ

  7. KKz Yrang says:

    ขอบคุณมากคร๊าบบบ ตอนนี้กำลังผันตัวมาทาง Web Designer เช่นกัน

  8. เยี่ยมครับ :)

  9. Komyos Chongbunwatana says:

    great

  10. Chalermkiat Phafongyun says:

    เจ๋งอะ ขอบคุณครับ

  11. Warut Ngamwong says:

    อย่าปล่อยให้ Design Trend มาทำร้ายตัวเอง !
    <>

  12. Visitor says:

    บทความคุ้นๆ นะครับ คล้ายๆ ใน tutsplus.com
    แต่ไม่ว่าจะเขียนเองหรือเอามาแปลก็ถือว่าดีครับ เป็นความรู้ให้เพื่อนๆที่ไม่ภาษาอังกฤษไม่แข็งแรง

  13. nu2day says:

    เป็นบทความที่เยี่ยมมากครับ เขียนได้ละเอียด ครอบคลุม และเข้าใจง่าย

  14. Porntip Pawaputanon says:

    เป็นบทความที่ดีมากเลยคะ

  15. ขอบคุณสำหรับบทความ

  16. เก็บ ๆ เด๋วมาอ่าน

  17. อ่านเพลินเลยครับ เนื้อหาก็ดี ดีไซน์เว็บก็สวย สวดยอด ไปเลยครับ

  18. กว่าจะเป็นเว็บไม่ใช่เรื่องง่าย…บทความดีครับ

  19. เดียวมาอ่านน่าสนใจดี

  20. ขอบคุณสำหรับข้อมูลที่ดีๆอย่างนี้ค่ะ โดยส่วนตัวก็ชอบงาน Design แบบนี้นะคะดูจริงใจดี

  21. อ่านเพลินเลยครับ ขอบคุณมากๆครับ

  22. Be Ver says:

    เขียนสื่อความได้ดีมากๆ เข้าใจง่าย
    ขอบคุณสำหรับบทความดีดีค่ะ :)

  23. อ่านเพลินจริงๆครับ ขอบคุณสำหรับบทความดีๆ

Leave a Reply