อัปเดตปี 2025
นับตั้งแต่บทความนี้เผยแพร่ครั้งแรก แนวทางปฏิบัติในด้านการออกแบบ UI/UX ก็มีการพัฒนาอย่างต่อเนื่อง ปัจจุบันที่ Outsourcify Figma ได้กลายมาเป็นเครื่องมือที่เราใช้ ในการออกแบบอินเทอร์เฟซเป็นหลัก ด้วยลักษณะการทำงานร่วมกัน ความเข้ากันได้ข้ามแพลตฟอร์ม และแนวทางบนเว็บอย่างสมบูรณ์ ทำให้ Figma ได้รับการยอมรับว่าเป็นโซลูชันที่เหมาะสมที่สุดสำหรับองค์กรและทีมงานของเรา เราไม่ใช้ Sketch, Adobe XD หรือ Photoshop สำหรับการจำลอง UI อีกต่อไป
ข้อมูลด้านล่างนี้ยังคงมีความเกี่ยวข้องจากมุมมองทางประวัติศาสตร์ เนื่องจากสะท้อนถึงการเปลี่ยนแปลงของอุตสาหกรรมไปสู่เครื่องมือที่มีประสิทธิภาพและทำงานร่วมกันได้มากขึ้น อย่างไรก็ตาม Figma ได้กลายเป็นมาตรฐานอย่างชัดเจน มาหลายปีแล้ว และเราขอแนะนำอย่างยิ่งสำหรับนักออกแบบอินเทอร์เฟซสมัยใหม่ทุกคน
บทความเบื้องต้นจากปี 2018
หลายปีที่ผ่านมา Photoshop ดูเหมือนจะเป็นมาตรฐานสำหรับการออกแบบเว็บและแอพ อย่างน้อยก็ที่ Outsourcify ไฟล์ส่วนใหญ่ที่เราได้รับจากนักออกแบบจะเป็นไฟล์ PSD โดยมีไฟล์ Illustrator บ้างเป็นครั้งคราว หรือไฟล์ InDesign ที่แย่ที่สุด แต่โดยทั่วไปแล้ว Adobe จะเป็นฝ่ายครองตลาด ตั้งแต่สองสามปีที่ผ่านมาสิ่งต่าง ๆ ได้เปลี่ยนแปลงไปเล็กน้อย
คำตอบก็คือไม่Photoshopยังไม่ตาย Photoshop นั้นได้รับการชื่นชมและน่าเกรงขามในเวลาเดียวกัน นักออกแบบบางคนยังคงใช้มันและมันก็โอเคที่จะออกแบบเว็บไซต์แบบนั้น ซึ่งก็สะดวกสำหรับนักพัฒนาเว็บในการแปลงการออกแบบเหล่านี้เป็น HTML อย่างไรก็ตามตอนนี้มีเครื่องมืออื่น ๆ ในการสร้างการออกแบบสำหรับ UI(ส่วนต่อประสานผู้ใช้) / UX(ประสบการณ์ผู้ใช้)
เราเป็นผู้ใช้ Linux และ Windows ที่ Outsourcifyเรามี Mac สำหรับการทดสอบเท่านั้น แต่เราตระหนักดีว่านักออกแบบส่วนใหญ่ทำงานบนคอมพิวเตอร์ Mac และดูเหมือนว่าพวกเขาส่วนใหญ่จะย้ายไปทำที่ Sketch ซึ่งมีผลกระทบต่อMac เท่านั้น (และดูเหมือนว่าจะไม่เคยส่งต่อไปยัง Windows)
อย่างไรก็ตาม สำหรับเรา ผู้ใช้ Windows ตอนนี้ Adobe เสนอตัวเลือกใหม่ที่สมเหตุสมผลแล้ว นั่นคือ Adobe XD (Experience Design) ซึ่งเป็นม้ามืดตัวใหม่ของ Adobe ที่กำลังพัฒนาให้ทันคู่แข่งอย่าง Mac นอกจากนี้ยังมี Figma ซึ่งเป็นแบบเว็บล้วนๆ
ติดตามผู้นำ : ร่าง
Sketch เปิดตัวครั้งแรกในปี 2010 ดังนั้นจึงไม่ใช่เรื่องใหม่ แต่ใช้เวลาหลายปีจึงจะได้รับการยอมรับอย่างกว้างขวาง Sketch ถูกสร้างขึ้นมาเพื่อทดแทน Illustrator และ Photoshop พร้อมทั้งมีอินเทอร์เฟซที่เป็นมิตรต่อผู้ใช้มากขึ้น รวมถึงเครื่องมือเพิ่มเติมสำหรับการสร้างต้นแบบแบบโต้ตอบและการพัฒนาเว็บที่ง่ายขึ้น โดยอนุญาตให้ส่งออกทรัพยากรและสไตล์โดยตรงจากการออกแบบ
ปัญหาหลักคือโปรแกรมนี้มีให้ใช้งานบน Mac เท่านั้น ซึ่งอาจทำให้ Sketch สูญเสียตำแหน่งผู้นำในกลุ่มเครื่องมือออกแบบ UI ในระยะยาว แต่โชคดีที่นักออกแบบยังสามารถทำงานร่วมกับนักพัฒนาด้วยเครื่องมือของบุคคลที่สามได้อย่างมีประสิทธิภาพ (Avocode, Zeplin เป็นต้น)
รักษาความไว้วางใจด้วย Adobe : Adobe XD
Adobe XD นั้นใหม่กว่ามากเนื่องจากเปิดตัวในปี 2016 และดูเหมือนว่าจะเป็นคำตอบสำหรับ Adobe Sketch เช่นเดียวกับ Sketch มันเป็นแอปพลิเคชันเดสก์ท็อปและมีเวอร์ชันสำหรับ Mac และ Windows และอนุญาตให้นักออกแบบบน Mac ทำงานร่วมกับนักพัฒนาบน Windows ได้ (และตรงกันข้าม?) อย่างไรก็ตาม ทั้งสองเวอร์ชันมีความแตกต่างกันและใช้เวลาสักระยะหนึ่งกว่าที่เวอร์ชัน Windows จะตามทันเวอร์ชัน Mac การอัปเดตล่าสุดของ Adobe XD ได้นำเครื่องมือการจัดการเลเยอร์ที่รอคอยกันมาสู่เวอร์ชัน Windows นอกจากนี้ยังมีการปรับปรุงสองสามอย่าง เลเยอร์มีความสำคัญ เป็นคุณลักษณะพื้นฐานที่จำเป็นสำหรับการออกแบบเว็บไซต์ใดๆ
ทั้ง Sketch และ Adobe XD ได้ถูกนำมาใช้งานอย่างรวดเร็วเนื่องจากทั้งสองโปรแกรมตอบสนองความต้องการของนักออกแบบประสบการณ์ผู้ใช้ เมื่อ UX ถูกสร้างขึ้นใน Photoshop หรือ Illustrator เป็นเพราะขาดเครื่องมือที่ดีกว่า ในปัจจุบัน หากคุณยังคงทำงานกับเครื่องมือเหล่านี้และส่งไฟล์ PSD หรือ AI ให้กับนักพัฒนาเว็บ นี่อาจเป็นช่วงเวลาที่จะลองใช้หนึ่งในผู้นำตลาดรายใหม่ เนื่องจากขณะนี้ Adobe XD เทียบชั้นกับ Sketch และมีให้บริการบนแพลตฟอร์มต่างๆ มากขึ้น นี่อาจเป็นโอกาสให้คุณเริ่มเปลี่ยนมาใช้ Adobe XD การเรียนรู้พื้นฐานของ Adobe XD นั้นง่ายมาก ง่ายกว่า Photoshop หรือ Illustrator มาก
เด็กใหม่ในกลุ่ม: Figma
เมื่อไม่กี่ปีที่ผ่านมา มีหนุ่มอายุเพียง 20 ปีคนหนึ่งระดมทุนได้หลายล้านดอลลาร์จากนักลงทุนในซิลิคอนวัลเลย์สำหรับสตาร์ทอัป Figma ของเขา เพื่อสร้างเครื่องมือแก้ไขภาพบนเบราว์เซอร์ โดยใช้เบราว์เซอร์แทนแอปพลิเคชันเดสก์ท็อปที่ต้องติดตั้งในระบบปฏิบัติการที่เข้ากันได้ เช่น Photoshop, Sketch หรือ XD Figma สมควรได้รับการทดลองใช้ และดูเหมือนว่าจะมีคุณสมบัติมากที่สุดในราคาที่ถูกที่สุด
เครื่องมือของบุคคลที่สามสำหรับการดูการออกแบบ
เมื่อเราพิจารณาความสามารถนอกกรอบของเครื่องมือออกแบบ UI เราจะพบว่ามีการใช้เครื่องมือเพิ่มเติม (ซึ่งมีค่าใช้จ่ายเพิ่มเติมด้วย) เพื่อให้ผู้ออกแบบและนักพัฒนาทำงานร่วมกันยังคงเป็นเรื่องน่าปวดหัว แต่ในทางกลับกัน เครื่องมือเหล่านี้ก็มีการพัฒนาอย่างต่อเนื่อง และตอนนี้ก็ไม่เพียงแต่สามารถดูไฟล์การออกแบบได้เท่านั้น แต่ยังสามารถสร้าง CSS จากเลเยอร์ ส่งออกรูปภาพ ฟอนต์ สไตล์ เลือกสี วัดขนาด ระยะทาง และอื่นๆ อีกมากมาย
เครื่องมือของบริษัทอื่นสำหรับการดูไฟล์ Sketch/Adobe ได้แก่:
อะโวโค้ด ( avocode.com )
Avocode เป็นแอปแรกที่เราใช้ดูและผสานการออกแบบที่สร้างด้วย Sketch เราไม่ได้ใช้มาระยะหนึ่งแล้ว และตั้งแต่นั้นมา Avocode ก็พัฒนาไปมากพอสมควร โดยตอนนี้ Avocode อนุญาตให้เปิดการออกแบบ Adobe XD CC, Adobe Photoshop และ Sketch บน macOS, Windows และ Linux หรือในเบราว์เซอร์
Avocode v3 กำลังจะเปิดตัวในปี 2018 และสามารถแก้ไขปัญหาการทำงานร่วมกันระหว่างนักออกแบบและนักพัฒนาได้ทั้งหมด: https://avocode.com/update-3-0
เซพลิน ( zeplin.io )
เป็นคู่แข่งโดยตรงกับโปรแกรมด้านบน โดยช่วยให้สามารถเปิดดีไซน์ Sketch, Adobe XD CC, Figma และ Photoshop CC และส่งออกทุกสิ่งที่จำเป็นในการสร้างเทมเพลต HTML/CSS จากโปรแกรมนี้ได้
ความบ้าคลั่ง ( icons8.com/lunacy )
ตัวเลือกใหม่กว่า ยังเป็นเวอร์ชันเบต้า จากบริษัท “ผู้ให้บริการไอคอน” ชื่อ icons8 และใช้งานได้ฟรี แต่สามารถอ่านไฟล์ Sketch ได้เท่านั้น
Design to HTML
Outsourcify สามารถเสนอบริการออกแบบ HTML ทุกประเภทได้ เรายินดีที่จะรับไฟล์ Photoshop เราไม่แน่ใจว่าเราชอบ Adobe XD มากกว่าหรือเปล่า คงต้องบอกว่าขึ้นอยู่กับนักพัฒนาแต่ละคน บางคนยังคงชอบเครื่องมือเก่าๆ ของพวกเขา และมีเหตุผลที่ดีด้วย แต่เอาเข้าจริงแล้ว วงการการออกแบบเว็บและแอปพลิเคชันได้รับการปรับปรุงให้ดีขึ้นตั้งแต่สมัย PSD ถึง HTML และมีเหตุผลหลายประการว่าทำไมถึงเวลาแล้วที่ต้องเปลี่ยนมาใช้เครื่องมือที่ดีกว่า
เมื่อพิจารณาถึงทุกสิ่งแล้ว หากคุณต้องการทีมพัฒนาเว็บที่สามารถจัดการกับการออกแบบเว็บและแอปพลิเคชันประเภทต่างๆ เพื่อแปลงให้เป็นโค้ด HTML ที่ดีที่สุดเท่าที่คุณจะคาดหวังได้ Outsourcify ทำ ” การแปลง Photoshop เป็น HTML ” “การแปลง Adobe XD เป็น HTML ” ” การแปลง Sketch เป็น HTML ” ” การแปลง Figma เป็น HTML ” และเราพร้อมที่จะลอง ” ทุกสิ่งที่คุณต้องการแปลง HTML ” หากคุณสามารถโน้มน้าวให้เราเชื่อว่าเทคโนโลยีการออกแบบ/UI ใหม่นี้เป็นเทรนด์ใหม่ด้วยเหตุผลที่ดี
