Flat design เรียนรู้วิธีออกแบบสไตล์เรียบง่ายที่ไม่มีวันตาย

Update

Flat design คืออะไร

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

หลังจากที่เคยเขียนบทความเรื่อง วิธีใช้งาน ในปี 2015 เชื่อหรือไม่ว่าแนวทางออกแบบในตอนนี้ (ปี 2018) ก็ยังนิยมใช้อยู่ดี!! เพียงแต่มีการพัฒนาไปในรูปแบบใหม่ให้น่าสนใจมากขึ้นสามารถอ่านเพิ่มเติมได้ที่ GRAPHIC DESIGN TRENDS 2018 – แนวทางออกแบบปี 2018

Flat design
Flat design by Darius Dan

งานออกแบบที่ดีจะต้องไม่น่าเบื่อ และเป็นข้อที่ควรระวังเป็นพิเศษเพราะว่าการออกแบบในสไตล์นี้การลดทอนองค์ประกอบที่ไม่จำเป็นลงเพื่อให้ผู้ใช้งานมุ่งตรงไปยังเป้าหมายได้ไว้มากยิ่งขึ้น การลดทอนองค์ประกอบลงเช่น ลดการใช้สีที่ฉูดฉาดกระแทกตาอาจทำให้งานน่าเบื่อ เราก็ควรจะหาแนวทางอื่นมากเสริมอย่างการใช้สีที่สว่างและตัดกัน(Contrast) มาใช้งานแถมยังช่วยให้ปุ่มกด(Call to action) มีความโดดเด่นเพิ่มขึ้นมาอีกด้วย

หัวใจของงานคือ เข้าใจง่าย

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

Flat design
Flat design by Digital Science

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

หลายคนพูดว่า Flat design คือการ back to the basics ของงานออกแบบนั่นก็เป็นเรื่องจริงแต่ไม่ทั้งหมด แต่คือการพัฒนางานออกแบบให้ดูเรียบง่ายเข้าถึงง่ายมากกว่าซึ่งมันจำเป็นกับงานหลายชนิดเช่น เว็บไซต์ที่มุ่งเน้นไปในเรื่องของการใช้งาน หรือแอปพลิเคชั่นที่มีการใช้งานซับซ้อนที่ต้องการให้ผู้ใช้งานใช้งานได้ง่าย


เทคนิควิธีใช้งาน

1.จัดวางองค์ประกอบง่ายๆ สไตล์ Card UI

https://dribbble.com/shots/3113887-Analytics/attachments/657903

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

Card UI คืออะไร

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

 

2.สีก็สำคัญไม่แพ้

https://dribbble.com/shots/3130319-Smart-Home-Climate-Settings/attachments/662512

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

ทำไมต้องละเอียดในเรื่องของสี ?

เพราะสีมีความสำคัญต่องานออกแบบโดยรวม งานจะสวยหรือน่าเบื่อสีเป็นจุดสำคัญมาก และอีกจุดที่สำคัญคือ สีหมายถึงสิ่งที่สามารถสร้าง User experience ที่ดีได้ได้ด้วยใครที่ต้องการอ่านบทความของสีกับ UX สามารถศึกษาเพิ่มเติมได้ที่ POWER OF COLOR IN UX DESIGN : เมื่อสีเป็นเครื่องมีที่ทรงอิทธิพลในโลกของ UX

ถ้าต้องการมีชุดสีแจ่มๆ เอาไว้ใช้งาน

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

 

3.ใช้ภาพประกอบบ้าง

flat-design
flat design by Darko Vujic

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

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

อ่านเพิ่มเติมที่ THE POWER OF ILLUSTRATIONS

สรุป

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