29Oct, 2021
Language blog :
Thai
Share blog : 
29 October, 2021
Thai

7 เครื่องมือช่วยให้การเลือกสีงาน UI เป็นเรื่องง่าย

By

1 mins read
7 เครื่องมือช่วยให้การเลือกสีงาน UI เป็นเรื่องง่าย

เราพูดเรื่อง Colors in Design System : สี สิ่งที่ต้องคำนึงก่อนขึ้น UI ไปในบทความก่อนหน้า ใครยังไม่ได้อ่านแนะนำให้กลับไปอ่านก่อนจะช่วยเติมเต็มเพิ่มเติมจากบทความนี้ เราจะมาพูดถึง Tools หรือเครื่องมือที่น่าสนใจ ทำหน้าที่เป็นผู้ช่วยเรื่องสี ให้สามารถเลือกสีไปใช้งานได้ง่าย ๆ สะดวกสบาย ซึ่งจะตอบโจทย์การทำงาน UI ตอนขึ้น Design System : Color Palette ก่อนตัดสินใจเลือกและเริ่มทำโปรเจกต์นั้น ๆ โดยเครื่องมือแต่ละตัวที่แนะนำในวันนี้มีจุดเด่นไม่ซ้ำกันเลย

Material Color Tool

Material Color Tool : มี 2 ฟังก์ชันหลัก ๆ คือ ภาพรวมของแอปพลิเคชัน และช่วยตรวจสอบการมองเห็นของสีที่จะใช้ในงานกับตัวอักษร ที่จะช่วยประกอบการตัดสินใจว่าควรไปต่อหรือพอแค่นี้กับสีที่เลือกมาตอนนี้ดี แนะนำให้ลองเข้าไปใช้งานดู 

Material Color Tool

 

Coolors

Coolors : ช่วยเลือกชุดสีสำเร็จรูปที่เข้ากันแบบสามารถเข้าไปเลือกดู หรือสุ่มขึ้นมาอัตโนมัติ เทรนสีที่กำลังมาแรง ไม่ว่าจะแนว Pastel , Monotone , Vintage และอื่น ๆ  อีกอย่างเว็บไซต์นี้มี extension สำหรับใช้งานบน Adobe และ Google Chrome ด้วยนะ

Coolors

 

Picular

Picular : เพียงแค่ใส่คำที่ต้องการค้นหาตามหมวดหมู่ รูปแบบ  โทนสี วัตถุ ฤดู หรืออะไรก็ได้ที่เกี่ยวข้องกับโปรเจกต์ที่คุณกำลังจะต้องทำ เว็บก็จะสร้างสีแนวที่คุณต้องการและได้สีที่เข้ากับคำ เลือกนำไปใช้ได้เลยง่าย ๆ

Picular

 

Muzil Colors

Muzil Colors : คิดชุดสีไม่ออก เริ่มต้นงานด้วยสีอะไรดี แล้วต้องใช้กับสีไหนถึงจะเหมาะและดูสวยงาม หรือจะใส่รหัสสีที่เราต้องการเพื่อดูว่าเหมาะกับชุดสีแบบไหน ตัวอย่าง Preview การนำไปใช้บนปุ่ม ไอคอน แต่ละรูปแบบไม่ว่าจะตอนที่ Active หรือ Disable ก็ตาม

Muzil Colors



Image color picker

Image color picker : ได้ภาพ Moodboard แล้ว จะมาค่อย ๆ ดูดสีเองจาก Eye dropper ก็เสียเวลา ไม่รู้เฉดสีจะตรงแค่ไหน ให้เว็บ Image color picker ช่วยเลือกแค่สีหลัก ๆ ของภาพ ให้คุณได้เลือกนำไปใช้งาน หรือจะอยากรู้ว่าเหมือนรวมกันแล้วสีแต่ละรูปแบบเมื่ออยู่ร่วมกันแล้วจะเป็นยังไง

Image color picker

 

Eva Design

Eva Design : อยากไล่เฉดสีหลักไว้ใช้งาน สีหลักแบบนี้สีของสถานะจะเอาสีอะไรดีที่เหมาะสมกับงาน Eva Design ช่วยคิดให้พร้อมไล่เฉดเรียบร้อย พร้อมหยิบไปใช้งาน

Eva Design

 

BrandColors

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

BrandColors

 

คำแนะนำทิ้งท้าย

นอกจากข้างต้นแล้ว ยังมีเครื่องมือที่เกิดขึ้นอีกมากมายที่ยังไม่ได้แนะนำ ลองไปหาดูเพิ่มเติมเองได้ง่ายๆ ด้วย Keyword : UI/UX design tools หรือ Color tools แล้วแต่ถนัดกันเลย แนะนำให้ลองเข้าไปใช้งานกันดูหลาย ๆ เว็บ แล้วจะเจอเว็บที่ถูกใจ ได้ใช้ประโยชน์กันอีกยาวนาน

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

