Style Guide

Style Guide

Style Guide คือ องค์ประกอบพื้นฐานของการออกแบบในงานของเราทั้งหมด เช่น สี, รูปแบบตัวอักษร, โลโก้, รูปแบบรูปภาพที่ใช้ภายในงาน

🖍 Color

เบื้องต้นการทำ Design System สีเป็นองค์ประกอบที่ไม่พูดถึงไม่ได้ สำหรับสีเราอาจจะแบ่ง สีหลัก (Primary color), สีรอง (Secondary color) และกำหนดวิธีการใช้สีต่าง ๆ ไม่ว่าจะเป็นน้ำหนักการใช้สีให้หนึ่งหน้า หรือสีของปุ่ม และอื่น ๆ

ตัวอย่าง

🖍 Typography

การกำหนดรูปแบบ และขนาดของตัวอักษรแต่ละส่วน ในการทำ Design System เราอาจจะกำหนด font ที่ใช้สำหรับหัวเรื่องคือ font อะไร ขนาดเท่าไหร่ เป็นต้น

ตัวอย่าง

🖍 Grid

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

ตัวอย่าง

🖍 Artwork & Icon

การกำหนดขนาด และสีที่ใช้ภายในโลโก้

ตัวอย่าง

🖍 Button

เป็นการออกแบบรูปแบบต่าง ๆ ของปุ่ม

ต้วอย่าง