แนะนำ Sketch 3 แอพสำหรับออกแบบเว็บไซต์ หรือ user interface ที่ใช้ง่ายมากๆ

blog-sketch3

คำถามที่พบบ่อยๆ จากคนคนที่สนใจงานออกแบบเว็บไซต์ และ mobile app มักจะถามกันก็คือ

“ถ้าจะออกแบบเว็บ จะใช้โปรแกรมอะไรออกแบบและวางเลเอาต์เว็บไซต์?”

คำตอบที่ได้ยินกันมาตลอด 10 ปี 20 ปี ที่ผ่านมาก็คือ

“Photoshop สิ พี่เค้าทำได้ทุกอย่างแหล่ะ ไม่ว่าจะลดสิว ลดกระ ทำหน้าเด้ง แขนเล็ก เอวคอด… “

ใช่หรอออ โฟโต้ช็อปเค้าไว้แต่งรูป! ชื่อก็บอกอยู่แล้ว แต่ในเมื่อมันไม่มี tool เราก็เอา photoshop มาประยุกต์ใช้เป็นเครื่องมือออกแบบเว็บกันทั่วบ้านทั่วเมือง

“Illustrator สิ ออกแบบเว็บก็เหมือนออกแบบกราฟฟิกอื่นๆแหล่ะ ใช้อิลัสเล้ยย ของถนัดพวกเราอยู่แล้ว วาดการ์ตูนนี่สบายย”

นี่ก็เหมือนกัน อิลัสเค้าใช้ทำภาพประกอบ ตามชื่อโปรแกรมจ้ะ

“Fireworks ไงแจ๊ะ รู้จักมั้ย?”

ไม่รู้จักอะพี่… มันมีด้วยหรอโปรแกรมนี้

จริงๆ เราใช้โปรแกรมอะไรออกแบบก็ได้ บางคนถึงกับใช้ keynote / micorsoft paint ด้วยซ้ำ มันแล้วแต่ความถนัดของแต่ละคน โปรแกรมมันเป็นแค่เครื่องมือที่เราใช้งานเพื่อที่จะสื่อสารสิ่งที่เราดีไซน์ออกมาให้คนอื่นเห็นเท่านั้น แต่คำถามก็คือ “แล้วมันมีมั้ย โปรแกรมหรือแอพพลิเคชั่น ที่ถูกสร้างขึ้นมาเพื่อใช้ออกแบบ user interface จริงๆ?” ถ้าเป็นเมื่อก่อน ซัก 3-4 ปีที่แล้วคงตอบยาก แต่วันนี้ตอบได้เลยมี มีหลายแอพด้วย แต่ที่เราจะมาแนะนำกันวันนี้ก็คือ แอพที่ชื่อว่า Sketch 3

* ตอนนี้ Sketch 3 มีให้ใช้งานได้แต่เฉพาะบน Mac OS เท่านั้น

Sketch 3 คืออะไร

Sketch 3 เป็นแอพที่ถูกพัฒนาขึ้นเพื่อใช้สำหรับออกแบบ user interface (UI) โดยเฉพาะ ไม่ว่าจะเป็น website, mobile application design, web application design ที่บอกว่าสำหรับใช้ออกแบบ UI โดยเฉพาะก็เพราะว่ามี Sketch นั้นเครื่องมือต่างๆ มากมาย ที่ทำให้ชีวิตของนักออกแบบ digital product ง่ายขึ้น ทุกวันนี้ฮิตมากๆ ในหมู่นักออกแบบทั่วโลก นักออกแบบชาวไทยก็เริ่มหันมาสนใจกันมากขึ้นแล้ว เห็นได้จากเพิ่งมีงาน Sketch Meetup ครั้งแรกกันไป ผู้คนไปกันล้นหลามมากๆ ต้องขอขอบคุณน้อง @woraperth ตัวตั้งตัวตีที่ช่วยจัดงานนี้ขึ้น จนเกิดเป็น Sketch User Thailand Facebook Group ใครสนใจไปกด Join Group กันได้ มีเพื่อนๆ มาคอยอัพเดทเทคนิควิธีการใช้ แชร์ resource ต่างๆ ที่มีประโยชน์เยอะมากๆ

