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 ที่เรียบง่าย และสามารถตอบสนองความต้องการได้ก็เพียงพอแล้ว

A Month With Windows 8 — Week 2 by Jamie Ryan

Flat Design คืออะไร ?

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

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

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

เรียบง่าย

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

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

สีสันสดใส

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

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

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

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

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

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

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

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

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

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

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

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