อยากเป็น Web Design ทำไง [ตอนที่ 1: Flat Design]

สวัสดีครับ บทความนี้ผมจะมาสอนการก้าวเข้าสู่การเป็น Web Design ซึ่งจะออกมาเป็นตอนๆ ให้ได้อ่านกันโดยผมจะสรุปเอาจากสิ่งที่จำเป็นต้องรู้ จนไปถึงลงงานใน Photoshop ก็จะอยู่ช่วงหลังๆ โดยบทความนี้จะไม่ได้โฟกัสที่กลุ่ม Designer อย่างเดียวแต่รวมถึง Web Developer ที่ต้องการจะศึกษาเรื่องการออกแบบด้วย

 

Intro of Series

เริ่มกันที่ Flat Design กันก่อนสมัยนี้ใครๆ ก็คงต้องเคยได้ยินมาบ้าง ทำไมผมถึงยกมันมาอยู่ในหัวข้อแรกที่จะพูดงั่นหรอ? เพราะว่าถ้าคิดจะออกแบบก็ต้องออกแบบให้ตรงกับยุคกับสมัย ผมเลยยกเอาการแนะนำ Flat Design มาพูดก่อนหัวข้ออื่นๆ

 

Meaning of Flat Design

Flat คือการออกแบบที่รีบง่ายคือตัดเอารูปทรง 3D หรือออกแบบที่ดูเสมือนจริง (Skeuomorphism ) ออกไปจากชิ้นงาน และหันไปเล่นกันสีสันแทน เพื่อให้ดูสดใสขึ้น เพราะชิ้นงานที่ออกมาจะดูเรียบๆ แบนๆ ไม่มีรายละเอียดของวัถตุเท่าไร สีจึงเป็นสิ่งคำญของการออกแบบแนวนี้  นอกจากนี้ยังหลีกเลี่ยงการไล่สี ( gradients ) การใช้ textures ต่างๆ รวมถึงการทำเงาของวัตถุ ( Drop Shadow) ทั่งหมดคือส่วนประกอบที่ทำให้เกิดวัตถุ 3D นั่นเอง

Flat Mountains Landscape

0654.Metro-style-UI_010DA84C

 

Flat come to solve a Skeuomorphism design problem

เมื่อหัวข้อที่แล้วผมได้มีการพูดถึงคำว่า Skeuomorphism มันคือการออกแบบในยุด Realistic illustration ที่อยู่บน Digital Design ผมเชื่อว่าหลายๆ คนยังไม่เคยได้ยินคำนี้มาก่อน ถ้าพูดย้อนกลับไปผู้นำด้านออกแบบ Skeuomorphism เลยนี่คือ Apple [ดูจากภาพด้านล่าง] เพราะถ้าใครเคยใช้ iPhone หรือ Mac ในยุคแรกๆ จะเห็นว่าเขาจะออกแบบให้ดูเสมือนจริงมากที่สุด

แต่การออกแบบในลักษณะนี้ทำให้เกิดปัญหา ถ้ามันมาอยู่บน Digital Content ทำไมน่ะหรอ? เพราะผู้ผลิตต้องการให้ผู้บริโภคใส่ใจ Content ของเขาไงยังไงครับ

แล้วมันเกี่ยวกับการออกแบบยังไง? เพราะการออกแบบในเชิงเสมือนจริงมันเกิดการ time-consuming คือการใช้เวลากับการดูรูปทรงและทดลองการกด การวิเคราหะ์รูปทรงว่ามันทำอะไรได้บ้างมากเกินไปทำให้การดู Content มันถูกกินเวลาออกไปครับ ผมเคยอ่านบทความวิจัยอันนึงสมัยเรียนปี 4 เมื่อสามปีที่แล้ว น่าเสียดายผมหามาแปะให้อ่านไม่ได้ต้องขอโทษจริงๆ ในบทความนั่นผมจำได้ว่าเขาพูดถึงเรื่องการวิเคราะห์ Text 3D ว่าคนจะโฟกัสที่เงาที่ยื่นออกไป และส่วนขยายที่ทำให้เกิด 3D ก่อนจะอ่านข้อความ

skeuomorphic-ios

 

Human find the way-out

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

  1. การเขียนโค้ดในระบบง่ายขึ้น ลดเวลาพัฒนาลงได้
  2. ทำให้การ Render งานไวขึ้น
  3. ทำให้สนใจวัตถุน้อยลง
  4. การออกแบบเราไม่ต้องคำนึงถึงความจริงมาก ก็ลดการคิดลงไปเอาเวลาไปคิดการออกแบบส่วนอื่น

skeuomorphic-11_large

 

Every thing has problem

คุณอาจจะคิดว่าการมี Flat Design นั่นดีแต่เปล่าเลยบางครั่งมันเพิ่มความยากของการออกแบบในกับ Design ไปอีกเพราะ เราไม่สามารถบอกได้ว่าอันไหนคือ “ปุ่ม” หรือรูปภาพทั่วไป ดูจากตัวอย่าง ปัญาหาคือไม่มีอะไรที่บอกว่าอันไหนคือปุ่มกันแน่

05-flat-design-hurting-usability

สุดท้ายเมื่อมัน minimal ไป จึงเป็นการมาโฟกัสที่ Look and Feel แทน เช่นการใส่ Drop Shadow ลงไปเล็กน้อย การ Highlight ที่ตัวหนังสือ การจัดวาง Layout อย่างเมนูบนเว็บไว้ด้านบนเสมอ  การตีกรอบเองก็ช่วยเหมือนกัน

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

1

2

ที่มา link

3

ที่มา link

 

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

Facebook Comments