sketch-meetup-thailand

Sketch 3 Meetup ครั้งที่ 1

เป็นครั้งแรกของการรวมตัวคนใช้โปรแกรม Sketch 3 โดยมีแต่ใน Mac แต่ฝั่ง window ไม่ต้องเสียใจมาดูกันว่างานนี้มีอะไรดี อะไรเจ๋งและได้เจอคนเด่นดังด้าน Design ของเมืองไทยมากมายครับความรู้จัดเต็มกับ 4 ชั่วโมงในงาน Sketch Meetup #1

รายละเอียดต่างๆคราวๆ

แนะนำให้ไปอ่านที่บทความของเจ้า Perth เลยครับที่เว็บ www.designil.com ที่นี่ลง

http://www.designil.com/sketch-meetup-1-thailand.html

ส่วนเนื้อหาในบทความนี้จะเน้นไปว่า ผู้เขียนไปเจออะไรและได้เรียนรู้อะไรมาบ้างนะครับ เอาล่ะ ! เริ่มกันเลยดีกว่า

Section 1: ทำความรู้จัก

sketch-3
sketch-3

ไม่ใช่การทำความรู้จักคนร่วมงานแต่หมายถึงว่า ทำความรู้จักกับตัวโปรแกรมว่า วันนี้จะได้เรียนรู้อะไรอย่างไร และทำไมเราต้องเสียเงินซื้อมันมา ข้อดี ข้อเสีย และก็กำหนดการคราวๆว่าจะคุยเรื่องอะไร โดยกว่าผมจะไปถึงก็เริ่มเกือบจะ Section ที่ 2 แล้วจ้า เงิบเลย แต่อันแรกก็ไม่มีอะไร อย่างที่บอกไป

Section 2: นั่งเสวนา

sketch-3
sketch-3

ก็ให้มีพิธีกรมาร่วมกันพูดว่าใช้โปรแกรมนี้ในงานอะไรกันบ้าง และมันสะดวกอย่างไร มีทั้งระดับหัวหน้า นักออกแบบ และ Freelancer โดยแบ่งปันข้อมูลดีๆได้ดังนี้

  • ตัว Sketch 3 เหมาะกับงาน Digital ไม่เหมาะกับงานด้าน Printing ฉะนั้นก่อนใช้คิดให้ดีก่อน
  • รีทัชรูปไม่ได้ เพราะฉะนั้นอย่าคิดไปไกล ไม่ใช่สารพัดประโยชน์แต่ แต่งรูปบางอย่างได้เช่น กรอบรูป , เงา , Mark
  • โปรแกรมนี้มีขนาดเบามาก ตอนแรกผมคิดว่ามันจะเป็น GB แต่รู้ไหมเท่าไร 25 MB ใช่ครับ MB
  • ค่อนข้างดีกับด้านการออกแบบ Wireframe อ่ะงง คืออะไร อ่านที่นี่เลย
    http://www.designil.com/wireframe-website-free-download.html
  • มีพวก Template ต่างๆของการออกแบบ Mobile และเว็บให้ระดับที่เรียกว่า Developer ยังทำเองได้ เดี๋ยวจะให้ดูงานผมที่ทำในงานครับมันง่ายสุดๆเลย
  • จากข้อข้างบนคือข้อดีว่า เรียนรู้ง่าย ไม่งง ไม่เหมือน AI, PS กว่าจะรู้อะไรอยู่ตรงไหนเล่นเอาเหนื่อย
  • หากมาจากสาย Design จะใช้เป็นเร็วมากๆ เพราะในงานมีคนใช้มาก่อน 2 วันก็รู้จุดดี จุดด่อยหลายจุดเลย
sketch-3
sketch-3

ประมาณนี้จริงๆมีอีกเยอะข้อดีที่จะยอมเสียเงินให้ บ้างคนอาจจะบอกว่าแพงแต่คิดว่า กระแสการใช้โปรแกรมนี้จะมาแรงขึ้นเรื่อยๆ และในราคาถูกกว่าต้องซื้อ AI และความใช้งานง่าย + Plugin หลายๆตัวเทพมากจริงๆ ซึ่งจะแนะนำในบทความนี้ให้ดู ติดตามอ่านต่อไปครับ

Section 3: ทดลองใช้

ช่วงนี้จะเป็นการสอนให้ลองใช้ครับ ซึ่งในตัว Sketch 3 จะมี Page และ Art board เรามาลองทำความเข้าใจกับมันดูครับ

Page ก็เหมือนหน้าที่เราออกแบบซึ่งให้คุณคิดว่าหน้า Home หรือ หน้าแรก อย่างนี้ แล้วในหน้าแรกนั้นคุณคงต้องออกแบบอีกหลายหน้าจอ หลายขนาดให้เหมาะกับอุปกรณ์ที่กำลังเปิดชมอยู่ ก็แปลว่าหน้า Home ของคุณมีหลายแบบซึ่งแต่ละแบบก็ต้องแตกต่างกันไปเช่น ดูในมือถือแสดงผลแบบไหน ดูใน Tablet แสดงผลแบบไหน Page ก็เหมือนเป็นชื่อกลุ่มของงานออกแบบหน้านั้นๆครับซึ่งในนั้นเราจะมี Art board อีกที

sketch-3
sketch-3

