เส้นทางการเฟ้นหาแอปออกแบบเว็บคู่ใจ

19 November 2020 / on Journey / by paipure/ 645 Views

การจะหาแอปออกแบบเว็บไซต์คู่ใจ เป็นเรื่องที่ยากจริงๆ โดยเฉพาะตอนนี้ที่มีให้เลือกมากมาย โดยแต่ละตัวก็มีข้อดี และข้อเสียต่างกัน พวกเราวันดีดีเอง ก็มีเส้นทางการเฟ้นหาแอปที่เหมาะกับเราที่สุด โดยที่ผ่านมาเราทดลองใช้แอปมาแล้ว 4 ตัว คือ Adobe XD, Sketch, Photoshop และ Figma วันนี้จะมาเล่าว่า กว่าเราจะมาใช้แอปที่ใช้อยู่ในปัจจุบัน เราผ่านอะไรมาบ้าง

มาเริ่มกันที่แอปแรก จุดเริ่มต้นของเรา..

Photoshop

พวกเราใช้ Phoshop ในการออกแบบเว็บมาตั้งแต่จำความได้ Photoshop เป็นแอป universal ที่สามารถทำได้ทุกอย่าง ตั้งแต่วางเลเอาท์ ไดคัท แต่งภาพ ไปจนถึงทำ animation การทำเว็บด้วย Photoshop เป็นอะไรที่สนุกมาก เพราะทุกอย่างสามารถจบด้วยแอปเดียว ทำให้จิตนาการที่เรามี สามารถบรรลุออกมาได้ทั้งหมด (ถ้าเรียนรู้การใช้ tool ของมันได้ครบอะนะ)

แต่ข้อเสียของ Photoshop คือ พอทุกอย่างมันประมวลผลเป็นภาพ bitmap มันจะทำให้ไฟล์ใหญ่ แค่ม็อกอัพหน้าเดียว ไฟล์ก็ปาไปกว่า 300 mb บางไฟล์เป็น 1 GB แล้ว ยิ่งปัจจุบันที่เวลาออกแบบเว็บ ต้องแยกดีไซน์ desktop กับ mobile ยิ่งทำให้ไฟล์ใหญ่ไปอีก ซึ่งปัญหาตรงนี้ถือเป็นปัญหาใหญ่ พวกเราจึงเริ่มมองหาแอปที่ใช้ทดแทน

แล้วก็ได้มาเจอกับ…

Sketch

Sketch ในช่วงนั้นเป็นแอปดาวรุ่งพุ่งแรง จริงๆช่วงที่เราใช้ Photoshop กันอยู่ก็ได้ยินข่าวมาซักพักแล้ว แต่ด้วยความที่กลัวการเปลี่ยนแปลง เลยไม่กล้าลองใช้ซะที จนกระทั่งคอมพื้นที่เต็ม ก็เริ่มตระหนักได้ว่า … เปลี่ยนเถอะ

จนได้ลอง Sketch แล้วพบว่า ทำไมไม่เปลี่ยนให้เร็วกว่านี้ 555 Sketch จัดการขนาดไฟล์ได้ดีมาก เราสามารถใส่ม็อกอัพ หลายๆหน้าในไฟล์เดียวกันได้ และใน 1 ไฟล์ สามารถแบ่ง page ย่อยๆไปได้อีก นั่นหมายความว่า ทั้งโปรเจกต์สามารถอยู่ได้ในไฟล์เดียว และพอเช็คขนาดไฟล์ก็เล็กกว่า photoshop หน้าเดียวอีก amazing!

Tool การใช้งาน ของ Sketch ก็มีเยอะมากมาย ใช้งานง่ายกว่าของ Photoshop เยอะมาก แต่ละอันก็คัดสรรมาสำหรับการออกแบบ UI ล้วนๆ ดังนั้นเรื่อง learning curve ก็เลยต่ำกว่า photoshop อย่างเห็นได้ชัด แต่พอเค้าเน้นเรื่องการออกแบบ UI เค้าเลยตัดส่วนที่เป็นการแต่งภาพ และ การไดคัทภาพออกไปให้คนไปทำบน photoshop แล้ว import มาแทน