อีกส่วนหนึ่งที่อาจจะยากต่อคือการนำสีไปใช้หรือทำอย่างไรให้ออกมาสวยงาม คุม Mood & Tone ให้ไปในทิศทางเดียวกัน คือการศึกษา ค้นหาดูตัวอย่างงานที่มีจากเว็บไซต์ที่รวบรวมงานดีไซน์สวยๆ เช่น Dribbble , Behance , Awwwards , Mobbin , CollectUI , Screenlane เพื่อหาแนวทางการออกแบบและเลือกใช้สีที่ดูสวยงาม จะช่วยให้เราทำงานได้ง่าย หาไอเดียก่อนเริ่มทำได้ดีมากยิ่งขึ้นเช่นกัน

Written by
Senna Labs
Senna Labs

Subscribe to follow product news, latest in technology, solutions, and updates

- More than 120,000 people/day visit to read our blogs

Other articles for you

29
May, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
29 May, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
หลายคนคงเคยเจอเหตุการต่างๆ บนโลกดิจิทัลที่สามารถนำพาเราไปเสียเงินหรือสมัครใช้บริการได้ง่าย ๆ ทั้งที่ไม่รู้ตัว ลองมาดูกันว่า พวกเขาเหล่านั้น ใช้วิธีหลอกล่อนักชอปอย่างเรากันอย่างไรบ้าง พื้นฐานของคนทั่วไปนั้นไม่อยากที่จะสูญเสียอะไรไป แม้แต่สิ่งที่อาจจะไม่จำเป็น เราอาจจะพบการทำการตลาดในเชิงนี้ได้บ่อย ๆ ทั้ง ๆ ที่เราไม่รู้ตัว และอาจจะไม่จำเป็นต้องซื้อแต่โดนกระตุ้นด้วยข้อมูลที่เรารับมาแบบงง ๆ เช่น Flash sale 40% สินค้าที่มีจำนวนจำกัด นั้นจะน่าสนใจมากกว่าการเดินเจอสินค้าเดียวกันในห้างที่ลดราคา 40% เช่นเดียวกัน ข้อความบนเว็บช็อปปิ้งที่ส่งมาหาคุณว่าสินค้าที่คุณเคยสนใจกำลังลดราคาอยู่ อย่าพลาดโอกาสที่จะซื้อตอนนี้ มักกระตุ้นความต้องการซื้อของเราได้เป็นอย่างดี เพราะเรากลัวที่จะเสียโอกาสดี

By

3 mins read
Thai
29
May, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
29 May, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
แต่ก่อน เวลาที่เว็บไซต์ถูกดีไซน์ด้วยฟอนต์แปลก ๆ หรือมีเอกลักษณ์เฉพาะตัว จะทำให้ผู้ใช้งานบางคนมองไม่เห็น เพราะในเครื่องของผู้ใช้งานไม่มีฟอนต์นั้น ระบบก็จะเลือกเอาฟอนต์อื่นในเครื่องขึ้นมาแสดงผล เห็นเป็นฟอนต์อื่นไป ทำให้ดีไซเนอร์ต้องแก้ปัญหาด้วยการทำรูปแล้วเอามาแปะในเว็บไซต์แทน หรือแม้ว่าจะแสดงผลตามที่ถูกออกแบบมา ความเร็วก็อาจเป็นปัญหาในการโหลดและเข้าถึง เพราะฟอนต์ถูกโหลดจากเซิร์ฟเวอร์ แต่สมัยนี้ไม่มีใครใจเย็นพอที่จะรออะไรนานๆ เพราะจากรายงานระบุว่า 40% ของคนที่เข้าเว็บไซต์ จะออกหรือปิดทันทีถ้ามีการโหลดนานกว่า 3 วินาที โดยเฉพาะนักช็อปออนไลน์เกือบครึ่งที่พร้อมจะหันหลังให้อีคอมเมิร์ซเว็บไซต์ที่โหลดช้ากว่า 2 วินาที และ 79% บอกว่ามีโอกาสที่จะไม่ใช้บริการอีก Google Fonts คืออะไร? (กันแน่) หลายคนคงรู้จัก Google Fonts แต่วันนี้เราจะพามาทำความรู้จักให้มากขึ้น

By

4 mins read
Thai
29
May, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
29 May, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
S&P Food’s yearly revenues were 435 mils $USD. 10% of the revenue was from online sales. The board of directors felt that online sales should account for more. The digital

By

4 mins read
English

Let’s build digital products that are
simply awesome !

We will get back to you within 24 hours!Go to contact us
Please tell us your ideas.
- Senna Labsmake it happy
Contact ball
Contact us bg 2
Contact us bg 4
Contact us bg 1
Ball leftBall rightBall leftBall right
Sennalabs gray logo28/11 Soi Ruamrudee, Lumphini, Pathumwan, Bangkok 10330+66 62 389 4599hello@sennalabs.com© 2022 Senna Labs Co., Ltd.All rights reserved.