ข้อดีของ Sketch 3

  1.  มี Learning Curve ที่ต่ำมาก เชื่อว่าหากสนใจศึกษา ใช้เวลาแค่ 1 วันก็พอที่จะใช้งานได้จริงแล้ว
  2. Sketch 3 งานจะเป็น vector based เหมือน illustrator ฉะนั้นไม่ต้องกังวลว่าไฟล์งานจะแตกเมื่อขยาย ฉะนั้นจึงเหมาะกับงานพวก mobile app ที่ต้องทำกราฟฟิกให้รับกับขนาดของหน้าจอที่หลากหลาย
  3. ขนาดไฟล์เล็ก เมื่อเทียบกับ photoshop ทำให้การทำงานลื่นไหล แรมเหลือๆ เอาไปเปิดดู TED talk ได้สบาย (แต่ถ้าใส่รูปในงานเยอะ ก็อาจเกิดปัญหาไฟล์ใหญ่ยักษ์ เครื่องอืดได้ ฉะนั้นก่อนใส่รูปในงาน ลดขนาดลงก่อนสักนิดค่ะ)
  4. ทำชุดกราฟฟิกเป็น symbol ได้ เช่น ปุ่ม ที่ต้องใช้บ่อยๆ หากต้องมีการเปลี่ยนสี การทำเป็น symbol จะช่วยให้คุณไม่ต้องตามไปเปลี่ยนทุกปุ่ม ถ้าปุ่มนั้นเป็น symbol เปลี่ยนที่เดียว ทุกปุ่มที่เป็น symbol เดียวกัน ก็จะเปลี่ยนตามกันไปหมด
  5. สามารถ live preview บน device อื่นๆ ได้เลย หากคุณออกแบบ UI สำหรับ iPhone App สิ่งที่นักออกแบบต้องทำเสมอคือการนำหน้าจอที่เราออกแบบไปลองเปิดดูบนขนาดหน้าจอจริง (เพราะเราออกแบบให้คนใช้บน iPhone, iPad, Android ไม่ใช่ใช้บน Desktop) Sketch ได้เตรียมในส่วนนี้ไว้ให้แล้ว ทำให้สะดวกมากๆ ไม่ต้องคอย save ออกมาเป็นรูปมาดู แต่สามารถดูหน้าที่เราออกแบบบน device อื่นได้ real-time เลย ขนาดปุ่มเล็กไป? ก็ปรับแก้กันเลย ไม่เสียเวลา
  6. เหมาะกับทำหน้าเว็บแบบ responsive เพราะ Sketch ได้จัดเตรียม preset ขนาด artboard สำหรับหน้าจอต่างๆไว้ให้แล้ว
  7. เหมาะกับงานที่ต้องแก้ไข หรือมีรายละเอียดของดีไซน์ปลีกย่อยเยอะๆ เพราะว่าสามารถสร้าง artboard ใน page เดียวกัน เพื่อที่จะได้เห็นภาพรวมได้ดีขึ้น
  8. ตั้งค่า Text style ได้ อันนี้สะดวกเหมือนเวลาทำงานบน page / keynote ที่เราจะมีชนิดของตัวอักษรที่ใช้บ่อยๆอยู่ไม่กี่ชนิด เช่น หัวข้อ, เนื้อหา, ลิ้งค์ ไอเดียจะคล้ายๆ symbol คือเปลี่ยนเดียว เปลี่ยนหมด ไม่ต้องตามแก้ทุกจุด
  9. ใส่ effect ต่างๆ ได้ เช่น border / drop shadow / inner shadow / ไล่สี ฯลฯ แถมไม่ทำให้เครื่องหนัก เพราะอย่างที่บอก มันเป็น vector ทั้งหมด
  10. สามารถ export กราฟฟิกแต่ละตัวในหน้านั้นแยกออกมาได้ง่าย แถมยังเลือกได้ว่าจะเอา 1x 2x 3x (เพราะมันเป็น vector) เช่น ทำไอคอนสำหรับใช้ใน iOS app ซึ่งไม่ต้องมานั่งย่อขยายให้ปวดหัว ทำทีเดียว เลือก export มาได้หลายขนาด
  11. เป็นมิตรกับ Front-end Developer เพราะสามารถ copy stylesheet (css) ของ element ตัวนั้นๆออกไปใช้เขียนโค้ดต่อได้เลย
  12. มี Sketch plugins ที่ช่วยให้การทำงานง่ายขึ้น ออกมาให้งานฟรีๆ มากมาย
  13. ราคาถูกมากจ่ายครั้งเดียวแค่ $99 อัพเดทได้ตลอด ถูกกว่าโปรแกรมตระกูล Adobe เป็นไหนๆ แถมได้ใช้ของถูกลิขสิทธิ์ ไม่ต้องกลัวโดนจับด้วย
บทความแนะนำ  ทำไม Designer จึงควรจะต้องศึกษาการเขียนโปรแกรม

หากสนใจจะลอง Sketch 3 ขอแนะนำให้ไปตามอ่านบล็อคของคุณ Meng To ผู้เชี่ยวชาญ Sketch คนแรกๆ ที่เขียนบทความสอนใช้โปรแกรม Sketch 3 ลองอ่านแล้วทำตาม 1 วันรับรองเห็นผล! หากใครอยากเจาะลึกการใช้งาน Sketch 3 ก็ขอแนะนำให้ซื้อ ebook: design+code ของเฮียแกดู $50 นี่คุ้มมาก แถมยังได้ส่วนลดสำหรับซื้อแอพ Sketch 3 อีก คุ้มจริงๆ

ปล. ทั้งหมดที่พูดมา ไม่ได้มีส่วนได้ส่วนเสียกับผู้พัฒนา Sketch 3 หรือคุณคนเขียนหนังสือ design+code เลยนะคะ เพราะส่วนตัวตอนนี้เปลี่ยนมาใช้ Sketch 3 แทน Photoshop มาได้ปีกว่าๆ แล้ว ยังไม่เคยเจออารมณ์อยากกลับไปใช้ Photoshop เลย จึงคิดอยากจะแชร์ให้ดีไซน์เนอร์คนอื่นๆ ลองเปลี่ยนมาใช้ Sketch กันเถอะ แล้วคุณจะมีเวลาเหลือในชีวิต เอาไปปั่นจักรยาน วิ่งออกกำลังกาย อ่านหนังสือพัฒนาตัวเองได้อีกเยอะ :D

Bow Kraivanich

โบ ไกรวณิช เป็น UI/UX ดีไซน์เนอร์ ผู้ร่วมก่อตั้ง Magnetolabs Co., Ltd. บริษัท Inbound Marketing Agency แห่งแรกๆ ในประเทศไทย มุ่งเน้นการออกแบบและพัฒนาเว็บไซต์เพื่อการทำการตลาดแบบ Inbound โดยเฉพาะ ชอบอ่านหนังสือ เขียนบล็อค และเป็นนักทดลองเครื่องมือหรือ Tools ใหม่ๆ ที่หลงไหลในกีฬาปีนหน้าผา และการเล่นบอร์ดเกมส์

Comments

comments