พวกเราใช้ Sketch ประมาณ 1-2 ปี แล้วกิเลสตัวใหม่ก็บังเกิด แล้วถ้าอยากทำ prototype ด้วยละ?อยากให้สามารถทำ Demo แล้วมี animation ด้วยจะทำได้มั้ย? (สมัยนั้น Sketch ยังทำ prototype ไม่ได้) เราจึงต้องใช้แอปอีกตัวคือ Flinto เพื่อดูแลในส่วนนี้ ซึ่งจริงๆถามว่า Flinto ดีมั้ยก็ต้องบอกว่าเท่าที่เคยลอง Flinto เป็น แอปที่ทำ prototype ได้ละเอียดที่สุด (Nov 2020) สามารถกำหนด animation ได้ตามใจต้องการ

อีกปัญหาที่เจอคือ เนื่องจาก sketch เป็นแอปบนแมคเท่านั้น และต้องจ่ายตังค์รายปี ทำให้เวลาส่งต่องานให้ ​Dev จะไม่สามารถส่งไฟล์ไปให้เค้าได้ แต่จะต้องพึ่งแอปอีกตัว ชื่อ Zeplin เป็นตัวกลาง

จากที่กล่าวมาข้างต้น ทำให้เราเจอปัญหากับ sketch คือ แม้ทุกอย่างจะดี แต่การจะทำงานให้ครบวงจร จำเป็นต้องพึ่งแอปอื่นๆเข้ามาร่วมด้วย ทั้ง Photoshop Flinto และ Zeplin พวกเราจึงมองหาแอปอื่น ที่จะสามารถทำทุกอย่างได้ครบจบสวยได้ด้วยแอปเดียว

และแล้วโชคชะตาก็พาเรามาเจอกับ…

Adobe XD

Adobe XD เป็นแอปใหม่ ที่เกิดหลังจาก Sketch ซักพัก จริงๆพวกเราก็ได้ยินข่าวมาซักพักเกี่ยวกับแอปนี้ แต่ด้วยความที่เราหลงรัก Sketch และค่อนข้างแอนตี้ Adobe XD เพราะคิดว่าเค้าก็อบ Sketch พวกเราจึงไม่ได้ลองซะที

จนกระทั่งพี่ที่นับถือ แนะนำมาว่า Adobe XD สามารถแก้ปัญหาของ Sketch ได้หลายๆอย่าง ทั้งเรื่องการ share file ให้ developer และการทำ prototype รวมถึงการเชื่อมโยงกันของ Photoshop และ AdobeXD ที่สามารถทำให้คลิกขวาที่รูป แล้วไป edit ใน photoshop ได้เลย!

ต้องบอกว่าในช่วงแรก เราไม่ชอบ Adobe XD เลย เป็นสิ่งที่ทำให้ตัดสินใจกลับไปกลับมาหลายครั้ง ว่าจะใช้ Adobe XD ต่อหรือไม่ สาเหตุคือเราไม่สามารถปิด Side panel ด้านขวาของหน้าจอได้ ทำให้เวลาจะ Preview เว็บ จะต้องกดปุ่ม Preview ทุกครั้ง ซึ่งปัญหานี้ไม่มีใน Photoshop และ Sketch แต่หลังจากใช้ไปซักพัก ก็เริ่มชิน เราจึงเปลี่ยนมาใช้ Adobe XD กันเป็นหลัก

ข้อดีของ XD ที่สำคัญที่สุดคือการทำ Prototype ที่ใช้งานง่ายมาก ถึงแม้จะไม่สามารถ customise ได้เหมือน Flinto แต่ก็เพียงพอในการทำงานของเรา การเก็บไฟล์บน Adobe Cloud ใช้แก้ปัญหาไฟล์หายและยังสามารถแก้งานพร้อมกันหลายคนได้ สุดท้ายคือการแชร์ไฟล์ให้ developer หรือส่ง Mockup ให้ลูกค้าดู ก็สามารถส่งลิงก์ให้เค้าได้เลย อันนี้ถือเป็นอีก killer feature ที่ทำให้เรารัก Adobe XD และอยู่กับมันมาเป็นปี

แต่แล้ววันหนึ่งก็เจอปัญหาใหญ่ เป็นปัญหาที่ทำให้เราต้องตัดใจจาก Adobe XD ในช่วงข้ามคืน ปัญหานั้นคือ … สีเพี้ยน!

