เปิดประสบการณ์ "ครั้งแรก กับ Sketch"

หลังจากที่ได้ไปเข้าร่วมงาน Sketch meetup ครั้งที่ 2 มา ก็มีแรงฮึดผลักดันชีวิตง่วงๆ ให้โหลดโปรแกรม (ฟรี 30 วัน) มาลองเล่น (อ่าน Blog แรกได้ที่นี่ >> เดินสาย เพิ่มสกิล | Sketch Meetup 2 - มาลองของชัดๆ)

เมื่อเปิดโปรแกรมขึ้นมา ก็จะเจอหน้าตาแบบนี้

ยากละไง ยังไงต่อดี... ไล่สายตาแบบเร็วๆ เลือก Web Design Template ละกัน ดูคุ้ยเคยกับชีวิตที่สุด
โอเค มีกระดาษมาให้ทำงาน 4 หน้าจอ มีคำอธิบายในกระดาษแผ่นแรก ช่วยชีวิตได้นิดนึง

ทำไรต่อดีล่ะ?

เอา 2 กระดาษก็พอมั้ง ลบๆ เหลือแค่ Desktop กับ Mobile ก็พอ ละจะทำไรอะ... อ้ากกกกก แอบแวบไปเปิด Facebook Group Sketch user thailand ดูว่าคนที่เค้าส่ง Blog Review กันแล้ว เค้าทำอะไรกัน ผลปรากฏว่า ช็อค! ทำไมเค้าถึงได้เทพกันขนาดนั้น คนนึงก็ใช้เวลา 2 ชม. อีกคนก็ใช้แค่ 30 นาทีแบบมี linkage ด้วย ทำออกมาหน้าตางดงามอลังการ... อยู่ดีๆ ก็รู้สึกทรุด #แงงงงงง

ไม่ ไม่ ไม่ อย่าไปดู ปิดทิ้งไปเลย (เชอะ) เรียกความพลังความตั้งใจของตัวเองกลับมาเดี๋ยวนี้ 3 4 เริ่ม!

เปิดหาแรงบันดาลใจจาก pinterest และเว็บไซต์ HomeAway เอาเรื่องเที่ยวละกันเนอะ ขออำนาจคุณโปรแกรม balsamiq ที่ลูกใช้มาหลายเดือน โปรดดลบันดาลให้ลูกใช้งานโปรแกรม Sketch เป็นด้วยเถอะ เพี้ยง!

เริ่มจาก ลง Plugins ก่อนละกัน #แค่เริ่มต้นก็มั่วแล้ว
ไปโหลด Zip file มาตามแหล่งปล่อยฟรี จากนั้นก็เปิด path ในเครื่องตามที่โปรแกรมเค้าบอก แล้วก็ลากสิ่งที่โหลดมา (extract file ก่อนนะ) เอาไปใส่ลงใน Folder

เห้ย มัน sync กับโปรแกรมให้เลย ไม่ต้องปิดโปรแกรมแล้วเปิดใหม่ด้วย มีความดีงาม

เราโหลดมาสองตัว แต่ใช้จริงตัวเดียว คือตัวที่ Random ภาพฟรี นี่ก็กด shortcut เปลี่ยนภาพรัวๆ ...มันมีวิธีไหนเลือกภาพไม๊อะ รู้สึกเสียเวลาไปกับการเลือกภาพเกินกึ่งหนึ่ง 55+

อะ plugins ที่ต้องใช้มาแล้ว ต่อไปก็ icon ละกันเนอะ ไปโหลดมาจาก http://www.sketchappsources.com/ search keyword ของที่อยากได้ แล้วก็กดโหลดรัวๆ ลงมาก่อน ซึ่งใช้อยู่สองอัน สองอันนี้เป็นไฟล์ sketch เลย

เอาแบบบ้านๆ ที่ไม่รู้ว่ามันต้อง import อะไรยังไง ก็ select icon ที่ต้องการ copy แล้วก็ paste ใส่งานของตัวเองหน้าตาเฉย ซึ่งมันก็ทำได้ไง เราก็เลยเดาเอาว่า มันก็น่าจะต้องทำแบบนี้ล่ะมั้ง 55+

มาที่กระดาษแผ่น Desktop ก่อน

เริ่มจากใส่ rectangle ลงไป ดูเบสิคสุด ใส่ลงไปหลายๆ ก้อน แล้วก็ Shift command U ไปรัวๆ เพื่อหาภาพที่พอใจ (ระดับนึง) นี่ถ้า search Free stock photo เอง อาจจะเสร็จเร็วกว่า - -"

เราขึ้นงานกลางหน้ากระดาษก่อน เว้น header footer ไว้ทีหลัง บางทีก็งงตัวเอง ทำไมไม่ทำไล่ลงมานะ

แล้วก็ใส่ Text ใส่ Icon ทำไปทำมา เห้ย สนุกอะ! ความรู้สึกเหมือนตอนหัดทำ Photoshop ครั้งแรกสมัยมัธยมต้น เป็นความรู้สึกตื่นเต้นแบบเด็กๆ (ผ่านช่วงเวลานั้นมานานมาก) Sketch ง่ายกว่าตรงที่ Tools มีไม่มาก ไม่ต้องเรียนรู้เยอะ แต่ก็แอบยากเวลาต้องการจะใช้อะไรซักอย่างแล้วมันไม่มี แถมยังไม่รู้ว่าจะไปหามันจากไหนอีกต่างหาก (คือคนอื่นเค้าคงรู้กันแหละ T T)

