สำหรับนักออกแบบเว็บ สี (Color) เป็นองค์ประกอบหนึ่งที่ถูกให้ความสำคัญเป็นลำดับต้น ๆ เลยก็ว่าได้ ถ้าไม่นับโลโก้ สีเป็นสิ่งหนึ่งที่คนสามารถจดจำได้ง่าย ยกตัวย่าง เช่น Facebook เราจะนึกถึงสีน้ำเงิน Twitter สีฟ้า Snapchat สีเหลือง AirฺBnb สีแดง เป็นต้น นอกจากนี้สียังใช้สื่อถึงอารมณ์ของเว็บที่มีต่อผู้ใช้ได้อีกด้วย เช่น สีเขียว ให้ความรู้สึกสบาย และเป็นมิตร สีชมพู ให้ความรู้สึกอ่อนหวาน น่ารัก เป็นต้น

ปัจจุบันแนวทางการออกแบบ Flat Design ได้รับความนิยมอย่างมาก โดยมีจุดเด่นอยู่ที่ความเรียบง่าย สะอาดตา ไม่หวือหวา และดูเป็นมิตรกับผู้ใช้ มีบริษัทหลายรายที่นำ Flat Design ไปใช้ เช่น Microsoft (Metro UI), Apple (iOS 7-8) และ Google ซึ่งรายหลังได้พัฒนาต่อยอดมาเป็น Material Design

ตัวอย่างเว็บที่ใช้แนวทางการออกแบบ Flat Design ดูเพิ่มเติม คลิกที่นี่

จากตัวอย่าง การใช้สีในแนวทาง Flat Design นั้น จะเน้นสีแนวพาสเทล (Pastel) ที่ดูสบายตา ไม่ร้อนแรงหรือจัดจ้า่น ใครทำเว็บสไตล์ Flat อยากได้สีอารมณ์แนวนี้มาใช้กับเว็บ ก็ลอง search ว่า “flat colors” ได้ครับ แต่ที่ผมแนะนำในบทความนี้เป็นเว็บที่ผมเข้าประจำเพื่อนำ Code สี ภายในเว็บมาใช้ครับ

  • flatuicolors.com แหล่งสีแนว Flat Design ยุคแรก ๆ (ย้อนไปเมื่อ 1-2 ปีก่อน) มีสีพื้นฐานให้ แต่ตัวเลือกน้อย
  • flatuicolorpicker.com มีสีให้เลือกเยอะกว่าเว็บแรกพอสมควร เพราะเพิ่มเฉดสีโทนมืดและสว่างเข้ามา
  • Google Material Design Color Palette อันนี้เจ๋งมาก แนะนำให้ bookmark ไว้ เป็นชุดสีที่ใช้กับการออกแบบแนว Material Design มีครบทุกเฉดสีไล่จากอ่อนไปเข้มให้ แถมบอกด้วยว่าสีนี้ถ้าเอาไปใช้เป็นพื้นหลังเหมาะกับตัวหนังสือสีขาวหรือสีดำ
  • ios8colors.com โทนสีที่ใช้ในการออกแบบแอพบน iOS 8 ดูได้จากเว็บนี้เลยครับ โค้ดสีมีทั้งแบบสีเดียว และแบบสีคู่ เพื่อนำไปใช้ในการไล่เฉดสีแบบ Gradient
  • dribbble.com เป็น Social network ที่รวมผลงานกราฟิกไว้หลายแนว สามารถเข้าไปดูไอเดียการออกแบบของผู้คนทั่วโลกได้ รวมถึงถ้าอยากได้โค้ดสีของผลงานน้ัน ๆ ก็สามารถดึงมาใช้ได้ครับ

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

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

Comments

comments

RELATED ARTICLESMORE FROM AUTHOR