เนื่องจากมี project นึงที่พวกเราใช้สีสดในการทำเว็บ ในตอนที่ออกแบบก็เห็นว่าสวยดี สีสดใส แต่พอ เอาโค้ดสีเดียวกัน หรือ export รูปจาก Adobe XD มาใช้ สีที่เคยสดในบนแอป กลับจืดชืด ซึ่งพวกเราถือว่าเป็นสิ่งที่รับไม่ได้ ไปค้นๆในกูเกิ้ลพบว่าปัญหานี้เป็นกับ macbook pro รุ่นใหม่หลังปี 2016 ซึ่งเป็นรุ่นที่พวกเราใช้ในการทำงานเป็นหลัก ซึ่งปัญหานี้ไม่เป็นกับ Photoshop หรือ Illustrator ทั้งๆที่เป็นของเจ้าเดียวกัน

พวกเราจึงต้องหาแอปตัวใหม่ที่จะไม่มีปัญหานี้ จะให้กลับไป sketch หรือ Photoshop ก็คงไม่ทันแล้ว ณ ตอนนั้น มีแอปหลายตัวที่เข้าตากรรมการ ทั้ง invision studio, framer และ Figma แต่ท้ายที่สุดแล้ว แอปที่เราเลือกคือ…

Figma

การย้ายจาก Adobe XD มา Figma ทำได้ไม่ยากนัก เพราะแทบจะทุกอย่างก็คล้ายๆกัน แต่ส่วนหนึ่งที่ทำให้ Figma ต่างจาก Adobe XD และแอปอื่นๆ คือ มันเป็นเว็บแอป ก็คือสามารถทำทุกอย่างผ่าน Browser ได้ ทำได้ไง!

ข้อกังขาหนึ่งที่พวกเรามีคือ แล้ว Performance ละ จะดีเทียบกับ native app ได้เหรอ เพราะขนาด native app ถ้าไฟล์ใหญ่มากๆ ก็ยังมีปัญหาเลย แต่เท่าที่ผ่านมาร่วม 2 เดือนที่พวกเราลองใช้อย่างหนักหน่วง Figma ก็สามารถลบข้อกังขาข้อนี้ของเราไปได้

ข้อดีอีกอย่าง ที่ไม่เคยเจอในแอปอื่นๆคือ การทำ Live edit เว็บ ก็คือเวลาเราส่งงานให้ลูกค้ารีวิว (ส่งลิงก์ม็อกอัพไปให้) แล้วเค้าอยากปรับอะไรนิดๆหน่อยๆ เราก็สามารถแก้ไขได้ทันที แล้วสิ่งที่เราแก้ มันจะไปปรากฎบนหน้าจอลูกค้าแบบ real-time! มันคือข้อดีของการที่ทุกอย่างอยู่บนเว็บ

ข้อเสียเท่าที่เจอคือ เนื่องจากทุกอย่างอยู่บนเว็บ เราจึงต้องใช้อินเตอร์เน็ตในการทำงาน ถ้าไม่มี ก็ไม่สามารถเปิดโปรแกรมได้ และการอัพโหลดภาพขึ้นไป ก็จะใช้เวลาแป๊บนึงในการโหลด อีกปัญหาที่เจอคือ เวลา export file รอนานมาก คงจะเป็นปัญหาของ web app เหมือนกันมั้ง

สรุป

เส้นทางการเฟ้นหาแอปคู่ใจสำหรับออกแบบเว็บก็จบลงที่ Figma แต่ก็ใช่ว่าเราจะใช้ Figma ตลอดไป ในอนาคตอาจจะมีแอปใหม่ที่เหมาะสมมากว่า หรืออาจจะเป็นแอปที่เราเคยลองใช้ไปแล้ว แต่แก้ปัญหาที่เราเคยเจอในอดีต ซึ่งพวกเราก็พร้อมจะกลับไปลองใช้ใหม่

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

paipure

Writer

เริ่มออกแบบและเขียนเว็บมาตั้งแต่ ม.ต้น ทำมาหมดแล้วตั้งแต่เว็บโรงแรม เว็บบริษัท เว็บร้านค้า จนถึงเว็บแฟนคลับเกาหลี! มีความสุขทุกครั้งที่เห็นคนเอาเว็บที่ทำไปใช้ประโยชน์