โปรแกรม Sketch ออกแบบ UX UI บน Mac ยอดนิยม

sketch review
Share on facebook
Share on twitter
Share on telegram
แนะนำโปรแกรม Sketch โปรแกรมออกแบบ UX UI พร้อมเทคนิคลับสำหรับเพิ่มความเร็วให้กับโปรแกรม สอนการใช้งานฟีเจอร์อย่าง Symbol, Smart layout ครบจบในบทความนี้

โปรแกรม Sketch เป็นโปรแกรมที่ยังคงมาแรง แอดเพิร์ธเคยเขียนบทความแนะนำโปรแกรม Sketch และช่วยรัน Community ของ Sketch ในประเทศไทยมาควบคู่กับพี่หลง พัทยา

โดยในปัจจุบันโปรแกรมออกแบบได้มีการแข่งขันกันอย่างสูง ไม่ว่าจะเป็นฝั่งของ Adobe XD, Figma, Sketch หรือจะเป็น Invision Studio แต่ที่มาแรงสุด ๆ ก็เห็นจะเป็น Figma และ Adobe XD โดยดีไซน์เนอร์หลายท่านก็แอบเทใจย้ายจาก Sketch ไปทำงานบน Figma กันหมด แอดนัทเคยเขียนบทความเปรียบเทียบโปรแกรมออกแบบ UX UI ไว้ด้วยนะคะ เทียบกันทั้งแต่ 3 โปรแกรม ว่าอันไหนจะเหมาะกับเราที่สุด

และเนื่องด้วยวันก่อน Designil ได้ทำวิดีโออัพเดทพูดคุยเรื่องของ Sketch ไป แต่ว่าเกิดขัดข้องทางเทคนิค วันนี้แอดนัทเลยจะมาเขียนบทความ พร้อมแนบวิดีโอให้ทุกคนได้เรียนรู้ความคืบหน้าของโปรแกรม และ Community สุดเจ๋งของ Sketch กันค่ะ ใครที่อยู่ฝั่ง Sketch ก็มาติดตามอัพเดทโปรแกรมสุดคูลนี้กันได้เลย


รีวิวราคาและฟีเจอร์ โปรแกรม Sketch

Sketch โปรแกรมนี้ไม่มีเวอร์ชั่นฟรีนะคะ ใช้งานได้แค่บนเครื่อง Mac

สำหรับส่วนบุคคล
– ซื้อขาด 3,300 บาท
– ค่าต่ออายุ 1,650 บาทต่อปี
-1 License ลงได้ 2 เครื่อง

สำหรับบริษัท 300 บาท/คน/เดือน – หรือ 3,250 บาท/คน/ปี

Sketch ใช้งานง่ายคล่องมือ อย่างนัทเองทำงาน UI UX ของเว็บไซต์เป็นหลัก ไม่ค่อยมีพวก Interaction มาเกี่ยวข้องมาก แต่คำนึงเรื่องของ Accessibility, Color profile และ Library ของ Design system ด้วยตัวโปรแกรมที่โดดเด่นเรื่องของการจัดการ Library ที่เป็นมาตรฐาน Sketch ก็เลยตอบโจทย์นัทที่สุดในตอนนี้

ถ้าถามเรื่องความอืดของโปรแกรม ค่อนข้างช้า แต่ถ้าเราสร้างทุกอย่างเป็น Symbol แล้วล่ะก็ โปรแกรมจะไวขึ้นเท่าตาเห็นเลยค่ะ (ทดลองมาเองกับมือ!)


รีวิวหน้าตาของโปรแกรม

รีวิวการใช้งาน Sketch หน้าตาโปรแกรม วิดีโอสั้นเข้าใจง่าย

วิดีโอด้านบนนี้เป็นวิดีโอ 5 นาที รีวิวหน้าต่างของโปรแกรม Sketch , เมนูบนหน้าจอ มีอะรบ้างที่เราต้องรู้ หากเราจะใช้ Sketch ในการออกแบบ แล้วก็มีแนะนำปลั๊กอินที่น่าสนใจที่ใช้ทำงานเป็นประจำด้วยค่ะ

และนอกจากนี้ในบทความนี้เรามีวิธีมาช่วยเพิ่มพลังโปรแกรมของเราให้เร็วทะลุฟ้า
ติดตามอ่านด้านล่างนี้ได้เลย


