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

FLAT DESIGN วิธีออกแบบสไตล์เรียบง่ายที่ไม่มีวันตาย

หลายคนคงเคยได้ยิน Flat Design แต่ก็ยังคงงงงๆ อยู่ว่า Flat Design คืออะไรกันแน่ เป็นโปรแกรมออกแบบหรือเปล่า วันนี้ Hatyai Application นำความรู้เกี่ยวกับ Flat Design มาฝากกัน ว่าจริง ๆ แล้ว Flat Design คืออะไร มีวิธีการใช้งานยังไง

Flat design คืออะไร

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

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) ระหว่างพื้นหลังและองค์ประกอบให้มากขึ้น เพื่อเพิ่มความโดดเด่นและความเด่นชัด ถ้าเราเลือกใช้พื้นหลังที่ทึบเช่น ดำ น้ำเงิน ก็ควรจะเลือกใช้สีให้กับองค์ประกอบอื่นเป็นสีในโทนสว่างสดใสเช่น สีขาว เหลือ ฟ้า แดง หรือสีอื่นๆ

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

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

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

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

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

flat-design

flat design by Darko Vujic

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

 

ขอบคุณข้อมูลจาก grappik.com/flat-design/

 

_______________________________________________________________________________________________

อ่านบทความเพิ่มเติม hatyaiapp.co.th/บทความแอปพลิเคชัน
รับทำแอปพลิเคชัน รับทำเว็บไซต์ รับทำเว็บแอปพลิเคชัน รวมเว็บ รองรับทุกอุปกรณ์

 

By |2018-12-26T15:53:18+00:00ธันวาคม 26th, 2018|