มี Vector ให้วาดใส่กระดาษได้ด้วยนะ แต่ความสามารถการใช้เม้าส์วาดอะไรนั้นต่ำเตี้ย เอาไปแค่ ลูกศรซ้ายขวาแบบเบี้ยวๆ แล้วกัน

Mock up นี้จะสำเร็จไม่ได้เลย หากขาดคุณ Lorem http://generator.lorem-ipsum.info/ ขอกราบงามๆ ณ ที่นี้

ไล่ทำลงมาเรื่อยๆ จนจบ footer แล้วก็ย้ายตัวเองกลับไปทำ header ตอนนี้เองก็ได้รู้จักกับ symbols ซึ่งเจ้า symbols นี้ concept เดียวกันทุกโปรแกรมตรงที่ ถ้าแก้ที่นึง ที่เหลือมันจะแก้ไปด้วยกัน

ดังนั้น ถ้าเราต้องการลักษณะที่คล้ายกัน แต่ต้องการแก้ ความยาวกรอบ หรือ text size อะไรงี้ เราจะต้อง คลิกขวาที่ folder สีม่วงๆ กด Detach from symbol ก่อน ละมันก็จะกลายเป็น Group ปกติ ที่เราสามารถแก้ไขได้ (folder สีฟ้า)

ซึ่งพอเราแก้อะไรใน folder สีฟ้าๆ แล้ว จะ create มันกลับเป็น Symbol ใหม่ก็ได้เหมือนกัน

และนี่คือ Desktop Version ท๊าดาาาาา...

อะ ไปทำ Mobile ต่อ

วิธีบ้านๆ แบบเราก็ copy item ที่ต้องการจาก Desktop แล้วไป Paste ลงในกระดาษของ Mobile แล้วค่อยไปปรับเอาตามความเหมาะสม คราวนี้ เราทำ header ก่อน

แล้วโดดไป footer

แล้วค่อยมาจัดการส่วนตรงกลาง ปรับ layout ไปมาอยู่สองสามที จนคิดว่า ประมาณก็นี้แล้วกัน

มา Export Mobile กันเถอะ! เห้ย ทำไมไม่มี ทำไมข้างขวามันโล่งอ่ะ หง่าาา คลิกนู่น คลิกนี่อยู่หลายที แล้วก็มาเอะใจว่า มันมี Scroll Bar #ความโง่อยู่ตรงนี้ พอ Scroll ลงมา ก็จะเจอ Mobile นะจ๊ะ

อ่ะ มาดูหน้าตา Mobile กันโหน่ยยยยย

แล้วเราก็ทำเสร็จ! ทั้ง 2 หน้านี้ใช้เวลาไปประมาณ 3 ชั่วโมงกว่าๆ (ไม่รวมเขียน Blog นะฮะ) #เฮือก...เอารางวัลทำนานได้โล่ไปเลย

ปล. เจอร่มหมุนแค่ตอน Random รูปจาก Plugin นั้น แล้วก็เจอปิดตัวเองไป 1 รอบ ซึ่งเปิดมาแล้วงานก็ยังอยู่นะ

สรุปว่า Sketch นี้

• มีความใช้งานง่าย (วัดจากตัวเราที่ใช้ Photoshop เป็นนิดหน่อย บวกกับทำ Wireframe ใน Balsamiq มาก่อน)
• เรียนรู้ด้วยตัวเองได้ "ไม่ยาก" ไม่ต้องอ่านคู่มือ ไม่ต้องดูวีดีโอ How to อะไร ก็สามารถทำได้ (แต่ถ้ามีเวลาศึกษาก่อน ก็น่าจะมีทริคอะไรดีๆ ไม่ต้องมางมมั่วเอาเอง)
• มี Plugins เยอะมาก ตื่นตาตื่นใจ อยากจะโหลดนู่นนี่นั่น แต่ได้ใช้ไม๊ หรือใช้เป็นไม๊ อันนี้ก็อีกเรื่องนึงเนอะ

ตอนนี้ทำ mock up (แบบมั่วๆ) เป็นแล้ว เดี๋ยวจะลองทำอย่างอื่นเพิ่มดู อยากเห็นว่ามันส่งงานต่อให้ Dev ยังไง ด้วย Zeplin หรือ Sympli (ตามที่เค้าแชร์กันในงาน meetup 2) #ขอความช่วยเหลือ Dev ซักคนมาช่วยทำให้ดูหน่อยฮะ

**พื้นที่ขายของ** มี Community ผู้ใช้งานโปรแกรมนี้ในประเทศไทย มีเรื่องใหม่ๆ มาอัพเดทเสมอ หรือถ้ามีปัญหาอะไร ก็มีคนช่วยหาคำตอบให้ได้แน่นอน ^^" 
กด Join ให้ไว! https://www.facebook.com/groups/sketchuserthailand/ 

สุดท้ายนี้

การเรียนรู้สิ่งใหม่ ไม่ใช่เรื่องยาก ขอแค่มีความตั้งใจ :)

- PM สาย Digital Agency

(เราเอง :P)