เทคนิคลับสำหรับคนใช้ โปรแกรม Sketch

ทำงานไวขึ้นด้วยการสร้าง Symbol

ด้วยโปรแกรม Sketch ได้อัพเดทใหม่ เรามี Shortcut ในการสร้าง Symbol คือ
Layer › Create Symbol ในแถบเมนู, หรือกดปุ่ม  + Y

สร้าง symbol บนโปรแกรม Sketch เป็นเทคนิคที่ทุกคนต้องรู้
สร้าง symbol บน Sketch เป็นเทคนิคที่ทุกคนต้องรู้

Smart layout ช่วยให้งานเป็น Responsive

ออกแบบปุ่มแบบ responsive ด้วย smart layout
ออกแบบปุ่มแบบ responsive ด้วย smart layout
การตั้งค่า Layout ตำแหน่งของปุ่มใน Sketch
การตั้งค่า Layout ตำแหน่งที่เราอยากให้มันอยู่ เวลาทำเป็น responsive จะได้ไม่ต้องมานั่งแก้ไข

Smart Layout จะช่วยให้เราแก้ไข Symbol ประเภทปุ่ม แล้วก็ยังคง Padding, Spacing ระหว่าง Layer ใน Symbol ของเราได้ แก้ไขไฟล์ ขยายตัวหนังสืออะไรก็ได้โดยที่ Padding ยังเท่าเดิม! แน่นอนว่าเวลาเปลี่ยนขนาดของหน้าจอ ทุกอย่างก็จะปรับไปตาม responsive ด้วย

Plugin สุดคูลช่วยเพิ่มพลัง Sketch

Sketch plugin
Sketch plugin

เราสามารถดาวน์โหลด Plugin มาเสริมพลังของโปรแกรมได้ ไม่ว่าจะเป็นปลั๊กอินช่วยจัดการ Symbol อย่าง Merge duplicate, Symbol organizer, Stark ที่เอาไว้ช่วยทำ Accessbility และปลั๊กอินที่เอาไว้ทำ Flow สำหรับแอพลิเคชั่นอย่าง User flows

ปุ่มวิเศษ Tidy

ปุ่มวิเศษ Tidy บน Sketch
ปุ่มวิเศษ Tidy บน Sketch

ช่วยจัดเรียงไฟล์ของเราให้มีระยะห่างระหว่างแถว และคอลัมน์ของสิ่งของบน Artboard ของเราาให้มีตำแหน่งเท่า ๆ กัน ตามภาพ


อัพเดท Sketch เวอร์ชั่นล่าสุด

เรียนการใช้ Sketch ผ่านเว็บไซต์แบบฟรี ๆ
เรียนการใช้ Sketch ผ่านเว็บไซต์แบบฟรี ๆ

ติดตามข่าวสารไม่ว่าจะเป็นเรื่องของ Plugin และเวอร์ชั่นใหม่มีอะไรบ้าง บนเว็บไซต์ของ Sketch.com ในเว็บนี้มีสอนวิธีการใช้งานแบบละเอียดทุกฟีเจอร์!!! เรียนกันได้จากเว็บไซต์เลยค่า


บทความหน้าจะมีอะไรมาอัพเดท อย่าลืมติดตามกันบน Designil ดีไซน์นิวนะคะ แล้วเจอกันใหม่ค่ะ 😀

อ่านบทความที่น่าสนใจอื่น ๆ ด้านล่างนี้
เปรียบเทียบโปรแกรมออกแบบ UX UI
Sketch แนะนำโปรแกรมออกแบบ UI Design

Share:

Share on facebook
Facebook
Share on twitter
Twitter
Share on telegram
Telegram

4 Responses

  1. Pingback: Sketch โปรแกรมออกแบบ UI Design สุดฮอตที่ใช้กันทั่วโลก !!
  2. Pingback: [วิดีโอ] สอนใช้ Sketch โปรแกรมออกแบบสำหรับผู้เริ่มต้น - Designil
  3. Pingback: วิธีซื้อ Photoshop CC ของแท้ราคาพิเศษ ถูกสุด ๆ แค่วันละ 8 บาท !!
  4. Pingback: Design version control คืออะไร ทำไมทีมใหญ่ถึงใช้กัน - Designil

Leave a Reply

Your email address will not be published. Required fields are marked *