Style Guide

ข้อมูลจำเพาะของจินดาธีม - เราคือใคร หน้าตา และวิธีการใช้งานเป็นอย่างไร?

ที่มา

จินดาธีม ก่อตั้งขึ้นในช่วงกลางปี 2014 จากสองนักพัฒนาเว็บไซต์ที่ต้องการขยับขยายจากฟรีแลนซ์ขึ้นมาอยู่ในรูปของนิติบุคคล โดยต้องการใช้ชื่อไทย และเกี่ยวข้องกับงานด้านเว็บไซต์ "JindaTheme" คำว่า จินดา(Jinda) นั้นเป็นคำไทยความหมายดีทำนอง เพชรนิลจินดา มีความสง่าสวยงามแข็งแรง หรือฉลาดหลักแหลมในทำนองเดียวกัน และคำว่า ธีม(Theme) ซึ่งเป็นคำที่ใช้สร้างหน้าตาของเว็บไซต์ให้ดูสวยงาม เมื่อนำมารวมกันแล้วจึงได้ออกมาเป็นคำที่เหมาะสมมีความหมาย และเกี่ยวข้องกับสิ่งที่เราทำ

ข้อมูลจำเพาะเหล่านี้คืออะไร?

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

สัญลักษณ์ของเรา (Logo)

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

  1. JindaTheme - ชื่อของเรา
  2. Transform Ideas into Gems - Tagline ที่เราใช้

Our Logo

ระยะห่าง และการจัดวาง

ระยะห่างสำหรับการวางไฟล์รูปโลโก้จะมีขนาดฝั่งละ 15px(หน่วยเป็นพิคเซล) ทั้งบนล่างซ้ายขวา ไม่ควรนำโลโก้ไปวางอยู่บนพื้นหลังที่มีสิ่งรบกวนสายตา, เปลี่ยนสี, ปรับหมุนองศา, กลับหน้าหลัง หรือใส่แสงเงา

Positioning

ค่าสีหลัก (Brand colors)

ค่าสีหลักของเราบ่งบอกถึงความเป็นเอกลักษณ์เฉพาะตัว สีส้มสองเฉดแสดงให้เห็นว่าเราเป็นทีมงานคนรุ่นใหม่ กล้าคิด กล้าทำ มีความคิดสร้างสรรค์ ตัดกับสีน้ำเงินที่มีความหนักแน่น และความมั่นใจ

Our Colors

เฉดสีเทา (Grey colors)

เฉดสีเทาของเราจะใช้กับตัวหนังสือ, พื้นหลัง, เส้นขอบ, เส้นตัดแบ่ง รวมไปถึงเฉดสีขาวที่ใช้กับไอคอน และตัวหนังสือบนปุ่ม หรือพื้นหลังที่เป็นเฉดสีเข้ม

Grey colors

รูปแบบตัวอักษร (Typography)

เราเลือกใช้รูปแบบตัวอักษร 2 แบบคือ Montserrat และ Mitr แยกตามประเภทการใช้งาน และขอบเขตของภาษาที่รูปแบบดังกล่าวจะแสดงผลได้ ยกตัวอย่างเช่น Logo และ Tagline ที่ใช้ Montserrat และสิ่งพิมพ์ที่ใช้ Mitr คุณสามารถศึกษารายละเอียดเกี่ยวกับรูปแบบตัวอักษรได้ที่ลิงค์ปลายทางด้านล่าง

Grey colors

ลิงค์เชื่อมโยง และปุ่ม

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

สำหรับปุ่มจะถูกแบ่งออกเป็นสองประเภทคือ primary และ secondary โดยปุ่มที่มีการกระทำไปข้างหน้า, บันทึกข้อมูล, หรือพาเชื่อมโยงไปหน้าปลายทางที่คาดหวังไว้จะใช้ primary(ปุ่มสีส้ม) และการกระทำที่เป็นการย้อนกลับ, ไม่สำคัญ หรือไม่คาดหวังให้ผู้ใช้กระทำจะใช้ secondary(ปุ่มสีดำ)

Buttons

แก้ไขล่าสุด 17/07/2559

Brand Style Guide ขอแนะนำรูปแบบเฉพาะของจินดาธีม