ทำความรู้จัก คำ และ ความหมายต่างๆ ที่เอาไว้คุยกับดีไซน์เนอร์

3 September 2015

บล็อกนี้ขอนำเนื้อหา จากหัวข้อ [Infographic] ที่จะทำให้คุณคุยกับดีไซน์เนอร์รู้เรื่อง มาอธิบายเพิ่มเติม โดยขยายความในส่วนที่คิดว่าสามารถนำไปใช้งานได้จริง ซึ่งถ้าหากต้องการดูรายละเอียดทั้งหมดสามารถคลิกดูได้จากภาพ Infographic ท้ายบทความ

กระบวนการทำงาน

  • Wireframes - การวาดภาพเลย์เอาท์เบื้องต้น อาจจะวาดด้วยมือลงบนกระดาษ หรือใช้แอพในมือถือ/คอมพิวเตอร์ เพื่อให้มองเห็นภาพรวม ว่าภายในพื้นที่ทำงานจะมีเนื้อหาอะไรอยู่บริเวณไหนบ้าง
  • Comps - เป็นขั้นตอนที่พัฒนาต่อจาก Wireframes โดยในขั้นนี้ ยังเป็นเพียงแค่การออกแบบพื้นที่ โดยมาทำงานบนคอมพิวเตอร์ เพื่อให้เห็นภาพที่ชัดเจนมากขึ้น
  • Prototyp​e - การทำงานที่เข้าใกล้ของจริงมากขึ้น เป็นการนำเอาส่วนไอเดียออกแบบ มาทำให้สามารถใช้งานได้เสมือนจริง หรือใกล้เคียงของจริง

มุมมอง

  • Bleed - การเผื่อพื้นที่ระหว่างเนื้อหาและพื้นที่ขอบด้านนอกสุด
  • Grid - เส้นตารางสมมติที่ใช้อ้างอิงในการจัดว่างส่วนประกอบต่างๆ
  • White Space - พื้นที่ว่างภายในงานออกแบบ
  • Gradient - การไล่เฉดสี ซึ่งอาจจะเป็นการไล่เฉดสีระหว่าง 2 สี หรือ ไล่เฉดสีเดียว จากสีทึบไปยังพื้นที่โปรงใส่
  • Padding - พื้นที่ระหว่าง ตัวเนื้อหา และเส้นขอบ
  • Margin - พื้นที่ระหว่าง เส้นขอบ และเนื้อหาอื่นๆ

ตัวอักษร

  • Leading - ระยะห่างระหว่างบรรทัด
  • Kerning - ระยะห่างระหว่างตัวอักษร ในบรรทัดเดียวกัน
  • Typography - การนำตัวอักษรมาจัดเลย์เอาท์
  • Font - แบบอักษร

งานเว็บ

  • Below the Fold - พื้นที่ด้างล่าง ที่ต้องเลื่อน scroll bar ลงมาดู
  • Responsive - การออกแบบที่สามารถปรับให้รองรับได้ทุกหน้าจอ
  • Resolution - ความละเอียด สำหรับจอคอมพิวเตอร์ ใช้ความละเอียด 72 dpi กล่าวคือ 72 จุดสีต่อ 1 นิ้ว แต่ถ้าเป็นงานพิมพ์ จะต้องใช้รูปภาพที่มีความละเอียด 300 dpi
  • Web Colors - สีที่ใช้ในคอมพิวเตอร์ / เว็บ โดยทั่วไปใช้คำสั่ง Hex Colors ในรูปแบบ #000000 (เลข 0-9 และ A-F)
  • Web Safe Fonts - การเลือกตัวอักษรที่สามารถแสดงได้ในทุกเครื่อง

ภาพต้นฉบับ Infographic : How to Speak Designer