Art board ก็ตรงๆตัวเลย เป็นเหมือนบอร์ดที่มีแต่ละ Design ในนั้น เช่น จากตัวอย่าง Page ที่มีหน้า Home ก็จะมี Art board อยู่ 3 – 4 แบบซึ่งแต่ละ Art board ก็คือแต่ละ Screen size นั่นเองครับ

ส่วนใหญ่ที่เหลือจะมีพวก Template ios หรือของเว็บก็สามารถหาได้จาก เมนู File > New From Template แล้วก็เลือก Templete ที่เราต้องการได้ครับ อันนี้อาจจะไม่เห็นภาพผมจะตัดมาให้ดูซักหน่อย

artboard-template
artboard-template

จะเห็นว่าซ้ายมือของเรานั่นคือ Layer ครับและ copy – paste ในงานของเราได้ต่อเลย สะดวกและสามารถเลือกแค่ บางอัน หรือ 1 อันที่เราต้องการได้อีก ถือว่าเราไม่ต้องออกแบบอะไร เลย เอาล่ะ ในโจทย์ของงานจะทำออกมาคล้ายๆหน้า UI ของ Instargram ไปดูผลงานของผมดีกว่า

skatch-3-traning-ui
skatch-3-traning-ui

ซึ่งพวกภาพ Mock up หรือ Text ที่ใช้ mock เราจะมีเครื่องมือมาช่วยตรงนี้แนะนำให้ใช้ https://github.com/timuric/Content-generator-sketch-plugin วิธีลงก็ download มาเสร็จแล้วเปิด Folder plugin ของ sketch 3 วิธีการหาว่า Folder มันอยู่ไหนให้ไปที่เมนู

sketch-3-plugin
sketch-3-plugin

แล้วเลือก Reveal Plugins Folder ครับเสร็จแล้ว copy เอาไปใส่ในนั้นมันก็จะขึ้นตรงเมนูแรกเหมือนในภาพด้านบนครับ วิธีใช้ก็ลองมั่วๆดูได้เลย ไม่ยากขนาดผมมือใหม่ยังทำได้ คุณก็ทำได้ครับ

Section 4: แนะนำเครื่องมือช่วยเหลือเพิ่มเติม

ส่วนนี้จะเป็นการให้แต่ละคนที่เคยใช้เจ้า Sketch 3 ออกมาแนะนำว่าตัวเองใช้เครื่องมืออะไรบ้าง แล้วมันช่วยให้ชีวิตดีอย่างไร ตรงนี้ผมไม่ค่อยได้ฟังเท่าไรแล้ว แต่ก็ยังตามเก็บได้บ้างตัวเช่น เจ้าตัวนี้เลยมันชื่อว่า Zeplin เว็บตามนี้ https://zeplin.io/ ซึ่งจะช่วยให้ Frontend สามารถเข้าดูได้ว่า Font ใช้ตัวอะไร ระยะห่างแต่ละ Div เท่าไรอย่างไร โดยไม่ต้องมาถามทาง Designer บ่อยๆ ครับ

เครื่องมือที่ช่วยทำ Prototype แบบคลิกได้จาก Design แต่ไม่มี effect นะอารมณ์แบบคลิกตรงนี้แล้วให้ Link ไปหน้าไหน ปาดทางซ้ายไปไหนอย่างไร คือ ปกติเวลาออกแบบมันยังเล่นพวกนี้ไม่ได้ จึงมีเครื่องมือตรงนี้มาช่วยครับ ได้แก่สามตัวคือ Frame.js , Invision , Origami

ผมฟังแค่ตัว Invision แต่ก็คิดว่าตัวอื่นคงทำได้ใกล้ๆกันคงต้องไปลอเล่นเองแล้วแหละครับ ตัวอย่างความสามารถของมันครับ nvision ฟรี 3 โปรเจ็ค ทำ prototype , support web, mobile , คนมาดูงานแล้ว comment งานได้ , export asset , version control , sync

สรุป

ถือเป็นงานที่ดีมากที่จัดครั้งแรกแล้วมีคนมาร่วมงานเยอะขนาดนี้ และหลายๆคนก็ได้ความรู้และ connection ใหม่ๆ เต็มไปหมด แต่เชื่อเถอะว่าโปรแกรมมันดีจริงๆ เอามาทำนู้นนี่เล่นได้ง่ายๆเลยนะเออ แล้วอีกอย่างเป็นนักศึกษาลด 50% อีก แม่เจ้า ! ผมซื้อตอนมันลด 20% เองซื้อไว้ไม่เสียหายครับ

11201122_10204079968264410_1176428279622347133_o

หากชอบใจสามารถติดตาม กด Like กด Share ได้นะครับขอบคุณครับ

Credit

  • ขอบคุณร้าน NE8T สำหรับสถานที่ดีๆ กว้างใหญ่มาก
  • ขอบคุณทีมงานผู้จัดครับ
sketch-3
sketch-3
Loading

เป็นโปรแกรมเมอร์ที่ตามหาคุณค่าของชีวิตและความฝันในวัยเด็ก ชอบเล่นเกม เรียนรู้ทุกอย่าง ชอบเจอคนใหม่ๆ งานสังคมทุกชนิด ออกกำลังกายในวันว่าง อ่านหนังสือ มีเว็บรีวิวหนังสือด้วย www.readraide.in.th